Installer sur un site web

Lorsque les Réponses IA sont activées pour l’App, le chat identifie les réponses de l’IA et propose « Parler à un membre ». Aucun paramètre SDK ni secret IA supplémentaire n’est nécessaire. Les clés du fournisseur restent sur le serveur.

Le code d’installation ajoute le chat à n’importe quel site, quelle que soit sa technologie. Il ne change jamais : les mises à jour du chat et vos changements d’apparence arrivent sans y toucher.

1. Saisir votre domaine

Le chat ne s’affiche que sur le domaine de votre App. localhost est toujours autorisé : vous testez sur votre ordinateur sans rien régler.

1. Ouvrez Paramètres de l’App > Développeurs > Domaine, apps et pages.
2. Dans « Domaine », saisissez le domaine de votre site, par exemple kibomarket.com, puis enregistrez.
3. Il couvre aussi www.kibomarket.com. Un autre sous-domaine, comme shop.kibomarket.com, est un autre site : il lui faut sa propre App.

Sur un autre domaine, le chat reste caché et la console du navigateur dit pourquoi. Toutes les règles : Saisir le domaine de votre site.

2. Coller le code

Copiez le code d’installation et collez-le juste avant la balise </body>, sur chaque page. Gardez les deux balises script ensemble, dans cet ordre.

<script>  window.zean = { appKey: "app_your_app_key" };</script><script async src="https://widget.zean.chat/loader.js"></script>

Ouvrez votre site sur votre ordinateur : le bouton du chat apparaît en bas de la page.

Piloter le chat depuis votre page

Tant que le Contact a des réponses à lire, le titre de votre onglet affiche leur nombre et son icône un point rouge. Pour le désactiver, ajoutez tabAlert: false à window.zean. Voir Afficher le nombre de messages non lus.

Une fois le code chargé, window.zean donne les méthodes du chat :

window.zean.open();   // ouvre le chatwindow.zean.close();  // le fermewindow.zean.toggle(); // passe de l’un à l’autre// Le nombre de réponses que le Contact n’a pas luesconst count = window.zean.getUnreadCount();// Appelée à chaque changement de ce nombreconst stop = window.zean.onUnreadChange(count => {  document.querySelector("#help-badge").textContent = count > 0 ? String(count) : "";});

Avant le chargement du chat, window.zean ne contient que vos réglages : appelez ces méthodes une fois la page chargée, par exemple après un clic, ou passez par le paquet @zean-chat/js, qui met les appels en attente. Voir Référence du site web et de @zean-chat/js.

Choisir la langue

Le chat suit la langue du navigateur du Contact, ou la langue par défaut de votre App s’il ne la parle pas. Ajoutez locale, "fr" ou "en", pour la choisir :

<script>  window.zean = { appKey: "app_your_app_key", locale: "fr" };</script><script async src="https://widget.zean.chat/loader.js"></script>

Sites d’une seule page

Sur un site qui change de page sans recharger, collez le code une fois, dans la page qui sert toutes les autres. Le chat reste ouvert d’une page à l’autre. Avec React ou Vue, préférez le SDK de votre framework.

Avant la production

Dans Paramètres de l’App > Développeurs > Démarrage, votre site est en mode Développement ou Production. Le mode ne change que les étapes affichées : même clé d’App, même boîte de réception, rien à changer dans votre code. En production, le chat fonctionne toujours sur localhost.

• Domaine (obligatoire) : saisissez le domaine de votre site dans Paramètres de l’App > Développeurs > Domaine, apps et pages.
• Chat vu sur le domaine (obligatoire) : ouvrez votre site en ligne, pas sur localhost. La première fois que le chat s’y affiche, le site passe en Production tout seul.
• Webhook (facultatif, si vous en utilisez un) : saisissez l’adresse de votre serveur dans Paramètres de l’App > Développeurs > Webhook, puis vérifiez un premier envoi réussi. Voir Recevoir les événements par webhook.

Ensuite

• Identifier les personnes connectées.
• Envoyer des attributs sur le Contact.
• Choisir la langue du chat.