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 forma 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 del globo de mensaje 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 con qué puede ayudar el bot.

Ejemplos:

1. “¡Hola! ¿En qué puedo ayudarte hoy?”
2. “Bienvenido a Soporte 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 usar
Inferior derecha	bottom-right (predeterminado)	Ubicación estándar, funciona para la mayoría de 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 la pantalla de inicio proporcionando una URL de imagen.

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

Mediante 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: se rechazan 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 se 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

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

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

Coincidir con el Visitante (configuración regional)

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

1. Selecciona el modo Coincidir con el Visitante.
2. Aparece un campo para cada una de las 15 configuraciones regionales compatibles.
3. Completa el texto de saludo para cada idioma que desees admitir.
4. Deja en blanco el campo de una configuración regional para usar el saludo Estático como respaldo para ese idioma.

Configuración de ejemplo:

• Tailandés: “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
• Inglés: “¡Hola! ¿En qué puedo ayudarte hoy?”
• 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 usa el idioma configurado en Configuración de IA → Idioma de Respuesta Principal.

Usa Org-Main cuando tu equipo opera en un idioma y deseas que todos los saludos sean coherentes.

---

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 fijadas a 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 obtener una descripción completa del comportamiento.

---

Idioma Predeterminado

v1.6.8

Establece un idioma predeterminado para el widget para que los visitantes vean la interfaz en tu configuración regional preferida antes de que ocurra cualquier detección automática. Ve a Configuración → Canales → Web → Personalizador → Idioma Predeterminado y selecciona del 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. Configuración regional del código de inserción — el valor locale en el código de inserción
5. Tailandés — respaldo cuando no hay otra configuración

Selecciona “Ninguno — seguir configuración de inserción” para omitir esta configuración y usar en su lugar el valor de configuración regional del código de inserción.

Nota

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

---

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 móvil 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 lo ideal. Los clientes quieren hacer su pregunta, no leer un párrafo.