Le widget de chat web est une bulle de discussion que vous déposez sur n’importe quelle page web à l’aide d’une seule balise <script>. Les visiteurs discutent avec votre IA ; lorsqu’une personne prend le relais, ses réponses apparaissent dans la même bulle — en direct.
wk_…) qui achemine chaque conversation vers votre desk. Utilisez-y Copy snippet (copier l’extrait), et Preview widget (aperçu du widget) pour le voir avant qu’il n’approche votre site. Voir les Settings.L’ajouter à votre site
Collez l’extrait juste avant votre balise fermante </body> :
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here"></script>Le widget se charge dans son propre cadre : il n’entrera donc pas en conflit avec les styles ou les scripts de votre site.
Options
| Attribut | Ce qu’il fait |
|---|---|
data-key |
Obligatoire. La clé de widget de votre desk, prise dans les Settings. |
data-position |
right (par défaut) ou left — le coin dans lequel se place la bulle. |
data-offset |
Distance en pixels depuis le coin (20 par défaut). |
data-lang |
Fixe la langue du widget, par exemple ja. Omettez-le et chaque visiteur voit la langue de son propre navigateur. |
Si votre page affiche un badge reCAPTCHA dans le même coin, le widget se place automatiquement au-dessus pour que les deux ne se chevauchent pas.
La langue que parle le widget
Si vous n’y touchez pas, le widget suit la langue du navigateur de chaque visiteur. Un visiteur japonais sur un site anglais obtient la bulle en japonais ; il n’y a rien à configurer, et deux visiteurs d’une même page peuvent voir deux langues différentes.
Pour fixer une seule langue à la place — un site qui s’adresse à un seul marché quel que soit son lecteur —, ajoutez data-lang :
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here" data-lang="ja"></script>Traduit en 11 langues : l’anglais, le japonais, le coréen, le chinois (simplifié et traditionnel), l’espagnol, le français, l’allemand, le portugais, l’arabe et le russe. L’arabe s’affiche de droite à gauche, et le chinois suit l’écriture du visiteur : traditionnel pour Taïwan, Hong Kong et Macao, simplifié dans les autres cas. Toute autre langue revient à l’anglais plutôt que d’afficher une bulle à moitié traduite : data-lang="it" vous donne donc de l’anglais.
data-lang. La réponse de l’IA suit la langue dans laquelle le client écrit. Et l’IA ne peut répondre qu’à partir des articles de la base de connaissances rédigés dans cette langue — un article en anglais ne répondra pas à une question en japonais. Si vous servez vos clients en deux langues, rédigez vos articles dans les deux. Voir votre base de connaissances.Il en va de même pour le formulaire web hébergé : ajoutez ?lang=ja à son adresse pour fixer la langue, ou omettez-le pour suivre le visiteur.
La couleur de votre marque
Tant que vous n’en choisissez pas, le chat utilise notre turquoise. Choisissez votre propre couleur : elle s’applique à l’en-tête du chat, à ses boutons et aux messages de votre client, au bouton de fermeture (✕) du lanceur pendant que le chat est ouvert, ainsi qu’à votre formulaire web hébergé.
- Ouvrez les Settings de votre desk. Dans la section Web chat, repérez Brand colour (couleur de marque), juste sous Chat bubble icon (icône de la bulle de chat).
- Choisissez une couleur et cliquez sur Save colour (enregistrer la couleur).
- Vous avez changé d’avis ? Reset to default (rétablir la valeur par défaut) remet notre turquoise.
Votre couleur arrive sur votre site en 5 minutes environ, et il n’y a rien à recoller. Comme pour l’icône, seuls les administrateurs du desk et son propriétaire peuvent la changer.
Utiliser votre propre icône de bulle
Par défaut, le lanceur affiché sur votre site est notre bulle turquoise ornée d’une icône de phylactère (💬). Vous pouvez la remplacer par votre propre PNG afin que le widget paraisse appartenir à votre site. L’image que vous téléversez devient le bouton tout entier : elle remplit l’intégralité du lanceur de 56 pixels, et nous ne dessinons plus notre cercle turquoise derrière elle.
- Ouvrez les Settings de votre desk. Allez dans la section Web chat et repérez Chat bubble icon (icône de la bulle de chat).
- Cliquez sur Upload PNG (téléverser un PNG) et choisissez votre fichier. La bulle d’aperçu à côté du bouton montre exactement l’allure qu’aura le lanceur.
- Vous avez changé d’avis ? Reset to default (rétablir la valeur par défaut) remet notre icône de phylactère.
| Image | Ce qui fonctionne |
|---|---|
| Format | PNG |
| Taille recommandée | Carrée, au moins 112×112 pixels |
| Taille d’affichage | Remplit tout le lanceur, 56×56 pixels |
| Forme | Définie par l’image elle-même — un fond transparent est vivement recommandé |
| Poids du fichier | 256 KB maximum |
Le lanceur est dessiné en 56×56 pixels : une source en 112×112 (ou davantage) garde donc votre marque nette sur les écrans haute résolution. Une ombre discrète est ajoutée pour vous et épouse le contour de votre visuel ; inutile d’en incorporer une dans le PNG.
L’icône du lanceur est une image : la couleur de votre marque ne la repeint donc pas — c’est l’icône que vous téléversez que voient les visiteurs. Puisque notre cercle n’est plus dessiné derrière votre image, un PNG transparent fait que la couleur vue par les visiteurs est celle de votre propre visuel.
Ce que voit le visiteur
- Il ouvre la bulle et laisse un nom, une adresse e-mail et un premier message.
- L’IA répond à partir de vos connaissances, sources à l’appui, directement dans la conversation — sans attendre quiconque dans votre équipe.
- Une personne peut prendre le relais — sa réponse apparaît dans la même conversation en quelques secondes.
L’adresse e-mail qu’il laisse est ce qui permet de le reconnaître la fois suivante — voir votre fichier clients.
data-key partout où l’extrait est collé, ainsi que partout où votre formulaire l’envoie.Le chat web est l’une des cinq portes d’entrée — voir comment vos clients vous joignent, et le fonctionnement d’un ticket une fois la conversation entamée.