{
"title": "Comment obtenir et installer votre code d'intégration du widget web Zendesk",
"slug": "zendesk-web-widget-embed-code",
"locale": "fr",
"date": "2026-02-26",
"updated": "2026-02-26",
"template": "default",
"excerpt": "Un guide pratique pour obtenir et implémenter le code d'intégration du widget web Zendesk, couvrant les versions Classic et Messaging du widget avec des instructions spécifiques à la plateforme.",
"categories": [
"Zendesk",
"Guides"
],
"tags": [
"Zendesk",
"Web Widget",
"Customer Support",
"Embed Code",
"Live Chat"
],
"readTime": 9,
"author": 16,
"reviewer": 14,
"seo": {
"title": "Comment obtenir et installer votre code d'intégration du widget web Zendesk",
"description": "Un guide pratique pour obtenir et implémenter le code d'intégration du widget web Zendesk, couvrant les versions Classic et Messaging du widget avec des instructions spécifiques à la plateforme.",
"image": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-fb02f50b-1d43-47cd-9b53-5118c8069821"
},
"coverImage": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-fb02f50b-1d43-47cd-9b53-5118c8069821",
"coverImageAlt": "Image de bannière pour Comment obtenir et installer votre code d'intégration du widget web Zendesk",
"coverImageWidth": 1920,
"coverImageHeight": 1080,
"faqs": {
"heading": "Foire aux questions",
"type": "blog",
"answerType": "html",
"faqs": [
{
"question": "Où puis-je trouver mon code d'intégration du widget web Zendesk ?",
"answer": "Vous pouvez trouver votre code d'intégration dans le Centre d'administration Zendesk. Accédez à Canaux > Messagerie (ou Canaux > Classic > Web Widget pour la version Classic), sélectionnez votre widget, puis faites défiler jusqu'à la section Installation et cliquez sur l'icône Copier."
},
{
"question": "Puis-je utiliser le code d'intégration du widget web Zendesk sur plusieurs sites web ?",
"answer": "Oui, vous pouvez utiliser le même code d'intégration sur plusieurs sites web ou pages. Le widget fonctionnera de manière identique partout où il est installé. Cependant, si vous avez besoin de configurations différentes pour différents sites, créez des widgets distincts dans votre Centre d'administration."
},
{
"question": "Le code d'intégration du widget web Zendesk fonctionne-t-il avec WordPress ?",
"answer": "Oui, le code d'intégration fonctionne avec WordPress. Vous pouvez l'ajouter via le fichier footer.php de votre thème, utiliser la section des scripts supplémentaires du Customizer, ou installer un plugin comme 'Insert Headers and Footers' pour gérer le code sans modifier les fichiers du thème."
},
{
"question": "Quelle est la différence entre le code d'intégration du widget web Messaging et Classic Zendesk ?",
"answer": "Le widget Messaging utilise un extrait de code moderne avec la configuration zEMessenger et prend en charge les conversations continues et les agents IA. Le widget Classic utilise zESettings et offre des chats basés sur la session avec des formulaires plus détaillés. Le processus d'installation est similaire, mais la structure du code diffère légèrement."
},
{
"question": "Comment puis-je personnaliser l'apparence de mon widget web Zendesk après avoir installé le code d'intégration ?",
"answer": "La plupart des personnalisations se font dans le Centre d'administration Zendesk avant de copier le code. Pour des modifications avancées, vous pouvez utiliser l'API JavaScript pour modifier les couleurs, la position et le comportement par programmation. Les modifications apportées dans le Centre d'administration prennent généralement environ 10 minutes pour se propager aux widgets en direct."
},
{
"question": "Le code d'intégration du widget web Zendesk est-il gratuit ?",
"answer": "Le widget web est inclus dans tous les plans Zendesk Suite, qui commencent à 55 $ par agent par mois (facturation annuelle). Le widget lui-même n'a pas de prix distinct, mais vous avez besoin d'un abonnement Zendesk actif pour générer et utiliser le code d'intégration."
}
],
"supportLink": null
}
}
---
Le [widget web Zendesk](https://www.zendesk.com/embeddables/web-widget/) est l'un des moyens les plus rapides d'ajouter un support client à votre site web. C'est cette petite bulle de chat que vous voyez dans le coin des sites, permettant aux visiteurs de rechercher dans votre centre d'aide, de démarrer une conversation ou de soumettre un ticket sans quitter la page.
Mais avant que les clients ne puissent l'utiliser, vous devez obtenir le code d'intégration et l'ajouter à votre site. Ce guide vous explique exactement comment faire cela, que vous utilisiez le nouveau widget Messaging ou la version Classic.
## Comprendre les deux versions du widget web Zendesk
Zendesk propose deux types de widgets différents, et savoir lequel vous avez est important pour l'installation.
Le **Messaging Web Widget** est la version moderne. Il prend en charge les conversations continues (les clients peuvent partir et revenir à la même conversation), les agents d'IA natifs et la messagerie en temps réel. C'est ce que Zendesk recommande pour les nouvelles configurations. Vous pouvez en savoir plus dans le [guide d'installation de Messaging](https://support.zendesk.com/hc/en-us/articles/4500748175258).
Le **Web Widget (Classic)** est la version héritée. Il utilise des chats basés sur la session et offre des options de formulaire plus détaillées. Certains anciens comptes Zendesk l'utilisent encore, et il est entièrement pris en charge. Consultez la [documentation du widget Classic](https://support.zendesk.com/hc/en-us/articles/4408836216218) pour plus de détails.
Voici une comparaison entre les deux :
| Fonctionnalité | Messaging Web Widget | Web Widget (Classic) |
|---------|---------------------|---------------------|
| Style de conversation | Continu à travers les sessions | Basé sur la session |
| Prise en charge de l'agent d'IA | Intégration native | Limitée |
| Chat en direct | En temps réel | En temps réel |
| Recherche dans le centre d'aide | Oui | Oui |
| Formulaires de contact | Simplifiés | Formulaires complets et détaillés |
| Où configurer | Centre d'administration > Canaux > Messagerie | Centre d'administration > Canaux > Classic > Web Widget |
Si vous n'êtes pas sûr de celui que vous avez, vérifiez votre Centre d'administration. Le chemin de navigation vous le dira immédiatement. Pour plus de détails, consultez la [documentation pour développeurs de Zendesk](https://developer.zendesk.com/embeddables/docs/widget/introduction/).
## Ce dont vous aurez besoin avant de commencer
Avant de récupérer votre code d'intégration, assurez-vous d'avoir :
- Un compte Zendesk avec un accès administrateur
- L'accès au HTML de votre site web ou à votre système de gestion de contenu
- Un centre d'aide activé (requis pour l'option d'intégration automatique du widget Messaging)
- Une connaissance de base de l'endroit où placer les scripts sur votre site
Si vous utilisez WordPress, Shopify ou une autre plateforme, vous aurez besoin d'un accès administrateur pour modifier les fichiers de thème ou installer des plugins. Pour les équipes cherchant à ajouter des réponses alimentées par l'IA à leur widget, [eesel AI](https://www.eesel.ai) offre une intégration Zendesk qui apprend de votre centre d'aide et de vos anciens tickets.
## Étape 1 : Accéder aux paramètres de votre widget dans Zendesk
Tout d'abord, accédez au bon endroit dans votre Centre d'administration Zendesk.
Pour le **Messaging Web Widget** : Allez dans **Centre d'administration > Canaux > Messagerie et réseaux sociaux > Messagerie**.
Pour le **Web Widget (Classic)** : Allez dans **Centre d'administration > Canaux > Classic > Web Widget**.
Vous verrez une liste de widgets si vous en avez plusieurs configurés. Cliquez sur le nom du widget que vous souhaitez installer. Cela ouvre le panneau de configuration où vous pouvez personnaliser l'apparence et le comportement avant de générer le code.
## Étape 2 : Configurer l'apparence et les fonctionnalités de votre widget
Avant de générer le code d'intégration, configurez l'apparence et le fonctionnement souhaités du widget. Cela vous évite de devoir le mettre à jour plus tard.
**Paramètres visuels à configurer :**
- **Couleurs** : Définissez la couleur principale de votre marque pour les boutons et les en-têtes
- **Position** : Choisissez le coin inférieur gauche ou le coin inférieur droit
- **Style du lanceur** : Sélectionnez l'icône et le texte qui apparaissent sur le bouton
- **Logo** : Téléchargez le logo de votre entreprise (les plans Enterprise peuvent supprimer la marque Zendesk)
**Composants fonctionnels à activer :**
- **Recherche dans le centre d'aide** : Permet aux clients de trouver des articles avant de vous contacter
- **Formulaire de contact** : Permet la soumission de tickets directement depuis le widget
- **Chat en direct** : Permet des conversations en temps réel avec les agents
- **Demandes de rappel** : Permet aux clients de demander un appel téléphonique (nécessite Zendesk Talk)
**Paramètres de comportement :**
- **Heures d'ouverture** : Définissez quand le widget apparaît ou modifie la messagerie
- **Salutations** : Configurez les messages de bienvenue automatisés
- **Réactivité mobile** : Assurez-vous que le widget fonctionne sur les téléphones et les tablettes
Prenez un moment pour prévisualiser vos modifications. Zendesk fournit un aperçu en direct afin que vous puissiez voir exactement comment le widget apparaîtra aux clients.
## Étape 3 : Générer et copier votre code d'intégration
Une fois que vous êtes satisfait de la configuration, il est temps d'obtenir le code réel.
Faites défiler jusqu'à la section **Installation** et cliquez pour la développer. Vous verrez un extrait de code JavaScript qui ressemble à ceci :
```html
<!-- Start of Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_WIDGET_KEY"></script>
<!-- End of Zendesk Widget script -->
Cliquez sur l'icône Copier pour copier l'intégralité de l'extrait de code dans votre presse-papiers. Ce code contient votre clé de widget unique, qui connecte le widget à votre compte Zendesk spécifique. Pour plus de détails sur le processus d'installation, consultez le guide d'installation de Messaging de Zendesk.
Si vous devez envoyer ce code à un développeur, cliquez plutôt sur Envoyer le code par e-mail à un membre de l'équipe.
Étape 4 : Ajouter le code à votre site web
Vous devez maintenant coller ce code dans le HTML de votre site web. L'emplacement est important : ajoutez-le juste avant la balise de fermeture </body> sur chaque page où vous souhaitez que le widget apparaisse.
Sites web HTML standard
Ouvrez les fichiers HTML de votre site web et collez l'extrait de code avant </body>. Si vous utilisez un système de modèles, ajoutez-le à votre modèle de base afin qu'il apparaisse sur toutes les pages.
WordPress
Vous avez plusieurs options :
- Éditeur de thème : Allez dans Apparence > Éditeur de fichiers de thème, ouvrez
footer.phpet collez avant</body> - Personnalisateur : Certains thèmes ont une section « Scripts personnalisés » ou « Code de pied de page » dans Apparence > Personnaliser
- Plugin : Utilisez un plugin comme « Insert Headers and Footers » pour ajouter du code sans modifier les fichiers de thème
Shopify
- Allez dans Boutique en ligne > Thèmes
- Cliquez sur Actions > Modifier le code sur votre thème actif
- Ouvrez
theme.liquiddans le dossier Disposition - Collez l'extrait de code avant la balise de fermeture
</body> - Enregistrez
Autres plateformes
La plupart des systèmes de gestion de contenu ont un moyen d'ajouter des scripts personnalisés :
- Wix : Paramètres > Code personnalisé
- Squarespace : Paramètres > Avancé > Injection de code
- Webflow : Paramètres du projet > Code personnalisé
Après avoir ajouté le code, enregistrez vos modifications et videz tous les caches. Pour plus de conseils spécifiques à la plateforme, consultez la documentation pour développeurs de Zendesk.
Étape 5 : Vérifier votre installation
Ne supposez pas simplement que cela a fonctionné. Prenez une minute pour vérifier que tout fonctionne correctement.
Ouvrez votre site web dans une fenêtre de navigation privée ou incognito. Cela garantit que vous le voyez comme le ferait un nouveau visiteur, sans que les données mises en cache n'interfèrent.
Vérifiez les points suivants :
- Le lanceur de widget apparaît dans le coin que vous avez choisi
- Cliquer dessus ouvre l'interface du widget
- Votre image de marque (couleurs, logo) s'affiche correctement
- La recherche dans le centre d'aide fonctionne si elle est activée
- Vous pouvez démarrer une conversation ou soumettre un ticket de test
Testez à la fois sur ordinateur et sur mobile pour garantir un comportement réactif. Le widget doit s'adapter aux écrans plus petits sans casser la mise en page de votre site.
Si le widget n'apparaît pas, vérifiez la console de développement de votre navigateur pour les erreurs JavaScript. Les problèmes courants incluent :
- Le script est bloqué par une politique de sécurité du contenu
- Les conflits avec d'autres widgets de chat
- Le code est placé au mauvais endroit
Personnaliser votre widget au-delà des paramètres de base
Une fois que le widget de base fonctionne, vous pouvez explorer les options de personnalisation avancées via l'API JavaScript.
Contrôle programmatique
Vous pouvez contrôler le comportement du widget avec des commandes JavaScript :
// Ouvrir le widget
zE('webWidget', 'open');
// Définir le nom du visiteur
zE('webWidget', 'prefill', {
name: 'John Doe',
email: 'john@example.com'
});
Mode intégré
Pour plus de contrôle sur le placement, utilisez le mode intégré pour placer le widget à l'intérieur d'un conteneur spécifique :
window.zEMessenger = {
autorender: false
};
zE('messenger', 'render', {
mode: 'embedded',
widget: {
targetElement: '#support-container'
}
});
Ceci est utile pour créer des pages de support dédiées ou pour intégrer le widget dans des tableaux de bord. Pour en savoir plus, consultez la documentation sur le mode intégré.
Visiteurs authentifiés
Si vos utilisateurs se connectent à votre site web, vous pouvez les authentifier dans le widget afin qu'ils voient leur historique de conversation et n'aient pas besoin de saisir à nouveau leurs coordonnées. Cela nécessite la configuration de l'authentification JWT dans vos paramètres Zendesk.
Dépannage des problèmes d'intégration courants
Même avec des instructions claires, les choses tournent parfois mal. Voici comment résoudre les problèmes courants.
Widget n'apparaissant pas
- Videz votre cache : Les navigateurs mettent fortement en cache ; essayez une actualisation forcée (Ctrl+F5 ou Cmd+Shift+R)
- Vérifiez les erreurs JavaScript : Ouvrez les outils de développement du navigateur et recherchez les erreurs rouges dans la console
- Vérifiez que le script a été chargé : Dans l'onglet Réseau des outils de développement, vérifiez si la requête de script Zendesk a réussi
- Pare-feu bloquant : Assurez-vous que votre pare-feu autorise les requêtes vers
zdassets.cometzendesk.com
Erreurs de placement du code
- Assurez-vous que le code se trouve avant
</body>, pas après - Ne le placez pas à l'intérieur de
<head>(cela peut ralentir le chargement de la page) - Assurez-vous de ne pas avoir accidentellement cassé la structure HTML lors du collage
Conflits avec d'autres outils
Si vous utilisez d'autres widgets de chat (Intercom, Drift, etc.), ils peuvent entrer en conflit. N'utilisez qu'un seul widget de chat par page pour éviter la confusion et les problèmes techniques.
Problèmes d'affichage mobile
- Vérifiez que la balise méta de la fenêtre d'affichage de votre site web est correctement définie
- Assurez-vous que l'indice z du widget n'est pas remplacé par votre CSS
- Testez sur des appareils réels, pas seulement sur des émulateurs de navigateur
Améliorer votre widget Zendesk avec le support de l'IA
Une fois que votre widget web est en cours d'exécution, vous remarquerez peut-être qu'il nécessite encore beaucoup de travail manuel. Les agents doivent répondre à chaque conversation, et les questions simples prennent un temps précieux.
C'est là que l'IA peut aider. eesel AI s'intègre directement à Zendesk pour automatiser les réponses en utilisant vos articles de centre d'aide existants et les données des tickets passés.
Voici comment cela fonctionne :
- Entraînez-vous sur votre contenu : eesel apprend de votre centre d'aide, de vos macros et de vos tickets résolus
- Rédigez des réponses d'IA : Lorsque les clients utilisent votre widget web, eesel suggère des réponses complètes que les agents peuvent examiner
- Résolution autonome : Pour les questions courantes, eesel peut répondre directement sans l'intervention d'un agent
- Escalade intelligente : Les problèmes complexes sont automatiquement acheminés vers des agents humains avec un contexte complet
L'intégration se fait au sein de votre configuration Zendesk existante. Il n'est pas nécessaire de remplacer votre widget web ou de modifier la façon dont les clients interagissent avec vous. eesel rend simplement ces interactions plus efficaces.
Pour les équipes cherchant à réduire les temps de réponse tout en maintenant la qualité, l'agent IA d'eesel AI peut être une prochaine étape pratique après la configuration du widget de base.
Partager cet article
Article by
