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-version en 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:

  1. Verifica que el atributo data-version es correcto y que la versión está activa en el backoffice.
  2. Comprueba que la versión tiene el canal Widget configurado (no Chat u otro canal).
  3. Revisa la consola del navegador por si hay errores de carga del script.