Personalice la apariencia de su chatbot
Personalice la apariencia de su chatbot con los colores de su marca: tema en un clic, colores, logo, botón de inicio, posición y nombre, con vista previa en vivo.
Un chatbot con los colores de su marca inspira confianza: sus visitantes entienden enseguida que están hablando con su empresa. Puede personalizar la apariencia de su chatbot (tema, colores, logo, posición, tamaño) en pocos clics, con una vista previa en vivo.
Dónde modificar la apariencia
Al crear el chatbot: en la etapa 4 del asistente, Apariencia.
Después, en cualquier momento:
- Abra Mis chatbots y haga clic en Editar en su chatbot.
- Abra la pestaña Apariencia.
- Haga sus ajustes mirando la Vista previa en vivo.
- Haga clic en Guardar cambios.
Los cambios se aplican en su sitio web sin tocar el código de instalación. Recargue la página de su sitio para verlos.
Cómo está organizada la página
El tema, el logo y la posición se ven directamente. Dos secciones plegadas se abren con un clic:
- Personalizar los colores: todos los colores, uno por uno.
- Opciones avanzadas: el tamaño del widget, el icono del botón, la animación pulse y el desplazamiento hacia arriba.
La Vista previa en vivo, a la derecha, se actualiza con cada cambio.
El tema
Lo más sencillo es partir de un Tema: ScanChat (por defecto), Claro, Oscuro, Azul pro, Verde natural o Coral. Un clic aplica todos los colores del chatbot de una vez. Después puede ajustarlos uno por uno.
Los colores
Para configurar los colores uno por uno, despliegue Personalizar los colores. Cada color aparece como una pastilla redonda: haga clic en ella para abrir el selector, o escriba su código (por ejemplo, #7C3AED).
Los colores principales
- Color primario (botón, envío, mensajes del visitante por defecto): la burbuja de apertura, el botón de envío y, salvo que se configure otra cosa, los mensajes escritos por el visitante.
- Color secundario (mensajes del bot): el fondo de las respuestas del chatbot.
La ventana de chat
- Fondo de la ventana y Texto de los mensajes del bot y del campo de texto.
- Color de fondo del encabezado y Color del texto del encabezado: la barra superior, con el nombre y el logo.
- Fondo del campo de texto y Borde de la zona de texto: la zona donde escribe el visitante.
Los botones de respuestas rápidas
- Fondo de las respuestas rápidas y Borde de las respuestas rápidas. Consulte Respuestas rápidas.
Los mensajes del visitante
- Fondo de los mensajes del visitante: si se deja vacío («Auto (color primario)»), toma el color primario, como antes.
- Texto de los mensajes del visitante: si se deja vacío («Auto (blanco u oscuro según el fondo)»), cambia automáticamente a blanco u oscuro para seguir siendo legible.
Para volver al color automático, haga clic en la flecha circular a la derecha del campo.
Use el color principal de su sitio web como color primario. Si los mensajes del visitante deben ser discretos (por ejemplo, en un sitio muy colorido), elija un Fondo de los mensajes del visitante más claro.
El logo
En Logo del chatbot, haga clic en Subir logo y elija una imagen: JPEG, PNG, GIF, WebP hasta 5MB.
El logo se muestra en el encabezado de la ventana y, si Icono del botón está configurado en Logo del chatbot, en la burbuja de apertura (vea más abajo). Para cambiarlo, haga clic en la cruz junto al logo actual y luego suba el nuevo.
El logo se muestra en un formato pequeño y redondeado. Una imagen cuadrada, sencilla y legible (su símbolo en lugar de su logo completo con texto) da el mejor resultado.
El botón de inicio
En la sección plegada Opciones avanzadas, la parte Botón de inicio configura la burbuja redonda que abre el chat.
- Icono del botón: Icono de chat (la burbuja de chat) o Logo del chatbot. Sin logo, se muestra el icono de chat.
- Animación «pulse» alrededor del botón cerrado: el halo animado que atrae la mirada. Desmarque la casilla para tener un botón inmóvil.
- Color de la animación pulse: si se deja vacío («Auto (color del botón)»), el halo toma el color del botón.
- Desplazamiento hacia arriba: sube el botón, la burbuja de bienvenida y la ventana de 0 a 200 px, para no tapar un botón de WhatsApp o un banner de cookies. En iPhone, el espacio de la barra de inicio se añade automáticamente.
La burbuja de bienvenida (Interacción)
La burbuja de bienvenida ya no se configura con la apariencia: se encuentra en la etapa 5 del asistente, Interacción, y en la pestaña Interacción cuando edita su chatbot.
Marque Burbuja de bienvenida para mostrar un pequeño mensaje junto al botón cerrado, por ejemplo «¿Tiene una pregunta? Le respondo enseguida 👋».
- Texto de la burbuja: 120 caracteres como máximo. Déjelo vacío para usar el texto por defecto, traducido al idioma del visitante.
- Retraso antes de aparecer (segundos, 0 a 60): 5 segundos por defecto.
La burbuja se muestra una sola vez por visita: no vuelve a aparecer si el visitante la ha cerrado (cruz) o ha abierto el chat. Un clic en la burbuja abre el chat.
A partir del plan Growth, también puede mostrar un mensaje diferente según la página visitada: consulte Invite a sus visitantes con mensajes por página.
Si el visitante cierra la ventana mientras llega una respuesta, aparece en el botón una insignia roja con el número de mensajes no leídos (y «(1)» delante del título de la pestaña). Desaparece en cuanto se vuelve a abrir el chat.
La posición en la página
En Posición del widget, elija Abajo a la derecha o Abajo a la izquierda.
Abajo a la derecha es la ubicación más habitual. Elija abajo a la izquierda si otro elemento ya ocupa la esquina derecha de su sitio web (botón de WhatsApp, banner de cookies, botón «volver arriba»…), o mantenga abajo a la derecha y use el Desplazamiento hacia arriba.
El tamaño del widget
En Opciones avanzadas, en Tamaño del widget, elija Pequeño, Mediano o Grande. El tamaño cambia la burbuja y la ventana de chat. Mediano conviene a la mayoría de los sitios; Pequeño es más discreto, y Grande, más legible para respuestas largas.
El nombre mostrado
El nombre que aparece en el encabezado de la ventana es el Nombre del chatbot. Se modifica en la pestaña General. Elija un nombre claro, por ejemplo «Asistente Solar Plus» o «Asesor Inmobiliario».
Comprobar el resultado
- Guarde sus cambios.
- Abra su sitio web en una ventana de navegación privada (para evitar la caché).
- Compruebe la burbuja, abra la ventana e intercambie algunos mensajes, en ordenador y en móvil.
La burbuja de bienvenida solo se muestra una vez por visita. Para volver a verla durante sus pruebas, abra una nueva pestaña de navegación privada.
Si en un sitio WordPress todavía se muestra la apariencia anterior, vacíe la caché de su plugin de caché.
¿Y después?
- Redacte su mensaje de bienvenida.
- Añada respuestas rápidas.
- Instale el chatbot en su sitio web, si aún no lo ha hecho.
¿No encuentra su respuesta? info@scan-chat.ai