Intégrer le widget

Mis à jour le 4 nov. 20265 min de lecture

Français

Sur cette page

Pour intégrer le widget de chat, il suffit d'ajouter un extrait de code à votre site. Collez-le avant la balise de fermeture </body> (ou utilisez Google Tag Manager) et le widget est en ligne. Pas d'étape de build, pas de paquet NPM à installer. Cela fonctionne sur tous les CMS : WordPress, Webflow, Shopify, Wix, HTML simple, ou tout outil qui vous laisse ajouter une balise script.

Ajouter le widget de chat Deskwoot à votre site web ne demande qu'un petit extrait de code. Le widget se charge de façon asynchrone et ne ralentit pas le chargement de votre page.

Code d'intégration JavaScript

Une fois votre boîte de réception de chat en direct créée, Deskwoot génère un extrait JavaScript. Copiez-le depuis Paramètres > Boîtes de réception > votre boîte de réception > onglet Widget > Installation du widget. L'extrait est un court script placé directement dans la page : il définit window.deskwootSettings = { widgetToken: "YOUR_WIDGET_TOKEN" } puis charge https://deskwoot.com/widget/deskwoot-loader.js de façon asynchrone. Collez ce code avant la balise de fermeture </body> sur chaque page où le widget doit apparaître.

La valeur widgetToken du code d'intégration est l'identifiant unique de votre widget. Elle relie le widget à votre boîte de réception. Vous la trouverez dans les paramètres de votre boîte de réception. Laissez-la dans votre code frontend : vous pouvez la rendre publique sans risque, car elle permet seulement aux visiteurs de démarrer des conversations.

React et Next.js

Pour une application React, ajoutez la balise script à votre index.html ou utilisez un hook useEffect pour la charger dynamiquement. Dans Next.js, utilisez le composant Script de next/script avec strategy='afterInteractive' pour un chargement optimal. Placez-le dans votre layout.tsx ou _app.tsx pour charger le widget sur toutes les pages.

WordPress

Dans WordPress, allez dans Apparence > Éditeur de thème et ouvrez le fichier footer.php. Collez le script du widget avant la balise de fermeture </body>. Vous pouvez aussi utiliser une extension comme « Insert Headers and Footers » pour ajouter le code sans modifier les fichiers du thème. Si vous utilisez un constructeur de pages comme Elementor, ajoutez un widget HTML avec le code du script.

Applications monopages

Le widget Deskwoot fonctionne avec tous les frameworks SPA, dont React, Vue, Angular et Svelte. Chargez le script une seule fois dans la structure de base de votre app : il reste en place quand la route change. Utilisez l'objet global window.deskwootSettings pour des options comme une identité utilisateur signée, et window.deskwoot pour ouvrir, fermer, afficher ou masquer le widget depuis votre code.

Questions fréquentes

Où trouver mon extrait d'intégration ?

Paramètres → Boîtes de réception → votre boîte de réception de chat en direct → onglet Widget → Installation du widget. L'extrait contient déjà votre jeton de widget : il suffit de le copier et de le coller.

Où placer l'extrait dans la page ?

N'importe où avant </body>. Le widget se charge de façon asynchrone, donc sa position ne ralentit pas le premier affichage de votre page. Beaucoup de sites utilisent Google Tag Manager et ne touchent pas directement au HTML.

Comment l'installer sur WordPress ?

Utilisez une extension qui ajoute du code dans l'en-tête et le pied de page (par exemple WPCode), collez l'extrait dans l'emplacement « Body » ou « Footer », puis enregistrez. Pas d'extension ? Modifiez le fichier footer.php de votre thème et collez l'extrait avant </body>.

Comment l'installer sur Shopify ?

Boutique en ligne → Thèmes → Modifier le code → theme.liquid → collez avant </body>. Le widget s'affiche automatiquement sur chaque page de votre boutique.

Comment l'installer sur Webflow ?

Project Settings → Custom Code → Footer Code → collez l'extrait. Publiez pour appliquer les changements.

Puis-je l'installer avec Google Tag Manager ?

Oui, c'est même recommandé pour les équipes marketing. Créez une balise « HTML personnalisé » avec l'extrait, déclenchez-la sur toutes les pages, puis publiez. Aucun développeur nécessaire.

Le widget entre-t-il en conflit avec d'autres scripts de chat ?

En général, non. Le widget fonctionne dans ses propres iframes, donc ses styles ne se mélangent pas au CSS de votre site, et il utilise un z-index élevé (environ 2 milliards) pour rester au-dessus des éléments de votre site. Si vous voyez un chevauchement avec un autre script qui utilise un z-index proche, la solution la plus propre est de retirer l'autre script de chat : vous n'avez pas besoin de deux.

Puis-je installer le widget sur plusieurs domaines ?

Oui, le même extrait fonctionne sur autant de domaines que vous le souhaitez. Si vous voulez des couleurs ou des messages d'accueil différents pour chaque marque, créez des boîtes de réception séparées et utilisez sur chaque site l'extrait qui lui correspond.

Comment indiquer au widget quel utilisateur est connecté ?

Utilisez la vérification d'identité : ajoutez un objet `user` à `window.deskwootSettings` dans l'extrait (ou appelez `window.deskwoot.identify(user)` après la connexion) avec `identifier` (l'ID de l'utilisateur dans votre système), `identifierHash` (un HMAC SHA256 de l'identifiant, que votre serveur signe avec le secret de la boîte de réception, qui se trouve dans l'onglet Formulaire avant le chat) et, si vous le souhaitez, `email` et `name`. Les visiteurs vérifiés discutent sous leur vrai nom et leur vraie adresse e-mail, et n'ont pas à remplir le formulaire avant le chat. Vous pouvez aussi envoyer des `attributes`, comme le forfait de l'utilisateur. Pour que Fynn s'en serve pour répondre au visiteur dans le chat en direct, signez-les sur votre serveur avec `attributesHash` ; les attributs sans signature sont visibles uniquement par votre équipe. Le format est décrit dans la documentation développeur du widget.

Le widget fonctionne-t-il avec les applications monopages (React, Vue, Next.js) ?

Oui. Intégrez le script de chargement une seule fois dans votre layout racine. Les changements de route ne réinitialisent pas le widget : l'état de la conversation est conservé pendant la navigation dans la SPA.

Puis-je prévisualiser le widget sans publier l'extrait ?

Oui. Sur un grand écran, l'onglet Widget de votre boîte de réception de chat en direct affiche un aperçu en direct du widget à côté des paramètres d'apparence. Pratique pour vérifier vos personnalisations avant de les enregistrer.

Ce guide vous a-t-il aidé ?

Demander à Fynn à propos de ce guide

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