Keural Kit

Keural Kit place des écrans Keural dans votre page à l'aide d'un script unique. Les écrans sont dessinés dans un Shadow DOM, ils ne se mélangent donc pas au CSS de votre page. Kit est mis à jour lors du déploiement de la version web de Keural. Si un ancien écran s'affiche encore après un déploiement, videz le cache du navigateur et du CDN, puis vérifiez la date de build avec window.KeuralKit.__build.

ChargementCopier le lien vers la section

Kit se charge depuis l'adresse web de l'environnement Keural que vous utilisez. Pour keural.ai, il s'agit de https://keural.ai ; pour un environnement sur site ou dédié, utilisez l'adresse web Keural de cet environnement. Avant d'ajouter le script, renseignez dans window.__KEURAL_ENV__ les adresses des serveurs que Kit appellera. Les trois adresses doivent appartenir au même environnement ; obtenez-les auprès de votre contact Keural lors de la mise en place.

<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 vous utilisez le même Kit sur un second domaine, renseignez les trois valeurs NEXT_PUBLIC_ADDITIONAL_FRONTEND_URL, NEXT_PUBLIC_ADDITIONAL_API_BASE_URL et NEXT_PUBLIC_ADDITIONAL_FAST_API_BASE_URL. Si l'une de ces trois valeurs manque, une erreur se produit. Les valeurs sont des adresses https:// sans chemin.

Une fois le script chargé, window.KeuralKit est créé. Dans les SPA comme React, utilisez un chargeur afin que le script ne soit ajouté qu'une seule fois.

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);
  });
}

Intégrer le chatCopier le lien vers la section

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

window.KeuralKit.mountChat(el, {
  userInfo: { userId: user.id, name: user.name },
  colorMode: 'light',
  initialData: { message: 'Résume le chiffre d’affaires de ce trimestre', room_name: 'Rapport trimestriel' },
  onSessionCreated: (roomId) => router.push(`/c/${roomId}`),
  onError: () => router.push('/'),
});

// En quittant l'écran
window.KeuralKit.unmount(el);

• Pour ouvrir une conversation existante, indiquez son ID dans sessionId.
• N'incluez initialData que lors de l'ouverture d'une nouvelle conversation. Si vous l'incluez lors de l'ouverture d'une conversation existante, le même message sera envoyé à nouveau.
• Si userInfo.userId est absent, l'utilisateur est traité comme non connecté. Montez le composant une fois les informations de connexion prêtes.

MéthodesCopier le lien vers la section

Les méthodes mount* et update* reçoivent colorMode et userInfo ensemble, et unmount(el) ne reçoit que l'élément. update* redessine les options sur le même élément. Pour ouvrir ou fermer la fenêtre, modifiez la valeur de open puis appelez update*. Si vous appelez de nouveau mount* sur le même élément, l'écran existant est réutilisé.

Options de mountChatCopier le lien vers la section

initialDataCopier le lien vers la section

Langue de l'écranCopier le lien vers la section

L'écran de Kit s'affiche en coréen.

Paramètres et connexionCopier le lien vers la section

• Les réglages utilisateur se modifient dans l'application web ou l'application Keural. L'écran de Kit suit ces réglages.
• La connexion est gérée par votre service ; seules les informations de l'utilisateur connecté sont transmises à Kit.