Personalización del Widget

Personalización del Widget

Personaliza la apariencia de tu widget de chat para que coincida con tu marca y el diseño de tu sitio web.

Configuración

Todas las opciones de personalización del widget están disponibles en Configuración → Canales → Web. Selecciona tu canal web y abre la pestaña Apariencia.

---

Color del Tema

El color del tema se aplica de manera uniforme en todo el widget:

• Fondo del botón lanzador
• Fondo de la barra de encabezado
• Color del botón de envío
• Color de resaltado de enlaces
• Fondo de la burbuja de mensajes del usuario

Elige un color que coincida con la identidad de tu marca y garantice un buen contraste con el texto blanco.

---

Mensaje de Bienvenida

El mensaje de bienvenida es el primer texto que los clientes ven al abrir el widget. Mantenlo amigable y explica claramente en qué puede ayudar el bot.

Ejemplos:

1. “¡Hola! ¿En qué puedo ayudarte hoy?”
2. “Bienvenido al soporte de Acme. Pregúntame cualquier cosa sobre nuestros productos y servicios.”
3. “¡Hola! Estoy aquí para ayudar. ¿En qué puedo asistirte?”

---

Posición del Widget

Posición	Valor de configuración	Cuándo usarlo
Inferior derecha	bottom-right (predeterminado)	Ubicación estándar, funciona para la mayoría de los sitios
Inferior izquierda	bottom-left	Cuando el lado derecho entra en conflicto con otros elementos

---

Avatar

v1.6.4

Muestra un avatar personalizado en el encabezado del widget y en la pantalla de inicio proporcionando una URL de imagen.

Desde el Panel: Establece la URL del avatar en Configuración → Canales → Web → Personalizador → URL del Avatar.

Desde el Código de Inserción: Pasa avatarUrl en la configuración del tema:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

Requisitos:

• Debe ser una URL https:// (las URL http, data: y javascript: son rechazadas por seguridad)
• Tamaño recomendado: 128 × 128 píxeles (cuadrado)
• Formatos compatibles: PNG, JPG, WebP, SVG
• Si la URL no es válida o la imagen no carga, se muestra el ícono predeterminado

---

Modo de Saludo

v1.6.2

El mensaje de saludo admite tres modos de idioma. Ve a Configuración → Canales → Web → Personalizador y busca la sección Modo de Saludo.

Estático

Se muestra el mismo texto de saludo a todos los visitantes, independientemente del idioma. Este es el modo predeterminado.

Ingresa un único saludo en el campo de texto. Ejemplo: “¡Hola! ¿En qué puedo ayudarte hoy?”

Coincidir con Visitante (idioma)

Muestra un saludo diferente para cada idioma. El widget lee el idioma detectado del visitante y muestra el saludo correspondiente.

1. Selecciona el modo Coincidir con Visitante.
2. Aparece un campo para cada uno de los 15 idiomas compatibles.
3. Completa el texto de saludo para cada idioma que desees admitir.
4. Deja el campo de un idioma en blanco para recurrir al saludo Estático en ese idioma.

Ejemplo de configuración:

• Tailandés: “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
• Inglés: “Hi! How can I help you today?”
• Japonés: “こんにちは！何かお手伝いできますか？“

Org-Main

El saludo siempre se muestra en el idioma de respuesta principal de la organización, independientemente del idioma del visitante. Este modo lee el idioma configurado en Configuración de IA → Idioma de Respuesta Principal.

Usa Org-Main cuando tu equipo opera en un solo idioma y quieres que todos los saludos sean consistentes.

---

Selector de Idioma

v1.6.2

El selector de idioma agrega un ícono de globo (🌐) al encabezado del widget para que los visitantes puedan elegir explícitamente su idioma. Está desactivado de forma predeterminada.

Para activarlo: En Configuración → Canales → Web → Personalizador, activa Mostrar Selector de Idioma.

Cuando un visitante selecciona un idioma del menú desplegable:

• Todas las respuestas de IA quedan bloqueadas en ese idioma durante la sesión
• El bloqueo anula la detección automática incluso si el visitante escribe en un idioma diferente
• La interfaz del widget cambia al idioma seleccionado

Consulta Widget Web — Selector de Idioma para ver el resumen completo del comportamiento.

---

Idioma Predeterminado

v1.6.8

Establece un idioma predeterminado para el widget de modo que los visitantes vean la interfaz en tu idioma preferido antes de que ocurra cualquier detección automática. Ve a Configuración → Canales → Web → Personalizador → Idioma Predeterminado y selecciona desde el menú desplegable.

La cadena de prioridad de idioma es:

1. Forzar Este Idioma (Configuración de IA) — anula todo cuando está activado
2. Selección explícita del visitante (mediante el selector de idioma, si está activado)
3. Idioma Predeterminado — esta configuración
4. Idioma de configuración de inserción — el valor locale en el código de inserción
5. Tailandés — reserva cuando no hay ninguna otra configuración

Selecciona “Ninguno — seguir la configuración de inserción” para omitir esta configuración y depender del valor de idioma del código de inserción.

Nota

El Idioma Predeterminado solo afecta el idioma de la interfaz del widget. El idioma de las respuestas de IA se controla por separado en Configuración de IA.

---

Modo Oscuro y Variables CSS

v1.6.8

El widget admite un interruptor de modo oscuro integrado que los visitantes pueden activar desde el encabezado del chat. Toda la interfaz del widget utiliza propiedades personalizadas de CSS, lo que garantiza una apariencia consistente en ambos modos.

Variables CSS Principales

Variable	Descripción
--cw-primary	Color de marca principal (según la configuración de color del tema)
--cw-primary-rgb	Componentes RGB del color principal, usados para efectos de transparencia
--cw-bg	Color de fondo del widget
--cw-bg-secondary	Fondo secundario (campos de entrada, elementos de formulario)
--cw-surface	Color de superficie para tarjetas, tooltips y fragmentos de citas
--cw-text	Color de texto principal
--cw-text-secondary	Color de texto secundario/atenuado
--cw-border	Color de borde para separadores y contornos de entrada

Cuando se activa el modo oscuro, el widget aplica la clase cw-dark o cw-light al contenedor raíz, y todas las variables CSS se actualizan automáticamente. El encabezado con degradado, las burbujas de mensajes, el formulario de contacto y los chips de citas respetan el modo actual.

Nota

El modo oscuro es un interruptor del lado del visitante — no persiste entre sesiones. El widget usa el modo claro de forma predeterminada a menos que el visitante active el modo oscuro durante su sesión de chat.

---

Vista Previa

Después de realizar cambios, usa el panel de Vista Previa en Vivo en el lado derecho de la página de configuración para ver exactamente cómo aparecerá el widget en tu sitio — antes de guardar.

---

Consejos

Consejo

• Prueba tu widget tanto en escritorio como en dispositivos móviles para asegurarte de que no bloquee contenido importante de la página.
• Usa un color de tema de alto contraste para mantener el widget accesible para todos los usuarios.
• Mantén el mensaje de bienvenida corto — una o dos oraciones es ideal. Los clientes quieren hacer su pregunta, no leer un párrafo.