Personalizar la apariencia de tu widget de chat

Configurar la apariencia

Ve a Canales → Chat web → Apariencia. Los ajustes están a la izquierda y la vista previa en directo a la derecha: es tu chat real. Todo se guarda automáticamente.

Mira: cómo configurar el chat web en Bugalou

Pasos y transcripción en la página del vídeo →

Estilo y fuente

En Estilo, elige un aspecto para la ventana de chat. Tus colores y tu logotipo se mantienen; el estilo define las formas:

• Clásico: una cabecera de chat blanca, una cabecera de color en la pantalla de inicio
• Color: la cabecera del chat también en el color de tu marca, los mensajes sobre un fondo gris claro
• Suave: formas redondeadas, burbujas de mensaje flotantes y un campo de entrada con sombra; el título grande y a la izquierda
• Minimalista: limpio y plano, líneas finas, esquinas pequeñas, sin sombras
• Oscuro: un chat oscuro, ideal para webs oscuras

En Fuente, elige Sistema (predeterminada), Igual que tu web (el chat adopta la fuente de la página) o una de Inter, DM Sans, Manrope, Nunito, Montserrat, Plus Jakarta Sans, Rubik y Lora. Las fuentes se cargan desde Bugalou, nunca desde Google: ningún dato de tus visitantes va a terceros.

• Alineación del encabezado: Automática (como lo hace el estilo), Izquierda o Centro: el título de la pantalla de inicio
• Mostrar logotipo: desactívalo y en la cabecera de la pantalla de inicio y del chat solo se muestra tu título, como una cabecera de texto limpia. Los pequeños avatares junto a los mensajes se mantienen.
• Navegación inferior: Iconos con texto o Solo iconos (más minimalista, con una línea corta del color de tu marca bajo el icono activo)

Funciones del chat

Elige qué pueden enviar los visitantes además de texto:

• Emoji: un selector de emoji junto al campo de entrada (activado por defecto)
• Archivos adjuntos: fotos (jpg, png, webp, gif) y archivos PDF de hasta 10 MB (activado por defecto). Un visitante puede enviar un archivo cuando hay una conversación en marcha. Los archivos llegan a tu bandeja de entrada con la conversación y quedan sujetos a tu periodo de conservación de datos.

Colores

• Color principal: el botón, la pantalla de inicio, los mensajes de los visitantes, los botones y los enlaces. Por defecto: #3B82F6
• Color del texto del botón: el icono del botón de chat. Por defecto: #FFFFFF
• Color del texto de los mensajes: el texto de los mensajes de los visitantes. Por defecto: #FFFFFF
• Color del texto del encabezado de bienvenida: el título en la cabecera del chat (Clásico, Suave y Minimal). Por defecto: #1F2937
• Fondo del chat: el fondo detrás de los mensajes. Con los estilos Color y Oscuro, manda el estilo.

Ajustes del botón

• Posición: abajo a la derecha (predeterminado) o abajo a la izquierda
• Margen horizontal y Margen vertical: la distancia al borde, en píxeles (por defecto 20)
• Estilo del botón: Círculo, Redondeado, Cuadrado, Píldora (con la palabra "Chat") o Flotante (con un resplandor del color de tu marca)
• Icono del botón: Puntos de chat, Burbuja, Mensaje, Soporte, Rápido u Ola

Al abrirse y cerrarse hay una breve animación: la ventana crece desde el botón y el icono se convierte en una cruz.

Mensaje de bienvenida, textos e idiomas

Define los textos que ven los visitantes: el título y el mensaje de bienvenida, el título de la pantalla de inicio, el texto del botón de chat, el subtítulo de la pantalla de contacto, el texto de ejemplo del campo de entrada y el saludo en el chat. Elige también el Idioma predeterminado (Nederlands, English o Deutsch) y el Nombre del chatbot.

Multidioma (Pro y Enterprise): marca idiomas adicionales en Ofrecer también estos idiomas. Entonces los visitantes cambian de idioma con una pequeña bandera, y tus textos, FAQ y campos de formulario se traducen automáticamente. Ves el idioma elegido como una bandera en la conversación de la bandeja de entrada. Con la traducción automática de las conversaciones con clientes (Enterprise) también lees los mensajes en tu propio idioma.

Las pantallas del widget

• Inicio: tu logotipo y el título de bienvenida, una tarjeta para iniciar un chat y, debajo, Sigue tu pedido (si activas ese botón en Comportamiento) y tus preguntas frecuentes. La pantalla de inicio cabe en una sola pantalla; cuando hay más, la lista se difumina por abajo para indicar que se puede hacer scroll.
• Chat: la conversación con el AI Agent o con tu equipo. Los enlaces de las respuestas se pueden pulsar, en el color de tu marca.
• Contacto: tus formularios ("Elige un tema") y un formulario de correo. Todo lo que envía un visitante llega a tu bandeja de entrada.

En la parte inferior del chat aparece "Funcionamos con Bugalou" en letra pequeña. Desactívalo en Comportamiento → Marca.

Vista previa en directo

La vista previa de la derecha es tu chat real: cada cambio se muestra al instante, antes de guardarse. Haz clic por ahí, abre tus FAQ, cambia de idioma o haz una pregunta: tu AI Agent responde como respondería a un visitante. Los mensajes de prueba no se guardan, no llegan a tu bandeja de entrada y no cuentan para tu uso.

• Escritorio y Móvil: ve el chat en un ordenador o como en un teléfono
• ↻ Empezar de nuevo: reinicia la vista previa