Chatbot

Una organización puede añadir un chatbot de Keural a su sitio web. Cuando un visitante hace clic en el botón de una esquina de la pantalla, se abre una ventana de chat. Se instala pegando en su sitio el código de instalación creado en la pantalla de administración.

Crear un chatbotCopiar enlace de la sección

1. Un propietario o administrador de la organización hace clic en ＋ Añadir chatbot en Gestión de la organización → Chatbots.
2. Introduzca un nombre de chatbot y un dominio base (por ejemplo, https://example.com) y regístrelo.
3. Abra el chatbot y configure tres pestañas.

4. Pegue el código de instalación en su sitio web.

Código de instalaciónCopiar enlace de la sección

En la pestaña Token e instalación, copie el código para HTML o para Next.js. El código tiene dos partes.

• Cargador: crea la función Keural y, cuando termina de cargarse la página, carga de forma asíncrona el script del chatbot (/plugin/keural-widget@1.0.1.js). Los comandos que se llamen antes de que llegue el script se acumulan en una cola y se ejecutan en orden.
• Comando de inicio: Keural('boot', { token: '…' }). El token empieza por wgt_.

La versión del script está fijada en la dirección. Cuando salga una versión nueva, copie de nuevo el código de instalación y reemplácelo. Si pega el código de instalación dos veces en la misma página, la segunda copia se ignora y se registra un error en la consola.

<script id="keural-one-script">
  /* Código copiado de la pestaña Token e instalación */
</script>

En Next.js, colóquelo con <Script id="keural-one-script" strategy="afterInteractive"> de next/script. Para mostrarlo en todas las páginas, colóquelo en el layout raíz.

Opciones de inicioCopiar enlace de la sección

Los valores que pase a boot tienen prioridad sobre la configuración de la pantalla de administración. Úselos para cambiar el aspecto por página.

Keural('boot', {
  token: 'wgt_…',
  theme: 'system',
  header: { enabled: true, extended: true, draggable: true, title: 'Soporte al cliente', color: '#495BD8' },
  button: { visible: true, iconUrl: 'https://example.com/icon.png', color: '#495BD8', position: 'right', offsetX: 30, offsetY: 30 },
});

Los valores predeterminados de un chatbot nuevo son: encabezado visible y expandido, color del encabezado y del botón #495BD8, a la derecha, desplazamiento de 30 px, tema system.

Control desde la páginaCopiar enlace de la sección

Los métodos como Keural.open() solo funcionan después de cargar el script. Si los llama justo al cargar la página, use la forma de función Keural('open'), que se ejecuta en orden.

<button onclick="Keural('open')">Consultar</button>

También puede ocultar el botón predeterminado (button.visible: false) y abrir el chatbot desde un botón de su página.

Tamaño de la pantallaCopiar enlace de la sección

La ventana del chatbot mide 390×800 px y, si el ancho de la pantalla es de 480 px o menos, se abre a pantalla completa. Amplíe la ventana con el botón de vista ampliada del encabezado.

Dominios de visualizaciónCopiar enlace de la sección

• El chatbot se abre en páginas cuyo host coincide con el dominio base. El host se compara incluyendo el puerto, sin distinguir mayúsculas de minúsculas. Una dirección con www. y un subdominio son hosts distintos. Para probar en un servidor de desarrollo, cree otro chatbot con esa dirección como dominio base.
• El dominio base no se puede cambiar después de crearlo. Para cambiarlo, cree un chatbot nuevo.
• Si deja vacíos los dominios permitidos de Avanzado, el chatbot se abre en todas las páginas del dominio base. Si añade dominios permitidos, solo se abre en las páginas que empiezan por esas direcciones. Si incluye la ruta, como https://example.com/help, se limita a las páginas bajo esa ruta. Los dominios permitidos empiezan por http:// o https://, y puede añadir hasta 5.
• El token del código de instalación queda visible en la página. Conecte al chatbot solo contenido que pueda hacerse público.

Política de seguridad de contenido (CSP)Copiar enlace de la sección

Si su sitio aplica Content-Security-Policy, permita lo siguiente. Las direcciones son según keural.ai.