Introducción
El branding abarca la modificación de los distintos aspectos visuales de tu programa y se divide en 3 partes: la apariencia general, la página de fidelidad y el módulo de cuenta del cliente.
💡 Como recordatorio, el objetivo es tener una página en tu sitio web donde tus clientes puedan encontrar tu programa de fidelidad y de recomendación.
Puedes personalizar esta página ajustando los títulos, las descripciones o el orden de visualización, para adaptarla completamente a tus preferencias y a la identidad de tu marca. 🌟
La apariencia general
Podrás modificar la apariencia global de tus espacios de usuario.
Esta sección se divide en 3 partes:
La tipografía
La tipografía te permite modificar las fuentes de tu programa.
✨ Sigue nuestra guía para modificar las tipografías.
El botón de inicio de sesión, de registro y de regreso
Elige el texto del botón y personaliza su apariencia.
Puedes:
definir el tamaño y el grosor del texto,
elegir el color del texto y del fondo,
configurar los colores al pasar el cursor,
ajustar el radio de las esquinas.
Para una personalización avanzada, utiliza un archivo CSS personalizado. Encuentra todos los pasos en nuestra guía.
La página de fidelidad
La página constituye el corazón de tu branding y ofrece un escaparate claro y atractivo de las misiones y programas que propones. Gracias a una personalización completa de los títulos, las descripciones, las imágenes y los colores, esta página se convierte en el reflejo fiel de la identidad de tu marca.
💡 La página se añade con un solo clic desde la pestaña Comunicación - Difusión. ¡Sigue nuestra guía para referenciar tu página!
Puedes elegir ocultar los módulos o reorganizar las secciones en el orden que desees.
El banner
Selecciona la disposición de los textos en el banner según tus preferencias. Opta por una imagen específica, adaptada a la visualización en ordenador o en móvil. También tienes total libertad para personalizar los textos del banner.
1. Disposición
Define la disposición general de la sección.
2. Apariencia de la sección
Imagen – Desktop
Arrastra y suelta una imagen o súbela. (Tamaño recomendado: 1440 × 500 px)
Imagen – Mobile
Arrastra y suelta una imagen o súbela. (Tamaño recomendado: 1440 × 500 px)
Color de la sección
Elige el color de fondo de la sección.
3. Textos
Título
Título
Texto
Elige el texto del título y define sus parámetros de visualización.
Puedes:
alinear el texto
elegir el color y el tamaño del texto
definir el tamaño del texto
elegir el grosor de la fuente
Descripción
Descripción
Texto
Elige el texto de la descripción y define sus parámetros de visualización.
Puedes:
alinear el texto
elegir el color y el tamaño del texto
elegir el grosor de la fuente
El perfil
Personaliza la sección de perfil del usuario modificando el texto, el color y el tamaño a tu conveniencia. Ajusta también el tamaño de los botones de redes sociales para una mejor integración con el resto de la interfaz.
Apariencia de la sección – Redes sociales
Apariencia de la sección – Redes sociales
Elige el texto del botón y personaliza su apariencia.
Puedes:
alinear el texto
elegir el color y el tamaño del texto
definir el grosor
seleccionar el color de fondo de la sección.
Botones de redes sociales
Botones de redes sociales
Personaliza los botones de tus redes sociales
Puedes:
definir el tamaño y el grosor del texto
elegir el color del texto y del fondo,
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Las etapas
Modifica la sección de etapas, tanto para los usuarios conectados como para los no conectados. Puedes cambiar los textos y reformular su presentación según tus necesidades.
Apariencia de la sección
Apariencia de la sección
Color de la sección
Personaliza el color de fondo de la sección.
Modo no conectado
Modo no conectado
Número
Personaliza el número de la etapa.
Puedes:
definir el color y el tamaño del texto
elegir el grosor de la fuente
Título
Personaliza el título principal de la sección.
Puedes:
definir el color y el tamaño del texto
elegir el grosor de la fuente
Descripción
Personaliza la descripción de la sección para guiar al usuario.
Puedes:
definir el color y el tamaño del texto
elegir el grosor de la fuente
Etapa 1 / Etapa 2 / Etapa 3
Puedes:
personalizar el número de la etapa
añadir o modificar el título de la etapa
añadir o modificar la descripción de la etapa
Modo conectado
Modo conectado
Título
Personaliza el título principal mostrado al usuario conectado.
Puedes:
modificar el texto,
elegir el color y el tamaño del texto
elegir el grosor de la fuente
Subtítulo
Personaliza el subtítulo para mostrar el número de puntos del usuario.
Puedes:
modificar el texto,
elegir el color y el tamaño del texto
elegir el grosor de la fuente
Botón “Mis recompensas”
Personaliza el botón para acceder a las recompensas.
Puedes:
modificar el texto
ajustar el tamaño y el grosor del texto
elegir el color del texto y del fondo
configurar el color del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas para redondear el botón.
Botón “Mis actividades recientes”
Personaliza el botón para acceder a las actividades recientes del usuario.
Puedes:
modificar el texto
ajustar el tamaño y el grosor del texto
elegir el color del texto y del fondo
configurar el color del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Las secciones de la página de fidelidad
Reorganiza la sección dedicada a la recomendación, las misiones, las recompensas, los niveles VIP, los test de producto y la tarjeta de fidelidad para que armonice con la estética y la funcionalidad de tu programa.
Las misiones, las recompensas y los test de producto
Disposición
Disposición
Organiza la estructura de la sección y ajusta la apariencia general
Apariencia de la sección
Apariencia de la sección
Texto
Personaliza el texto de esta sección para explicar a los usuarios cómo conseguir puntos.
Puedes:
alinear el texto
elegir el color del texto
ajustar el tamaño y el grosor del texto
definir el color de fondo de la sección
Tarjeta “Misión”
Tarjeta “Misión”
Personaliza la apariencia de la tarjeta de misión.
Puedes:
definir el color del fondo
configurar el color al pasar el cursor
ajustar el radio de las esquinas
elegir el color de los bordes
Número de puntos
Puedes personalizar la visualización del número de puntos.
Puedes:
elegir el color del texto
definir el color del texto al pasar el cursor
ajustar el tamaño del texto y el grosor de la fuente
Nombre de la misión
Puedes personalizar la visualización del nombre de la misión.
Puedes:
elegir el color del texto
definir el color del texto al pasar el cursor
ajustar el tamaño del texto
definir el grosor.
Botón
Botón
Personaliza la apariencia del botón.
Puedes:
ajustar el tamaño del texto
elegir el grosor de la fuente
elegir el color del texto
seleccionar el color del fondo
configurar el color del texto al pasar el cursor
configurar el color del fondo al pasar el cursor
ajustar el radio de las esquinas.
La recomendación
1. Sección recomendación (cliente)
Disposición de la sección
Organiza la estructura de la sección
Apariencia de la sección
Apariencia de la sección
Personaliza la apariencia general de la sección.
Puedes:
añadir una imagen Desktop (tamaño recomendado: 1920 × 960 px) arrastrándola o subiéndola,
añadir una imagen Mobile (tamaño recomendado: 960 × 1920 px) arrastrándola o subiéndola,
elegir el color de la sección.
Apariencia de la tarjeta
Apariencia de la tarjeta
Puedes personalizar la apariencia general, el título y la descripción de la tarjeta.
Puedes:
alinear el texto
definir el color del fondo
configurar el color al pasar el cursor
ajustar el radio de las esquinas
elegir el color de los bordes.
Iconos de compartir
Iconos de compartir
Arrastra una imagen o súbela para el icono.
Enlace
E-mail
SMS
WhatsApp
Messenger
X
Botón
Botón
Personaliza la apariencia del botón.
Puedes:
definir el tamaño del texto
elegir el grosor de la fuente
definir el color del texto y del fondo
definir el color del texto y del fondo al pasar el cursor
elegir el radio de las esquinas.
Tarjeta “No conectado” / Tarjeta “Compartir” / Tarjeta “Felicidades”
Tarjeta “No conectado” / Tarjeta “Compartir” / Tarjeta “Felicidades”
Personaliza el contenido de la tarjeta.
Puedes:
definir el título de la tarjeta
definir el texto de la descripción
definir el texto del botón
3. Sección: Modal Recomendación (amigo/a)
Los pasos de configuración son los mismos que para las demás secciones, incluyendo:
Modal “Verificación”
Modal “Éxito”
Modal “Error”
Apariencia de la sección
Apariencia de la sección
Personaliza la apariencia general del modal.
Puedes:
añadir una imagen Desktop arrastrándola o subiéndola,
añadir una imagen Mobile arrastrándola o subiéndola,
elegir el color de la sección.
💡 Bueno saberlo: el modal de recomendación (amigo/a) — el que se abre cuando un referido hace clic en un enlace de recomendación — sí admite una imagen. Se añade desde Branding → Recomendación → Modal Recomendación (amigo/a) → Apariencia de la sección, con un campo Imagen Desktop y un campo Imagen Mobile, independientes de los de la sección de recomendación (cliente).
Personaliza el contenido de la tarjeta.
Puedes:
definir el título de la tarjeta
definir el texto de la descripción
definir el texto del botón
Tarjeta de fidelidad
Disposición de la sección
Disposición de la sección
Organiza la estructura de la sección
Apariencia de la sección
Apariencia de la sección
Puedes definir la apariencia general de la sección:
utilizar una imagen dinámica,
añadir una imagen personalizada,
elegir el color de la sección.
Textos “Loyalty Card”
Textos “Loyalty Card”
Título
Personaliza el título y la descripción de la sección.
Puedes:
alinear el texto
definir el color del texto
definir el tamaño y el grosor del texto
Descripción
alinear el texto
definir el color del texto
definir el tamaño y el grosor del texto
La cuenta del cliente
Integrar el módulo de cuenta del cliente encima o debajo de los pedidos del cliente es importante por varias razones. Permite a tus clientes conocer su número de puntos y acceder rápidamente al programa. Una mayor visibilidad de los puntos de fidelidad anima a los clientes a aprovecharlos canjeando recompensas.
Puedes modificar la apariencia de la sección eligiendo una imagen desktop o mobile y modificando todos los textos.
Navegación y apariencia
Fondo de la sección
Fondo de la sección
Personaliza el fondo de la sección
Puedes:
añadir una imagen para la versión desktop (540 × 150)
añadir una imagen para la versión mobile (360 × 290)
definir el color del bloque
elegir el color de la navegación
seleccionar el color de la sección
ajustar el radio de las esquinas.
Sección
Sección
Texto
Personaliza el contenido de la sección
Puedes:
definir el título de la sección
alinear los textos
personalizar el color, el tamaño y el grosor del texto.
Puntos
Personaliza la visualización de los puntos
Puedes:
personalizar la denominación de los puntos
personalizar el color, el tamaño y el grosor del texto.
Menú
Menú
Título
Personaliza el contenido de la sección
Puedes:
definir los títulos del menú (Fidelidad, Recompensas, Recomendación)
añadir una imagen para cada entrada
Menú activo
Personaliza el menú activo
Puedes:
definir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Menú inactivo
Personaliza el menú inactivo
Puedes:
definir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Fidelidad
Formato de la tarjeta
Formato de la tarjeta
Personaliza el formato de la tarjeta
Puedes:
elegir el formato Tarjeta de puntos
seleccionar la visualización en banda
adaptar la presentación de la tarjeta de puntos.
Bloque fidelidad
Bloque fidelidad
Título de la sección
Personaliza el título de la sección
Puedes:
personalizar el texto principal
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Niveles VIP
Personaliza los niveles VIP
Puedes:
definir el texto de los niveles VIP
alinear los textos
personalizar el color, el tamaño y el grosor del texto.
Descripción
Personaliza la descripción
Puedes:
definir el texto de la descripción
alinear los textos
personalizar el color, el tamaño y el grosor del texto.
Botón
Botón
Personaliza el botón
Puedes:
definir el texto del botón
elegir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Estilo de la tarjeta
Estilo de la tarjeta
Personaliza el estilo de la tarjeta
Puedes:
elegir el estilo de la tarjeta
seleccionar el estilo de visualización (Simple / Nivel VIP / Recompensa próxima)
Personalización de la tarjeta
Personalización de la tarjeta
Personaliza la tarjeta de fidelidad
Puedes:
definir el color de la tarjeta
ajustar el radio de las esquinas.
Número de puntos
Personaliza la visualización del número de puntos
Puedes:
elegir el color del texto
definir el tamaño del texto
seleccionar el grosor del texto.
Denominación de los puntos
Personaliza la denominación de los puntos
Puedes:
elegir el color del texto
definir el tamaño del texto
seleccionar el grosor del texto.
Nivel VIP
Personaliza el nivel VIP
Puedes:
definir el color del texto
elegir el color de fondo
configurar el color del progreso
seleccionar el color del punto.
Recompensas
Título de la sección
Título de la sección
Personaliza el título de la sección
Puedes:
definir el título de la sección
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza la descripción
Puedes:
definir el texto de la descripción
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Tarjeta “recompensa”
Tarjeta “recompensa”
Personaliza las tarjetas «Recompensa»
Puedes:
definir el color de fondo de la tarjeta
elegir el color al pasar el cursor
ajustar el radio de las esquinas
seleccionar el color de los bordes.
Personaliza el nombre de la recompensa
Puedes:
alinear los textos
elegir el color del texto
configurar el color del texto al pasar el cursor
definir el tamaño y el grosor del texto.
Personaliza la visualización del número de puntos
Puedes:
alinear los textos
elegir el color del texto
configurar el color del texto al pasar el cursor
definir el tamaño y el grosor del texto.
Botón “recompensa”
Botón “recompensa”
Personaliza el botón
Puedes:
definir el texto del botón
elegir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Recomendación
Bloque recomendación
Bloque recomendación
Personaliza el bloque de recomendación
Puedes:
definir el texto de la sección
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza el título de la recomendación
Puedes:
definir el texto del título
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza la descripción
Puedes:
definir el texto de la descripción
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza el botón de recomendación
Puedes:
definir el texto del botón
elegir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Icono ”Compartir”
Icono ”Compartir”
Personaliza los iconos de compartir
Puedes:
añadir un icono para el enlace
añadir un icono para el e-mail
añadir un icono para el SMS
añadir un icono para WhatsApp
añadir un icono para Messenger
añadir un icono para X.
Bloque ”Felicidades”
Bloque ”Felicidades”
Personaliza el bloque «Felicidades»
Puedes:
definir el título del bloque
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza la descripción
Puedes:
definir el texto de la descripción
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza el botón
Puedes:
definir el texto del botón
elegir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Tarjeta de fidelidad
Apariencia de la sección
Apariencia de la sección
Personaliza la apariencia de la sección
Puedes:
Añadir una imagen personalizada (320 × 230);
Textos
Textos
Personaliza los textos
Puedes:
definir el título
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza la descripción
Puedes:
definir el texto de la descripción
alinear los textos
elegir el color, el tamaño y el grosor del texto.
¡Enhorabuena! Has configurado tu branding: esto permitirá a tus usuarios vivir una experiencia única. 🌟
💡 Puedes previsualizar los distintos módulos en formato desktop o mobile haciendo clic en los iconos de la parte superior derecha.