Integrar el widget en una web o intranet
Cómo pegar el fragmento de código del widget de killari.ai en cualquier página web o intranet corporativa para desplegar el asistente como burbuja flotante.
El widget de killari.ai es una burbuja de chat embebible que puedes añadir a cualquier página web o intranet sin modificar tu aplicación existente. Se integra con un fragmento de código de una sola línea.
El fragmento de código
Desde Admin → Agentes → [versión] → Canal: Widget, copia el fragmento de integración que se muestra para esa versión. Tiene este aspecto:
<script
src="https://widget.killari.ai/widget.js"
data-version="SLUG_DE_TU_VERSION"
async
></script>
Pega este código antes del cierre de la etiqueta </body> en las páginas donde quieres que aparezca el asistente. La burbuja de chat aparecerá en la esquina inferior derecha de la página.
Atributos de configuración
Puedes personalizar el comportamiento del widget con atributos adicionales en la etiqueta <script>:
| Atributo | Descripción |
|---|---|
data-version |
El identificador de la versión de agente que deseas mostrar. Obligatorio. |
data-user-email |
Correo electrónico del usuario actualmente autenticado en tu sistema. Si lo proporcionas, el asistente puede personalizar la experiencia y la memoria funciona vinculada a ese usuario. |
data-user-id |
Identificador del usuario en tu sistema. Alternativa o complemento a data-user-email. |
data-lang |
Idioma preferido de la interfaz del widget (por ejemplo, es para español). Por defecto usa el idioma del navegador. |
Identificación de visitantes anónimos
Si no proporcionas datos de usuario, el widget identifica a cada visitante con un identificador anónimo de sesión. El asistente puede mantener el contexto dentro de esa sesión, pero no entre sesiones distintas del mismo navegador.
Esto es adecuado para páginas públicas donde los visitantes no están autenticados en tu sistema.
Dónde colocar el fragmento
- En toda la web o intranet: colócalo en la plantilla o layout principal para que el widget aparezca en todas las páginas.
- Solo en páginas específicas: colócalo únicamente en las páginas donde el asistente es relevante (por ejemplo, la sección de soporte o la intranet de un departamento).
- Múltiples versiones en distintas páginas: puedes usar distintos
data-versionen páginas diferentes para mostrar distintos agentes según el contexto.
Configuración del aspecto del widget
El aspecto del widget (colores, nombre del asistente, mensaje inicial y sugerencias) se configura desde el backoffice en Admin → Agentes → [versión] → Apariencia, no en el código HTML. Así puedes cambiar el diseño sin tocar el código de integración.
Verificar que el widget funciona
Tras añadir el fragmento, abre la página en un navegador y comprueba que aparece la burbuja de chat. Si no aparece:
- Verifica que el atributo
data-versiones correcto y que la versión está activa en el backoffice. - Comprueba que la versión tiene el canal Widget configurado (no Chat u otro canal).
- Revisa la consola del navegador por si hay errores de carga del script.