Lectico

Qué vas a lograr

Al completar esta guía, el widget de chat de tu asistente tendrá los colores, mensajes y estilo visual que reflejan tu marca. Todos los cambios se previsualizan en tiempo real antes de guardar.

Antes de empezar

Paso a paso

Abre la pestaña Apariencia

En el sidebar izquierdo, haz clic en Asistentes. Haz clic en la tarjeta del asistente que quieres personalizar. En el editor del asistente, selecciona la pestaña Apariencia.

A la derecha de la pantalla verás una vista previa del widget que se actualiza en tiempo real con cada cambio que hagas.

Configura el nombre y los mensajes

Completa los siguientes campos en la parte superior de la pestaña:

  • Nombre del asistente en el widget: el nombre que aparece en la cabecera del chat. Puede ser diferente al nombre interno del asistente (ej: "Soporte MiProducto" en lugar de "asistente-soporte-v2").
  • Subtítulo: texto breve que aparece debajo del nombre en la cabecera (ej: "Siempre disponible para ayudarte").
  • Mensaje de bienvenida: el saludo que ve el usuario al abrir el chat por primera vez (ej: "Hola, soy tu asistente. Pregúntame lo que necesites sobre el curso.").
  • Placeholder del input: el texto gris que aparece en el campo de escritura antes de que el usuario empiece a escribir (ej: "Escribe tu pregunta...").

Configura los colores

Ajusta los dos colores principales del widget:

  • Color primario: se aplica a la cabecera del chat, el botón flotante y las burbujas de mensaje del usuario. Usa un color oscuro o de marca que funcione con texto blanco encima.
  • Color de acento: se aplica a los enlaces, el botón de enviar y el avatar del asistente. Usa un color que contraste bien con el fondo del chat.

Haz clic en el selector de color junto a cada campo para elegirlo visualmente, o escribe el código hexadecimal directamente (ej: #4fc3f7).

Ajusta el tamaño del botón flotante

El campo Tamaño del botón flotante controla el diámetro del botón circular que aparece en la esquina de la página. El rango va de 40 a 100 píxeles. Un tamaño de 60 px funciona bien en la mayoría de sitios.

Configura el branding

El campo Branding "Powered by" muestra un texto con enlace en la parte inferior del widget.

Plan Starter y superior — La opción de eliminar el branding "Powered by" no está disponible en el plan Free. Consulta los planes disponibles para más información.

Verifica en la vista previa

Revisa la vista previa a la derecha de la pantalla. Comprueba que:

  • Los colores se ven bien y el texto es legible.
  • El nombre y subtítulo aparecen correctamente en la cabecera.
  • El mensaje de bienvenida se muestra al abrir el chat.
  • El tamaño del botón flotante es proporcional a tu página.

Guarda los cambios

Haz clic en Guardar cambios en la esquina superior derecha. Si intentas salir sin guardar, el sistema te advertirá que tienes cambios pendientes.

Resultado

Tu widget de chat tiene ahora una apariencia personalizada que se integra con tu marca. Los cambios se aplicarán automáticamente en todos los sitios donde tengas el widget instalado.

Próximos pasos