Intégrer le chatbot sur un site

Copier le code de la bulle de chat, régler sa position et son libellé, et ajouter des boutons d'action

À quoi ça sert

Un chatbot public est accessible de deux façons : par son adresse, que vous partagez telle quelle, ou par une bulle de chat posée en bas d'écran sur votre propre site. La bulle ouvre la fenêtre de conversation sans quitter la page.

L'onglet « Intégration » fournit le code à coller sur votre site, règle l'apparence de la bulle et montre un aperçu du résultat sur une page fictive.

Cette page couvre aussi les boutons d'action : des boutons cliquables insérés dans le fil de la conversation après un nombre de réponses que vous choisissez.

L'onglet « Intégration » n'est proposé que pour les chatbots publics et n'est visible que pour les administrateurs du module.

Concepts clés

Bulle de chat — le bouton rond affiché en bas de vos pages. Un clic ouvre la fenêtre du chatbot, un second la referme.
Code d'intégration — une ligne à coller sur votre site, qui charge la bulle. Elle désigne le chatbot par son organisation et son slug.
Position — le côté où la bulle se place : « Bas droite » ou « Bas gauche ».
CTA — un bouton d'action affiché dans la conversation, avec un texte et une adresse, après la Nième réponse du chatbot.

Comment faire

Régler l'apparence de la bulle

Dans le menu, ouvrez « Chatbot », puis la page « Administration » du module.
Cliquez sur le chatbot, puis ouvrez l'onglet « Intégration ».
Dans « Apparence de la bulle », choisissez la « Position » : « Bas droite » ou « Bas gauche ».
Choisissez une « Icône » dans le sélecteur, ou laissez l'icône par défaut.
Renseignez le « Texte du bouton (accessibilité) », par exemple « Ouvrir le chat ». Il est lu par les lecteurs d'écran et sert d'infobulle.
Cliquez sur « Enregistrer ».

Le message « Apparence de la bulle mise à jour » s'affiche et l'aperçu se recharge.

Copier le code et l'installer sur votre site

Ouvrez l'onglet « Intégration » d'un chatbot publié.
Sous « Code d'intégration », cliquez sur « Copier le code ». Le message « Code copié dans le presse-papiers » s'affiche.
Collez la ligne obtenue sur votre site, juste avant la balise </body>, sur toutes les pages où la bulle doit apparaître.

Le code copié a cette forme : <script src="https://…/embedded-chatbot.js" data-chatbot-slug="mon-organisation/mon-chatbot" async></script>

La bulle apparaît sur vos pages dès que le code est en ligne. Il n'y a rien à recopier après un changement de couleurs, de position ou d'icône : la bulle relit ces réglages toute seule.

Vérifier le rendu avant la mise en ligne

L'onglet « Intégration » affiche, sous « Aperçu », une page de démonstration avec la bulle telle qu'elle apparaîtra. Cliquez dessus pour ouvrir la fenêtre de chat et poser une question.

Ajouter un bouton d'action dans la conversation

Ouvrez l'onglet « Paramètres » du chatbot.
Descendez à la section « Call-to-Action (CTA) » et activez « Activer les CTA dans les messages ».
Cliquez sur « Ajouter un CTA ».
Renseignez le « Texte du bouton », l'adresse (https://...) et le rang de la réponse après laquelle le bouton s'affiche.
Cliquez sur « Enregistrer ».

Le bouton apparaît dans la conversation juste après la réponse du rang indiqué, et ouvre l'adresse dans un nouvel onglet.

Partager l'adresse du chatbot sans l'intégrer

Dans le menu, ouvrez « Chatbot ».
Cliquez sur la carte du chatbot publié : l'encadré « URL publique » affiche son adresse.
Cliquez sur l'icône de copie, ou sur l'icône de lien externe pour l'ouvrir dans un nouvel onglet.

L'en-tête de la page « Chatbots » affiche par ailleurs l'adresse de la liste publique, qui regroupe tous les chatbots publiés et non internes de l'organisation.

Référence

Conditions à remplir

Condition	Sinon
Le slug de l'organisation est renseigné	L'onglet affiche « Organisation non configurée. Configure le slug de l'organisation pour activer l'intégration. »
Le chatbot est publié	Le bandeau « Chatbot non publié » s'affiche et le bouton « Copier le code » reste inactif
Le chatbot n'est pas interne	L'onglet « Intégration » n'existe pas

Le slug de l'organisation se règle dans la page « Administration » du module. Voir Configurer le module Chatbot.

Réglages de la bulle

Réglage	Valeurs	Valeur par défaut
Position	Bas droite, Bas gauche	Bas droite
Icône	Une icône de la bibliothèque	Icône de bulle de discussion
Texte du bouton (accessibilité)	Texte libre	« Ouvrir le chat »

Les couleurs de la bulle ne se règlent pas ici : elles viennent du style du chatbot. Voir Personnaliser l'apparence du chatbot.

Comportement de la bulle sur votre site

Le bouton se place à 20 pixels du bas et du côté choisi, au-dessus du contenu de la page.
La fenêtre de chat s'ouvre au-dessus du bouton, en 380 × 600 pixels, réduite si la fenêtre du navigateur est plus petite.
En dessous de 480 pixels de large, la fenêtre occupe tout l'écran.
L'icône du bouton devient une croix quand la fenêtre est ouverte.
La conversation ne démarre qu'au premier clic sur la bulle.
Un changement d'apparence peut mettre jusqu'à une minute à se propager sur les pages déjà en ligne.

Champs d'un bouton d'action

Champ	Contraintes
Texte du bouton	Obligatoire
Adresse	Adresse web valide, sinon « URL invalide »
Après le Nème message	Entier à partir de 1

Deux boutons ne peuvent pas viser la même réponse : « Ce numéro de message est déjà utilisé par un autre CTA ».

Les boutons d'action se comptent sur les réponses du chatbot, pas sur les messages du visiteur, et n'apparaissent qu'une fois la réponse terminée.