Ajouter un widget de chat en direct à votre site web

Mis à jour le 4 nov. 20269 min de lecture

Français

Sur cette page

Le widget de chat en direct sur votre site web est le canal de support client le plus rapide que vous puissiez proposer. Un petit bouton de chat dans le coin inférieur ; les visiteurs cliquent, écrivent et reçoivent une réponse en temps réel. Avec le bot IA activé, les questions courantes obtiennent une réponse immédiate sans réveiller votre équipe ; quand le bot passe la main, les conversations complexes arrivent dans la boîte de réception de vos agents avec tout le contexte. La configuration tient en un court extrait de code : aucune compilation, aucun développeur nécessaire.

Le widget de chat en direct de Deskwoot permet aux visiteurs de votre site web de lancer des conversations directement depuis votre site. Il se charge vite, fonctionne parfaitement sur ordinateur et sur mobile, et vous pouvez le personnaliser aux couleurs de votre marque. Vous trouverez ci-dessous les étapes pour configurer le widget, des conseils pour en tirer le meilleur parti et des réponses aux questions courantes.

Allez dans Paramètres > Boîtes de réception > Ajouter une boîte de réception.
Choisissez Chat en direct comme canal, puis Chat en direct du site web.
Cliquez sur Créer la boîte de réception. Deskwoot crée la boîte de réception et ouvre ses paramètres.
Dans l'onglet Général, donnez à la boîte de réception un nom parlant (par exemple « Chat du site principal »). Votre équipe le voit dans le sélecteur de boîtes de réception, et les visiteurs le voient comme titre du chat.
Dans l'onglet Widget, configurez le widget :
- Réglez la Couleur du widget pour que le widget s'accorde avec le style de votre site web.
- Rédigez un Titre d'accueil et un Sous-titre d'accueil qui saluent les visiteurs quand ils ouvrent le chat.
- Choisissez la Position du widget : En bas à gauche ou En bas à droite.
Enregistrez chaque section que vous avez modifiée.

Une fois la boîte de réception créée, la carte Installation du widget de son onglet Widget affiche un extrait JavaScript avec le jeton de votre widget. Pour l'installer :

Copiez l'extrait de code fourni.
Collez-le dans la section <head> ou juste avant la balise de fermeture </body> de chaque page où le widget doit apparaître.
Si vous utilisez un gestionnaire de balises comme Google Tag Manager, ajoutez plutôt l'extrait sous forme de balise HTML personnalisé.

Après la mise en ligne, ouvrez votre site dans une fenêtre de navigation privée pour vérifier que le widget se charge bien.

L'adresse e-mail du visiteur

Un nouveau chat en direct du site web n'a aucune étape avant le chat : les visiteurs écrivent tout de suite. Quand Fynn répond au chat, il répond d'abord, puis demande une seule fois une adresse e-mail dans le chat, pour que votre équipe puisse encore répondre par e-mail une fois le visiteur parti. Le nom est facultatif. Si vous voulez l'adresse avant le premier message, activez Demander l'e-mail avant le chat dans l'onglet Widget de la boîte de réception, sous Préférences du canal. Pour demander d'abord un nom, un numéro de téléphone ou vos propres champs, configurez le formulaire dans l'onglet Formulaire avant le chat (forfait Startup et au-delà). Tant qu'il est activé, il remplace l'étape de l'e-mail. Sans bot IA sur la boîte de réception, personne ne pose la question dans le chat, donc les visiteurs restent anonymes, sauf si vous activez l'étape de l'e-mail. Les chats en direct que vous avez créés avant gardent leur réglage.

Personnalisez l'apparence du widget depuis les paramètres de votre boîte de réception. Vous pouvez modifier la couleur, la position, le titre d'accueil, le sous-titre et le message de bienvenue. Le widget s'adapte tout seul aux écrans mobiles, vous n'avez donc pas besoin d'une configuration à part pour le mobile.

Conseils pratiques

Gardez un message de bienvenue court. Une ou deux phrases sympathiques fonctionnent mieux qu'un long paragraphe.
Reprenez les couleurs de votre marque pour offrir une expérience cohérente aux visiteurs sur tout votre site.
Activez Demander l'e-mail avant le chat si aucun bot IA ne répond au chat et que votre équipe ne peut pas répondre tout de suite, pour pouvoir relancer par e-mail.
Testez sur plusieurs appareils après l'installation pour vérifier que le widget s'affiche et fonctionne bien dans les navigateurs sur ordinateur et sur mobile.

Dépannage

Le widget ne s'affiche pas : Vérifiez que l'extrait JavaScript est bien placé et qu'aucune extension du navigateur ni aucun bloqueur de publicité ne l'empêche de se charger. Videz votre cache et essayez une fenêtre de navigation privée.
Conflits de style : Si le CSS de votre site web modifie l'apparence du widget, cherchez des styles globaux qui pourraient écraser les éléments iframe ou les boutons.
Chargement lent : En plaçant l'extrait juste avant la balise de fermeture </body>, le widget se charge après votre contenu principal, ce qui limite l'impact sur la vitesse de la page.

Questions fréquentes

Le widget fonctionne-t-il avec tous les créateurs de sites ?

Oui. WordPress, Webflow, Shopify, Wix, Squarespace, HTML simple, Next.js, React, Vue : tout outil qui vous permet de coller une balise script. Google Tag Manager fonctionne aussi.

Les visiteurs ont-ils besoin d'un compte Deskwoot pour discuter ?

Non. Les visiteurs écrivent tout de suite. Dans un nouveau chat du site web auquel Fynn répond, il répond d'abord, puis demande une seule fois une adresse e-mail dans le chat. Si vous voulez l'adresse d'abord, activez Demander l'e-mail avant le chat, et un formulaire avant le chat (forfait Startup et au-delà) peut demander plus d'informations. Les conversations sont liées à un jeton de visiteur, donc le même visiteur garde son historique quand il passe d'une page à l'autre.

Que se passe-t-il quand aucun agent n'est en ligne ?

Les visiteurs peuvent quand même écrire, et leur message arrive dans Deskwoot comme une conversation normale. Si le chat a obtenu leur e-mail, par Fynn dans le chat ou par Demander l'e-mail avant le chat, vous pouvez les relancer même après leur départ. Avec les Heures d'ouverture (forfait Startup et au-delà), le widget affiche votre équipe comme Absent en dehors de vos horaires, et un visiteur qui lance un chat à ce moment-là reçoit votre message d'absence en réponse automatique. Si un bot IA répond dans la boîte de réception, il répond tout de suite et, en mode Bot de support, transmet la conversation à une personne quand c'est nécessaire.

Puis-je afficher le widget sur certaines pages et pas sur d'autres ?

Oui. Chargez l'extrait uniquement sur les pages qui doivent afficher le chat. Vous pouvez aussi activer Masquer le bouton du chat (section Bouton du chat de l'onglet Widget) et ouvrir le chat depuis votre propre bouton avec window.deskwoot.open(). Si vous utilisez un gestionnaire de balises, configurez un déclencheur qui ne s'active que sur les URL voulues. Pratique pour les pages d'atterrissage où le chat ne doit pas faire concurrence à un bouton d'appel à l'action.

Le widget suit-il les visiteurs avec des cookies ?

Le widget ne dépose aucun cookie. Pour un nouveau visiteur, il n'enregistre rien tant qu'il n'a pas ouvert le chat ou envoyé un message. Dès qu'il ouvre le chat, le widget le note dans le localStorage (la condition Visiteur récurrent des déclencheurs de chat le lit), et dès qu'il écrit, il y garde un identifiant de visiteur anonyme pour qu'il conserve son historique. Le Mode sans cookies (forfait Startup et au-delà) n'utilise pas non plus le localStorage ni le sessionStorage : le visiteur n'est alors reconnu que pendant la session de page en cours, et l'historique n'est pas conservé quand la page se recharge.

À quelle vitesse le widget se charge-t-il ?

Le script de chargement fait environ 8 KB compressé en gzip et se charge de façon asynchrone, il ne bloque donc pas votre page. Le chat lui-même tourne dans des cadres servis depuis deskwoot.com.

Puis-je personnaliser l'apparence ?

Couleur du widget, Position du widget (En bas à droite ou En bas à gauche), un Thème du widget clair ou sombre, Texte du bouton du chat, les textes d'accueil et Délai de réponse, tout se trouve dans Paramètres → Boîtes de réception → votre boîte de réception → Widget → Apparence du widget. Un avatar personnalisé se trouve dans Fonctionnalités, et le formulaire avant le chat a son propre onglet, Formulaire avant le chat.

Les visiteurs peuvent-ils envoyer des fichiers ?

Oui, quand Pièces jointes est activé (section Fonctionnalités de l'onglet Widget). Images, PDF, documents Office et autres types de fichiers courants jusqu'à 5 MB par fichier. Avec l'option Analyse antivirus ($5 par mois et par espace de travail), chaque fichier est vérifié pour détecter les logiciels malveillants avant que les agents puissent l'ouvrir.

Puis-je utiliser le widget sur un site multilingue ?

Oui. Avec Langue du widget réglée sur Automatique (selon la page), le widget suit la langue de votre page et change avec elle. Avec le forfait Business et au-delà, un clic traduit votre Titre d'accueil, votre Sous-titre et le Message d'accueil du canal dans d'autres langues, et « Hi! » devient « Hallo! » pour les visiteurs allemands.

Comment l'utilisation du widget est-elle facturée ?

Chaque conversation passée par le widget compte comme une conversation normale dans la limite mensuelle de votre forfait. Les réponses du bot IA et les actions de Copilot comptent une fois dans le quota d'IA, qui est séparé.

Puis-je voir qui navigue sur mon site en ce moment ?

Non, Deskwoot n'a pas de liste des visiteurs en direct. Pour saluer les visiteurs de façon proactive, utilisez les Déclencheurs de chat dans l'onglet Widget de la boîte de réception de chat en direct (temps sur la page, l'URL contient, visiteur récurrent).

Le widget fonctionne-t-il dans des iframes ?

Oui. Le widget fonctionne dans n'importe quelle page qui charge l'extrait, donc dans un iframe, le bouton et la fenêtre du chat restent dans ce cadre. La plupart des équipes ajoutent plutôt l'extrait à la page principale.

Puis-je utiliser le widget sur Shopify ou WooCommerce ?

Absolument. Collez l'extrait dans le fichier de mise en page de votre thème. Pour Shopify, utilisez le fichier theme.liquid ; pour WooCommerce, utilisez le fichier footer.php de votre thème ou une extension de scripts d'en-tête et de pied de page.

Ce guide vous a-t-il aidé ?

Continuer la lecture

Demander à Fynn à propos de ce guide

Obtenez une réponse courte tirée de ce guide et du reste du centre d'aide.

Ajouter un widget de chat en direct à votre site web

Créer la boîte de réception du widget

Installer le widget