Ajouter un agent à votre site web sans créer d’interface de chat

Vous aimeriez parfois avoir sur votre site web une fenêtre « Posez-nous toutes vos questions ». La construire vous-même demande beaucoup de travail. Il faut dessiner l’écran de chat, afficher la réponse au fur et à mesure qu’elle est rédigée, l’adapter aux écrans de téléphone et enregistrer les conversations. La fenêtre devient souvent un plus gros chantier que l’agent.

Embed on your site (intégrer à votre site), dans endue Live, réduit ce travail à une ligne de code. Enregistrez l’adresse de votre site dans Studio, collez dans votre site le code qu’il vous donne, et c’est terminé. L’agent qui répond dans la fenêtre est celui que vous avez créé dans Studio.

La fenêtre qui s’ouvre sur votre site est le même écran de chat que sur endue.live. Pour vous en faire une idée, dites d’abord bonjour à Tin sur endue.live/@tin.

Ce guide prend pour exemple le site web d’une boulangerie de quartier fictive, Haru Bakery. Son propriétaire a déjà créé un agent qui connaît les horaires d’ouverture, les pains du jour et la marche à suivre pour commander un gâteau.

Ce que voient les visiteurs

Une fois le code en place, un bouton apparaît dans un coin du site. Vous choisissez son texte et son apparence.

Un clic sur le bouton ouvre la fenêtre sur place. Les visiteurs posent leur question sans quitter la page, et la réponse s’affiche au fur et à mesure qu’elle est rédigée. Sur un téléphone, la fenêtre occupe tout l’écran.

La conversation se poursuit quand un visiteur passe à une autre page. Il peut poser une question en regardant la carte, aller sur la page de commande, rouvrir la fenêtre et constater que la conversation est toujours là.

Comment l’ajouter

1. Activer Live

L’intégration repose sur endue Live. Activez d’abord Publish on endue.live dans le panneau Live de Studio. Si vous découvrez Live, commencez par Mettre votre agent au service de nombreuses personnes avec endue Live.

2. Enregistrer l’adresse de votre site

Dans la ligne Embed on your site du panneau Live, cliquez sur Set up. Activez Turn on for sites, puis ajoutez l’adresse de votre site sous Allowed sites (les sites autorisés).

• Seuls les sites dont l’adresse commence par https peuvent être ajoutés.
• Pour couvrir www et les autres sous-domaines, ajoutez une entrée supplémentaire de la forme *.domain. La deuxième ligne de l’écran ci-dessus en est un exemple.
• Vous pouvez ajouter jusqu’à dix sites.
• Pour tester sur votre propre ordinateur avant la mise en ligne, ajoutez localhost.

3. Coller le code

Copiez Code to paste (le code à coller), en bas de l’écran, et collez-le juste avant </body> sur votre site.

<script src="https://endue.live/embed/v1.js" data-agent="haru-bakery" async></script>

La valeur qui suit data-agent est l’identifiant (handle) de votre agent. Studio la remplit pour vous : copiez la ligne telle quelle. Si vous utilisez un créateur de sites, collez-la dans le champ qui accepte votre propre code. Il porte généralement un nom du type « Code personnalisé » ou « Intégration HTML ».

4. Choisir l’apparence

Sur le même écran, choisissez la position du bouton, son icône, son texte, et si la fenêtre est claire ou sombre. Basculez l’aperçu, à droite, entre ordinateur et téléphone pour vérifier les deux. La couleur d’accent, le message de bienvenue et les amorces de conversation sont partagés avec Customize page.

Cliquez sur Save : votre site applique la modification dans la minute. Si vous changez le texte ou la couleur plus tard, vous n’avez pas besoin de coller le code à nouveau.

Placer la fenêtre là où elle est utile

Deux placements sont possibles.

Floating button (bouton flottant) reste dans un coin de l’écran et s’ouvre depuis n’importe quelle page. Ce placement convient si vous voulez un point d’aide pour tout le site. Collez le code une seule fois, à un endroit inclus dans toutes les pages.

Inside the page (dans la page) place la fenêtre directement à un endroit fixe d’une page, sans bouton. Ce placement convient aux endroits où les visiteurs viennent poser des questions, comme une page de contact ou à côté de votre FAQ. Quand vous passez le placement sur « Inside the page », le code passe à deux lignes.

<div data-endue-live="haru-bakery" style="height:600px"></div>
<script src="https://endue.live/embed/v1.js" data-agent="haru-bakery" async></script>

Placez le <div> là où la fenêtre doit apparaître et le <script> juste avant </body>. La valeur height définit la hauteur de la fenêtre. Voici la page de contact de Haru Bakery, avec les questions fréquentes à gauche et la fenêtre à droite.

Vous pouvez aussi placer un agent différent sur chaque page. Un agent qui aide à passer commande va sur la page de commande, et un autre qui présente les postes ouverts va sur la page de recrutement. Activez Live et enregistrez le site pour chaque agent, puis collez le code de chaque agent dans sa page.

Elle ne s’ouvre que sur votre site

Tout le monde peut lire le code que vous avez collé. Et si quelqu’un le copie dans son propre site ? Il ne se passe rien. La fenêtre ne s’ouvre que sur les sites enregistrés par le propriétaire, et sur tout autre site, le bouton n’apparaît même pas.

Dans une conversation de visiteur, l’agent a exactement les mêmes possibilités que sur endue.live. Les actions qui demandent une approbation ne s’exécutent pas, et la mémoire personnelle du propriétaire ne peut pas être lue. Le nombre de messages qu’une personne peut envoyer par minute est lui aussi limité. L’utilisation est prélevée sur le quota du forfait du propriétaire.

Où regarder ensuite

Les conversations venues de votre site sont elles aussi rassemblées sous Live visitors, dans la liste de conversations de l’agent. Lisez ce que demandent les clients, puis intégrez les questions fréquentes aux instructions et aux amorces de conversation. Pour connaître le niveau d’utilisation, consultez la ligne Live de l’onglet Usage dans Studio.

Si la fenêtre ne s’affiche pas

• Vérifiez que l’adresse correspond à celle que vous avez enregistrée. Si vous avez enregistré seulement haru-bakery.example et que le site s’ouvre en www.haru-bakery.example, la fenêtre n’apparaîtra pas. Ajoutez *.haru-bakery.example.
• Vérifiez que les deux interrupteurs sont activés. Il s’agit de « Publish on endue.live » dans le panneau Live et de « Turn on for sites » dans Embed on your site.
• Vérifiez que vous avez enregistré. Enregistrez, attendez environ une minute, puis rechargez la page.
• Ouvrez la console du navigateur. La raison pour laquelle la fenêtre n’a pas pu s’afficher y est consignée sur une ligne qui commence par [endue Live].
• Si votre site a une CSP, dépliez « If your site has a CSP » sur l’écran de réglages. Ajoutez à la politique de votre site les trois lignes qui s’y affichent.
• Ne placez pas vous-même une adresse endue.live dans un iframe. Les pages endue.live ne se chargent pas dans un cadre sur un autre site. Utilisez le code ci-dessus.

Pour commencer

Coller une ligne de code prend quelques minutes. Consacrez le temps gagné à ce que votre agent dit aux clients, et à la manière dont il le dit.

• Voyez d’abord à quoi ressemble la fenêtre : endue.live/@tin
• Vous découvrez Live : Mettre votre agent au service de nombreuses personnes avec endue Live