Chatbot

Une organisation peut intégrer un chatbot Keural à son site web. Lorsqu'un visiteur clique sur le bouton situé dans un coin de l'écran, une fenêtre de chat s'ouvre. Collez sur votre site le code d'installation créé dans l'écran d'administration.

Créer un chatbotCopier le lien vers la section

1. Un propriétaire ou un administrateur de l'organisation clique sur Ajouter un chatbot dans Gestion de l'organisation → Chatbots.
2. Saisissez un nom de chatbot et un domaine de base (par exemple, https://example.com), puis enregistrez.
3. Ouvrez le chatbot et configurez les trois onglets.

4. Collez le code d'installation dans votre site web.

Code d'installationCopier le lien vers la section

Dans l'onglet Jeton et installation, copiez le code HTML ou Next.js. Le code se compose de deux parties.

• Chargeur : il crée la fonction Keural, puis, une fois la page entièrement chargée, charge de façon asynchrone le script du chatbot (/plugin/keural-widget@1.0.1.js). Les commandes appelées avant le chargement du script sont mises en file d'attente et exécutées dans l'ordre.
• Commande de démarrage : Keural('boot', { token: '…' }). Le jeton commence par wgt_.

La version du script est fixée dans l'adresse. Lorsqu'une nouvelle version sort, copiez à nouveau le code d'installation et remplacez l'ancien. Si vous collez le code d'installation deux fois sur la même page, la seconde occurrence est ignorée et une erreur est consignée dans la console.

<script id="keural-one-script">
  /* Code copié depuis l'onglet Jeton et installation */
</script>

Dans Next.js, insérez-le avec <Script id="keural-one-script" strategy="afterInteractive"> de next/script. Pour l'afficher sur toutes les pages, placez-le dans le layout racine.

Options de démarrageCopier le lien vers la section

Les valeurs transmises à boot sont prioritaires sur les paramètres de l'écran d'administration. Utilisez-les lorsque vous voulez changer l'apparence page par page.

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

Les valeurs par défaut d'un nouveau chatbot sont : en-tête affiché et étendu, couleur de l'en-tête et du bouton #495BD8, à droite, décalage de 30 px, thème system.

Contrôle de la pageCopier le lien vers la section

Les méthodes comme Keural.open() ne fonctionnent qu'une fois le script entièrement chargé. Si vous les appelez juste après le chargement de la page, utilisez la forme fonction Keural('open'), qui s'exécute dans l'ordre.

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

Vous pouvez aussi masquer le bouton par défaut (button.visible: false) et ouvrir le chatbot depuis un bouton de votre propre page.

Taille de l'écranCopier le lien vers la section

La fenêtre du chatbot mesure 390×800 px. Si la largeur de l'écran est de 480 px ou moins, elle s'ouvre en plein écran. Le bouton d'agrandissement de l'en-tête permet d'agrandir la fenêtre.

Domaines d'affichageCopier le lien vers la section

• Le chatbot s'ouvre sur les pages dont l'hôte est identique au domaine de base. L'hôte est comparé avec son port, sans tenir compte de la casse. Une adresse avec www. et un sous-domaine sont considérés comme des hôtes différents. Pour tester sur un serveur de développement, créez un chatbot distinct dont le domaine de base est cette adresse.
• Le domaine de base ne peut pas être modifié après sa création. Pour le changer, créez un nouveau chatbot.
• Si la liste des domaines autorisés dans Avancé est vide, le chatbot s'ouvre sur toutes les pages du domaine de base. Si vous ajoutez des domaines autorisés, il ne s'ouvre que sur les pages commençant par ces adresses. Si vous indiquez un chemin, comme https://example.com/help, l'ouverture est limitée aux pages situées sous ce chemin. Les domaines autorisés commencent par http:// ou https://, et vous pouvez en saisir 5 au maximum.
• Le jeton du code d'installation est visible sur la page. Ne reliez au chatbot que du contenu que vous pouvez rendre public.

Politique de sécurité du contenu (CSP)Copier le lien vers la section

Si votre site applique une Content-Security-Policy, autorisez les éléments suivants. Les adresses sont celles de keural.ai.