Cómo personalizar la App Web de tu Centro Comercial

La Aplicación Web es una de las herramientas que hace parte del Ecosistema Fidelizer, diseñada para fortalecer la relación entre los centros comerciales y sus visitantes a través de una experiencia digital práctica y atractiva. Su principal objetivo es permitir que el Centro Comercial capture información valiosa de sus visitantes, mientras estos disfrutan de experiencias de gamificación y asimismo de otras funcionalidades prácticas.

A través de esta aplicación, los visitantes pueden :

• Registrarse y crear su perfil.
• Actualizar sus datos.
• Consultar el directorio de establecimientos o marcas.
• Participar en sorteos registrando facturas, ya sea manualmente o mediante Inteligencia Artificial que captura automáticamente los datos de la factura.
• Consultar los detalles de las facturas que ha registrado con la App para participar en sorteos.
• Acceder a beneficios personalizados según los criterios que establezca el Centro Comercial.
• Registrar PQRS (Peticiones, Quejas, Reclamos o Sugerencias) de manera sencilla.

Para que esta herramienta realmente se convierta en una parte de la experiencia de los visitantes y sea congruente, es importante personalizarla con su imagen, colores y contenidos. De esta forma, la aplicación no solo mantiene coherencia con la marca del Centro Comercial, sino que también mejora la experiencia del visitante y fortalece la conexión con la marca.

A continuación te explicaremos:

• Los elementos de la Aplicación Web
• Cómo entrar al administrador de la Aplicación Web
• Cómo personalizarla visualmente para que refleje la identidad de tu Centro Comercial
• Cómo establecer las configuraciones funcionales

Elementos de la Aplicación Web

En la Aplicación Web hay diversos elementos que debes personalizar para que tome la identidad de tu Centro Comercial.

En el siguiente video puedes ver cómo ve la App Web y cómo interactúan con ella los visitantes del Centro Comercial.

A continuación, podrás ver los elementos que tiene la Aplicación Web internamente.

1. Logotipo: Imagen del logotipo de la marca.
2. Avatar de actualización: Imagen personalizable mediante la cual los usuarios no registrados pueden acceder al formulario de registro o al de Iniciar Sesión y los usuarios ya registrados puede acceder al formulario de actualización de datos.
3. Menú: Grupo de opciones que permiten el acceso al formulario de registro o inicio de sesión, el directorio de tiendas, los sorteos vigentes y a las promos o beneficios personalizados.
4. Slides banner principal: Conjunto de imágenes donde se comunican mensajes que el Centro Comercial quiere transmitir a los usuarios de la App. El usuario podrá definir la cantidad de imágenes que requiera. Es un elemento que le ofrece la posibilidad de usarlo estratégicamente,  por ejemplo, comunicando al usuario de la app qué puede encontrar allí, campañas de comunicación que estén vigentes, etc.
5. Indicador slides banner principal: Este elemento indica la cantidad de imágenes contenidas en el banner. El punto colorido mostrara la posición de la imagen que se está mostrando.
6. Menú de acceso rápido: Conjunto de elementos flotantes personalizables en el cual se podrán definir accesos rápido para el usuario. Por ejemplo, acceso a la página web, contacto de WhatsApp, etc.

7. Slides Sorteos: Imagen promocional del segmento Sorteos.
8. Sorteos vigentes: En este contenedor aparecen los sorteos activos con los que cuenta el CRM. Tanto los datos del sorteo como la imagen son cargados desde el CRM. Allí los usuarios registrados podrán ingresar al formulario de registro de facturas mediante el botón «Participar».

9. Slides Promos o Beneficios Personalizados: Imagen promocional del segmento Promos. Esta se podrá personalizar con una imagen. Desde allí también se pude acceder a la vista de Promos o Beneficios Personalizados desde el botón “Ver Promos”.

Elementos del menú

1. Ingresar/Registrarse: Mediante esta opción los usuarios podrán ingresar al formulario de Inicio de Sesión o al de Registro.

2. Tiendas: Aquí se mostrara el directorio de establecimientos o marcas registrados en el CRM.
Se podrán realizar filtros de búsqueda por nombre o abreviación del mismo, categoría, plaza y nivel.
La información de cada marca debe subirse en el CRM en el módulo de «Establecimientos». La imagen del logo de la marca debe ser de 800 x 800 px.
Si no quieres que un establecimiento aparezca en la Aplicación Web, desde el CRM debes desactivar el checkbox denominado “Publica en web”.

Consulta este artículo sobre «Cómo completar la información de Establecimientos / Marcas del Centro Comercial».

3. Sorteos: Corresponde a los sorteos vigentes en el momento. Esta información debe subirse directamente en el CRM y la App la extrae de allí. Al usuario final le aparece la imagen promocional y la descripción. La imagen que subas al CRM del sorteo debe estar en 400 x 320 px.

4. Promos o Beneficios Personalizados: Aquí se mostraran las promociones a las que aplica el usuario. Si aún la persona no ha iniciado sesión solo se mostrarán las promociones o beneficios que fueron definidos desde el CRM con “Target invitados”. Si el usuario ya inició sesión se mostraran las promociones que le apliquen de acuerdo a las reglas definidas en la misma (sexo, edad, segmentos RFM…).
Esta información se carga directamente en el CRM en la parte de “Promos” y la App la extrae desde allí. La imagen que subas para cada promoción debe estar en 600 x 800 px.
Cada promo cuenta con dos botones: «Obtener» en la que la persona obtendrá los Documentos Promos, que son los documentos con los que puede reclamar su beneficio e «Imprimir», en la que obtendrá los Documentos Promos en formato PDF para que los pueda imprimir si los necesita.

Cómo entrar al Administrador de la App Web

Entra a la URL de tu Aplicación Web y agrégale al final /#/administrador.

Por ejemplo: marqet.quantica.com.co/#/administrador

Te aparecerá la siguiente pantalla:

Allí debes poner tus accesos al CRM, usuario y contraseña. Es importante aclarar que la Aplicación Web solo pueden personalizarla usuarios con roles de «Marketing».

Personalización de la App Web con los elementos del Centro Comercial

Ahora, te mostraremos los elementos visuales de la App Web que debes personalizar con la esencia del Centro Comercial.

Para personalizarlos, entra al Administrador de la App Web como explicamos en el punto anterior.

A continuación los elementos de la App Web que debes personalizar:

1. Logotipo: Da clic en el centro del recuadro y se te redigirá al administrador de archivos de tu computador. Selecciona el logotipo de tu Centro Comercial. Esta imagen debe estar en 4724 x 1234 px.

2. Fuente: Escoge una fuente tipográfica de las que están disponibles.

3. Color Navbar y footer: El Navbar es la barra de navegación donde está el logo, las notificaciones y el ícono de usuario. Y el footer es la barra que hay al final de la App.
En el «Gradient 1» se establece el primer color que hay al inicio del Navbar y en «Gradient 2» el segundo color que aparece de la mitad hacia el final. Si estableces dos colores diferentes se creará un Navbar con efecto degradado.

4. Colores indicador slides y sidenav menu: En «Color Indicador Slider» establece el color de los puntos que indican en qué slide se está en ese momento. Los «Slides» son los banners que hay en la página de Inicio. En «color Nabvar movil y notificaciones» establece el color del menú tipo sandwich que aparece en la Aplicación en su versión móvil y de las notificaciones que están en la parte superior derecha de la pantalla.

5. Imagen: Por medio de este elemento podrás cargar una imagen para el banner principal. El tamaño de esta imagen debe ser de 1290 x 578 px.
6. Título: Si deseas que la imagen del banner contenga un título, aquí puedes ingresar dicho texto.
7. Estilo de fuente título: Allí podrás seleccionar si el texto ingresado lo prefieres recto o en cursiva.
8. Color de texto título: Puedes definir el color de la fuente del texto ingresado.
9. Tamaño de fuente título: Puedes definir el tamaño de la fuente del texto ingresado en pixeles.
10. Tipo de fuente del título: Podrás elegir el tipo de fuente del título ingresado.
11. Párrafo o texto del banner: Aquí puedes ingresar un texto adicional al título.
12. Estilo de fuente para el párrafo: Allí podrás seleccionar si el texto ingresado lo prefieres recto o en cursiva.
13. Color de fuente del párrafo: Puedes definir el color de la fuente del texto o párrafo ingresado.
14. Tamaño de fuente del párrafo: Puedes definir el tamaño de la fuente del texto ingresado en pixeles.
15. Tipo de fuente párrafo: Podrás elegir el tipo de fuente del título ingresado.
16. Botón de eliminar: Este botón permite eliminar todo el elemento del banner al que pertenece el botón.
17. Botón agregar: Por medio de este botón podrá agregar una nueva imagen al banner principal.

Recomendaciones con respecto a las imágenes del banner principal:

• Estas imágenes deben ser de 1280 x 578 px.
• Te aconsejamos que sean de formato .PNG para que estén en buena resolución y no se pixelen.
• La información principal como textos y personas deben estar en el centro de la imagen, guardando unas márgenes de aproximadamente 117 px arriba y abajo y de 355 px a cada lado. Esto para que se visualicen correctamente en todos los tipos de pantallas. La idea es que no se corten los textos ni las personas. Eso no quiere decir que fuera de las márgenes no pueden ir elementos, sí pueden ir, pero no pueden ser indispensables para entender el mensaje

Imagen de referencia

Tanto el banner de Sorteos como de el de Promos o Beneficios Personalizados cuentan con los mismos ítems de configuración que el banner principal. Solo difieren que no tienen los botones de “Agregar ítem” y “Eliminar ítem”,  y solo permiten un elemento en el slider, es decir, una imagen con sus respectivo título y párrafo.

17. Imagen Tiendas: En este espacio puedes seleccionar una imagen estándar para la tiendas (establecimientos o marcas) que no tengan logo y definir si además del logo se muestra o no el nombre de la tienda. Esta imagen debe ser de 800 x 800 px.
Consulta este artículo para conocer cómo personalizar la información de los establecimientos o marcas en el CRM. La información que coloques allí será la que aparecerá en el directorio de tiendas de la App Web.

18. Color botones sorteos:  Mediante estos elementos podrás elegir el color de fondo y el color de fuente de los botones “Participar” de los sorteos vigentes y “Ver Promos” del banner de Promos.

19. Color Botones Promos: Mediante estos elementos podrás elegir el color de fondo y el color de fuente de los botones del filtro de Promos y de los botones de las tarjetas de las Promos. Los dos primeros cajones son para elegir el color del botón y de la fuente del botón de filtro de la sección de Promos y los segundos dos cajones son para escoger el color del botón y de la fuente de los botones de tarjetas de la sección de Promos.

20. Color Botones Formulario de Registro y Facturas: Aquí podrás establecer el color de fondo y el color de la fuente de los botones de registro de ambos formularios, tanto el de registro como el de registrar facturas.

21.Color botones login: Aquí podrás establecer el color de fondo y el color de la fuente del botón del login o inicio de sesión de la aplicación.

Cuando ya hayas configurado todo lo anterior da clic en «Guardar» o «Save» en la parte inferior.

Configuraciones funcionales

Además de la personalización visual, la Aplicación Web cuenta con una serie de configuraciones funcionales que permiten definir cómo se comportan algunas de sus características y qué tipo de experiencia tendrán los usuarios al interactuar con la app.

A continuación, cómo configurar cada una de ellas:

1. Nombrar elementos del menú y política de tratamientos de datos: En esta sección podrás definir los nombres de cada uno de los elementos del menú de la aplicación. También ingresar la URL de la política de tratamientos de datos a la que se accederá desde el formulario de login o inicio de sesión de la aplicación, para aquellos usuarios que quieran consultarla.

2. Elementos del menú: Aquí podrás establecer los elementos del menú que se mostrarán en la aplicación. Los elementos de la izquierda funcionan como un interruptor.

3. Campos Registro y Actualización de cuentas: Podrás establecer si quieres o no que estos campos aparezcan en el formulario de registro de cuentas.

4. Campos Factura Remota: Podrás establecer si quieres o no que estos campos aparezcan en el formulario de registro de facturas.

5.Ítems botones flotantes menú de acceso rápido: En la columna izquierda podrás establecer qué botones flotantes quieres que aparezcan el menú de acceso rápido y a la derecha definirá sus respectivos enlaces. Este menú de acceso rápido sirve básicamente para agregar enlaces que le podrían ser útiles a los usuarios de la app. Están disponibles Email, WhatsApp, Página Web y un Sitio Web que sea de Ayuda.

6. División Política: Podrás elegir el país, departamento y ciudad por defecto que se mostrará en el formulario de registro y actualización de datos.

7. Título de la aplicación: Se utiliza para indicar el título de la aplicación que mostrará en el navegador web en su pestaña superior.

Cuando ya hayas configurado todo lo anterior da clic en «Guardar» o «Save» en la parte inferior.

En conclusión, personalizar la Aplicación Web es un paso clave para convertirla en una extensión digital de tu Centro Comercial y en una herramienta estratégica para fortalecer la relación con los visitantes. Al adaptar elementos visuales como logos, colores y banners, así como configurar adecuadamente sus funcionalidades, es posible ofrecer una experiencia coherente con la identidad de la marca y más atractiva para los usuarios.

Además, cuando la aplicación se utiliza de forma estratégica, aprovechando sus espacios de comunicación, sorteos, beneficios personalizados y herramientas de interacción, se convierte en un canal valioso para captar información, conocer mejor a los visitantes y desarrollar campañas de marketing más efectivas.

Te recomendamos revisar periódicamente la configuración y los contenidos de la aplicación para mantenerla actualizada con las campañas y mensajes más relevantes para tus visitantes. De esta manera, podrás aprovechar todo el potencial de la Aplicación Web como parte del ecosistema Fidelizer y de la estrategia digital de tu Centro Comercial.