Widget embebible: pegar el asistente en tu web
Cómo obtener el fragmento de script, configurar los atributos del widget e identificar al visitante para una experiencia personalizada.
El widget embebible es una burbuja flotante de chat que puedes añadir a cualquier página web o intranet pegando un fragmento de código. No requiere que el visitante instale nada ni acceda a una URL separada: el asistente aparece directamente dentro de tu sitio.
Obtener el fragmento de script
Una vez que hayas creado y configurado una versión de agente con el canal widget, ve a la pestaña Distribución de esa versión. Encontrarás un fragmento de código similar a este:
<script
src="https://widget.killari.ai/widget.js"
data-version="tu-slug-de-version"
data-api-base="https://api.killari.ai"
async
></script>
Pega este fragmento en el HTML de tu sitio web, justo antes del cierre de la etiqueta </body>. El widget aparecerá como una burbuja flotante en la esquina inferior derecha de la página.
Atributos del widget
El comportamiento del widget se controla principalmente desde la configuración de la versión en el panel de administración. Sin embargo, el fragmento acepta algunos atributos que puedes ajustar por página o contexto:
| Atributo | Descripción |
|---|---|
data-version |
El identificador (slug) de la versión de agente que debe cargar el widget. Obligatorio. |
data-api-base |
La URL base del servicio. Por defecto apunta a la nube de killari.ai; en despliegues on-premise apunta a tu servidor. |
data-visitor-email |
Correo electrónico del visitante autenticado en tu sitio web, si ya lo conoces. Permite al asistente identificar al usuario y aplicar la memoria de conversaciones anteriores. |
data-visitor-id |
Identificador interno del visitante en tu sistema, si no usas correo como identificador. |
Identificar al visitante
Si tu sitio web ya tiene un sistema de autenticación propio, puedes identificar al visitante para que el asistente le recuerde de conversaciones anteriores y personalice las respuestas.
Pasa el correo o el identificador del usuario autenticado como atributo del widget. Por ejemplo, si usas JavaScript para inyectar el widget de forma dinámica:
<script
src="https://widget.killari.ai/widget.js"
data-version="atencion-clientes"
data-api-base="https://api.killari.ai"
data-visitor-email="[email protected]"
async
></script>
Cuando el visitante llega con un identificador conocido, el asistente recupera su historial de conversaciones anteriores y puede continuar donde lo dejó o personalizar las respuestas según lo que ya sabe de esa persona.
Personalización visual
El aspecto del widget (color, ícono, nombre del asistente, texto de bienvenida) se configura desde el panel de administración en la pestaña Apariencia de la versión. No es necesario modificar el fragmento de código para cambiar el aspecto visual.
Los cambios de apariencia entran en vigor de inmediato para todos los sitios donde el widget está instalado.
El widget en una intranet
El widget funciona igual en una intranet privada que en un sitio web público. Si el servidor de la intranet tiene acceso a la red donde está desplegado el servicio de killari.ai, basta con pegar el fragmento en las páginas de la intranet.
Para despliegues on-premise donde el servicio está en la red interna de la organización, el atributo data-api-base apunta a la URL interna del servicio en lugar de a la nube.
Compatibilidad
El widget funciona en los navegadores modernos (Chrome, Firefox, Safari, Edge) tanto en escritorio como en dispositivos móviles. No tiene dependencias externas ni requiere frameworks de JavaScript específicos en tu sitio.