Keural Kit

Keural Kit coloca pantallas de Keural en su página con un único script. Las pantallas se dibujan dentro de un Shadow DOM, por lo que no se mezclan con el CSS de su página. Kit se actualiza al desplegar la aplicación web de Keural. Si después de un despliegue sigue apareciendo una pantalla antigua, borre la caché del navegador y de la CDN, y compruebe la fecha de compilación con window.KeuralKit.__build.

CargaCopiar enlace de la sección

Kit se carga desde la dirección web del entorno de Keural que utilice. Para keural.ai es https://keural.ai; para un entorno on-premises o dedicado, use la dirección web de Keural de ese entorno. Antes de cargar el script, establezca en window.__KEURAL_ENV__ las direcciones de servidor que llamará Kit. Las tres direcciones deben pertenecer al mismo entorno; obténgalas de su contacto de Keural durante la adopción.

<script>
  window.__KEURAL_ENV__ = {
    NEXT_PUBLIC_API_BASE_URL: '<KEURAL_API_URL>',
    NEXT_PUBLIC_FAST_API_BASE_URL: '<KEURAL_AGENT_URL>',
    NEXT_PUBLIC_MODE: 'prd',
  };
</script>
<script src="<KEURAL_WEB_URL>/plugin/kit/keural.js" async></script>

Si usa el mismo Kit en un segundo dominio, incluya también NEXT_PUBLIC_ADDITIONAL_FRONTEND_URL, NEXT_PUBLIC_ADDITIONAL_API_BASE_URL y NEXT_PUBLIC_ADDITIONAL_FAST_API_BASE_URL. Si falta cualquiera de los tres, se produce un error. Los valores son direcciones https:// sin ruta.

Cuando el script termina de cargarse, se crea window.KeuralKit. En SPA como React, use un cargador para que el script se cargue una sola vez.

export function loadKeuralKit(src = '<KEURAL_WEB_URL>/plugin/kit/keural.js') {
  if (window.KeuralKit) return Promise.resolve(window.KeuralKit);
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onload = () => resolve(window.KeuralKit);
    s.onerror = () => {
      s.remove();
      reject(new Error('Keural Kit failed to load'));
    };
    document.head.appendChild(s);
  });
}

Montar el chatCopiar enlace de la sección

const el = document.getElementById('keural-chat')!;

window.KeuralKit.mountChat(el, {
  userInfo: { userId: user.id, name: user.name },
  colorMode: 'light',
  initialData: { message: 'Resume las ventas de este trimestre', room_name: 'Informe trimestral' },
  onSessionCreated: (roomId) => router.push(`/c/${roomId}`),
  onError: () => router.push('/'),
});

// Al salir de la pantalla
window.KeuralKit.unmount(el);

• Para abrir una conversación existente, coloque su ID en sessionId.
• initialData solo se incluye al abrir una conversación nueva. Si lo incluye al abrir una conversación existente, el mismo mensaje se enviará de nuevo.
• Si falta userInfo.userId, se trata como un usuario sin sesión iniciada. Monte el componente cuando la información de inicio de sesión esté lista.

MétodosCopiar enlace de la sección

Los métodos mount* y update* reciben colorMode y userInfo, y unmount(el) solo recibe el elemento. update* vuelve a dibujar con las nuevas opciones el mismo elemento. Para abrir y cerrar la ventana, cambie el valor de open y llame a update*. Si vuelve a llamar a mount* sobre el mismo elemento, se reutiliza la pantalla existente.

Opciones de mountChatCopiar enlace de la sección

initialDataCopiar enlace de la sección

Idioma de la pantallaCopiar enlace de la sección

La pantalla de Kit se muestra en coreano.

Configuración e inicio de sesiónCopiar enlace de la sección

• Los ajustes de usuario se cambian en la aplicación web o en la app de Keural, y la pantalla de Kit sigue esos ajustes.
• El inicio de sesión lo gestiona su servicio, y a Kit solo se le pasa la información del usuario que ha iniciado sesión.