Apariencia

La pantalla de Apariencia permite personalizar completamente el diseño del asistente virtual para que se adapte a la identidad visual de la marca de tu cliente. Desde colores y ubicación hasta iconos y mensajes popup, esta sección incluye todas las herramientas necesarias para que el asistente encaje perfectamente en la página web.

En esta pestaña puedes:

• Personalizar colores y formas: Define el color principal, el radio de bordes y otros detalles del diseño.
• Configurar mensajes popup: Ajusta el texto que aparece cuando el chatbot está cerrado para atraer la atención de los usuarios.
• Elegir iconos y tamaños: Selecciona y ajusta el icono del asistente según tus preferencias.
• Ubicar el asistente en la pantalla: Configura la posición exacta del widget tanto en móvil como en ordenador.

Además, la vista previa (a la derecha) te permite ver en tiempo real cómo quedará el asistente en diferentes dispositivos (móvil u ordenador).

Cabecera

La cabecera es el área superior del chat, donde puedes incluir información visual y textual relevante.

• Imagen: Representa el logotipo o imagen del asistente en la parte superior del chat. Sube una imagen personalizada para que el asistente refleje la identidad visual de tu marca, evitando la imagen predeterminada.
• Título del asistente: El nombre visible del asistente que aparece en la cabecera. Este título puede ser el nombre de la empresa o cualquier otro texto representativo.
• Subtítulo del asistente: Una breve descripción, ideal para indicar que el usuario está interactuando con un asistente virtual basado en IA.

Sin subtítulo

Si dejas vacío el campo de subtítulo, el contenido de la cabecera se centrará automáticamente, mostrando solo el título del asistente. Esto puede ser útil para diseños más minimalistas o centrados en el branding.

Apariencia general

Esta sección controla el aspecto base del asistente, permitiendo ajustar su diseño a nivel visual.

• Color principal: Define el color principal del asistente, que se aplicará en botones, mensajes y otros elementos destacados.

• Radio exterior: Determina el nivel de redondez de las esquinas del widget. Cuanto mayor el valor, más redondeadas serán las esquinas.

• Ubicación del widget:

  • En ordenador: Puedes ajustar la posición del widget desde el borde inferior derecho de la pantalla (en píxeles).
  • En móvil: También configurable por separado para una mejor adaptación en pantallas pequeñas.

• Fuente del widget: Elige la tipografía que usará el asistente. Actualmente se puede seleccionar entre varias fuentes, como Inter.

• Marca de agua: Si tienes una suscripción de marca blanca, puedes activar esta opción para mostrar una marca de agua personalizada.

  • Texto de la marca de agua: Puedes definir el texto que se mostrará.
  • Enlace de la marca de agua: Dirección web que se abrirá al hacer clic sobre el texto.

  info

  Solo podrás editar la marca de agua si cuentas con una suscripción activa para esta funcionalidad.

Mensaje flotante

El mensaje flotante es un mensaje emergente diseñado para captar la atención del visitante cuando el asistente está minimizado.

• Activar mensaje flotante: Puedes activar o desactivar esta funcionalidad.
• Mensajes popup: Añade uno o más mensajes que se mostrarán cuando el asistente esté cerrado. Ejemplo:
  • ¡Hola! 👋 ¿Te echo una mano?
  • ¿Necesitas ayuda? 😊
• Animación de botes en PC: Activa una animación sutil que hace “botar” el icono del asistente, aumentando su visibilidad.
• Estilo del mensaje: Puedes elegir entre varios estilos para el mensaje flotante, algunos más llamativos y algunos más discretos.

Escoger estilo del mensaje

Para ver los estilos del mensajes flotantes en acción, cambia la vista previa a modo Ordenador, ya que esta es donde podrás ver mejor la vista prévia y escoger el que mejor se adapte a tus necesidades.

Apariencia del icono

El icono del asistente es el elemento que representa al chatbot cuando está minimizado.

• Seleccionar icono: Elige entre varias opciones predeterminadas para definir la apariencia del icono.
• Radio del icono: Ajusta la curvatura de las esquinas del icono.
  • Ejemplo: Un radio alto hará que el icono sea completamente circular.
• Tamaño del icono: Permite modificar el tamaño del icono para adaptarlo al diseño general de tu página web.

Vista previa

La vista previa, ubicada en la parte derecha de la pantalla, permite visualizar en tiempo real cómo se verá el asistente en diferentes dispositivos.

• Alterna entre las vistas de móvil y ordenador para comprobar que el diseño sea coherente en ambos formatos.

note

Aunque la mayoría de las configuraciones son universales, algunos elementos, como los mensajes popup, pueden variar ligeramente entre dispositivos. Asegúrate de revisar ambas vistas para garantizar una experiencia consistente.