Configuración y personalización del widget

Añade a tu sitio un widget de chat con IA en menos de 5 minutos.

Configuración rápida

Poner tu chatbot en línea es sencillo. Solo tienes que copiar un pequeño fragmento de código desde tu panel.

Paso 1: obtén el código de inserción

1. Abre tu panel y selecciona tu proyecto.
2. Ve a la pestaña Insertar.
3. Elige la clave API que quieras usar o crea una nueva.
4. Copia el fragmento de código generado.

Paso 2: añádelo a tu sitio

Pega el fragmento justo antes de la etiqueta de cierre </body> en cada página donde quieras mostrar el widget.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="es"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Consejo Eso es todo. No necesitas configurar colores ni ajustes en el código; todo se administra desde el panel. :::

---

Personalización visual

ChattyBox incluye un editor visual integrado. Puedes ajustar el aspecto del widget para que coincida con tu marca sin tocar código.

Controles del panel

1. Color de acento - Elige el color principal de tu marca para el lanzador, los destacados y los mensajes del usuario.
2. Posición - Decide dónde aparece el widget en la pantalla.
3. Título del encabezado - Define el título en la parte superior de la ventana de chat.
4. Mensaje de bienvenida - Personaliza el primer mensaje que verán los visitantes.

nota

Los cambios realizados en el panel se aplican al instante. No necesitas actualizar el código de inserción en tu sitio.

Opciones avanzadas

Ajustes del panel frente a atributos del script

La mayoría del comportamiento del widget debe administrarse desde el panel para no tener que volver a desplegar tu sitio por cambios simples.

Usa el panel para colores, posición, icono, título, mensaje de bienvenida, idioma predeterminado, claves públicas, scraping y analíticas.

Si tu proyecto usa restricciones de origen para claves públicas, mantenlas sincronizadas con los dominios donde el widget está instalado.

Usa atributos del script solo para valores que el widget necesita al cargar la página:

• data-api-key identifica la clave pública del widget.
• data-api-url indica al widget dónde enviar solicitudes.
• data-locale puede forzar un idioma concreto de la interfaz para esa página.

Si el widget no aparece después de instalarlo, consulta la solución de problemas.

Ocultar el widget en páginas concretas

Si necesitas ocultar el widget en páginas seleccionadas, puedes hacerlo con CSS:

.chattybox-widget {
  display: none;
}

Integraciones personalizadas

¿Necesitas una configuración más específica que el widget estándar?

Escríbenos a [email protected] y te ayudaremos a elegir el enfoque adecuado para tu caso.

Soporte multilingüe

El widget de ChattyBox se adapta automáticamente a las preferencias de idioma de tus visitantes y ofrece una experiencia localizada en todo el mundo.

Idiomas admitidos oficialmente

La interfaz del widget, incluidos botones, etiquetas y mensajes del sistema, está disponible oficialmente en 14 idiomas:

Idioma	Código	Interfaz del widget	Calidad de respuesta de IA
Inglés	en	Soporte completo	Excelente
Francés	fr	Soporte completo	Alta
Alemán	de	Soporte completo	Alta
Español	es	Soporte completo	Alta
Italiano	it	Soporte completo	Alta
Neerlandés	nl	Soporte completo	Alta
Portugués	pt	Soporte completo	Alta
Polaco	pl	Soporte completo	Alta
Sueco	sv	Soporte completo	Alta
Indonesio	id	Soporte completo	Media
Estonio	et	Soporte completo	Media
Finés	fi	Soporte completo	Media
Galés	cy	Soporte completo	Media
Checo	cs	Soporte completo	Media

:::note Soporte de idiomas ampliado Aunque la interfaz del widget admite oficialmente 14 idiomas, la IA subyacente puede entender y responder en más de 100 idiomas. No obstante, no podemos garantizar respuestas de alta calidad para idiomas fuera de la lista oficial. :::

Cómo funciona la detección de idioma

El widget usa un sistema de detección en cascada:

1. Atributo data-locale - Prioridad máxima. Añádelo al código de inserción para forzar un idioma.
2. Atributo <html lang> de la página - El widget revisa el idioma declarado por la página.
3. Idioma del navegador (navigator.language) - Usa las preferencias del visitante.
4. Reserva predeterminada - Inglés si no se detecta ningún idioma.

Sobrescritura manual de idioma

Para forzar el idioma del widget sin depender del navegador, añade el atributo data-locale:

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="es"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Caso de uso Esto es útil si tienes un sitio multilingüe con una URL por idioma, por ejemplo /de/ o /fr/. Define data-locale según el idioma de cada página para mantener una experiencia coherente. :::

Ajustes de idioma en el panel

El panel de la app permite configurar las preferencias de idioma del widget por proyecto:

• Detección automática (recomendado) - Coincide automáticamente con el idioma del navegador del visitante.
• Idioma fijo - Obliga al widget a mostrarse siempre en un idioma concreto.
• Permitir sobrescritura por script - Activa o desactiva el uso de data-locale.

Accede a estos ajustes en el panel → Proyecto → Insertar → Idioma del widget.

Coincidencia con el idioma del contenido

Para la mejor experiencia multilingüe, tu chatbot debe responder en el mismo idioma que la pregunta del usuario. Para conseguirlo:

1. Raspa todas las versiones de idioma de tu documentación usando sitemap.xml.
2. El scraper etiquetará automáticamente el contenido con su idioma.
3. El sistema RAG recuperará la versión adecuada según la consulta.

Configuración en el panel: al configurar el scraping, usa la URL de sitemap.xml, por ejemplo https://yourdocs.com/sitemap.xml, para descubrir e indexar automáticamente todas las versiones de idioma.

Solución de problemas

El widget sigue mostrando inglés

• Borra la caché del navegador - El archivo widget.js puede estar en caché. Haz una recarga completa (Ctrl+F5 / Cmd+Shift+R).
• Comprueba data-locale - Verifica que el atributo tenga un código de idioma admitido.
• Comprueba el idioma del navegador - Confirma que la preferencia de idioma sea correcta.
• Comprueba el HTML lang - Asegúrate de que la página use <html lang="es"> o el código adecuado.

Las fuentes aparecen en otro idioma

• Vuelve a raspar el contenido - Asegúrate de que todas las versiones de idioma estén indexadas.
• Usa sitemap.xml - Así el scraper encuentra las URL /de/, /fr/, etc.
• Comprueba el idioma de la pregunta - La IA intenta alinear el idioma de la respuesta con el de la consulta.

Faltan traducciones

• Revisa los idiomas admitidos - Solo los 14 idiomas anteriores tienen traducciones de interfaz garantizadas.

Buenas prácticas

1. Define <html lang> en tus páginas - Ayuda a la accesibilidad y a la detección del widget.
2. Prueba con data-locale durante el desarrollo - Verifica que cada idioma se muestre correctamente.
3. Raspa todas las versiones de idioma - Usa sitemap.xml para una indexación multilingüe completa.
4. Supervisa la distribución de idiomas - Consulta las analíticas para ver qué idiomas usan más tus visitantes.