Options du lanceur de widget web Zendesk : un guide complet pour 2026

Ce que vous apprendrez sur les options du lanceur de widget

Le lanceur est la première chose que vos clients voient lorsqu'ils ont besoin d'aide. C'est ce bouton dans le coin de votre site web qui ouvre la porte à l'assistance. Mais voici ce qu'il faut savoir : Zendesk vous donne plus de contrôle sur ce bouton que la plupart des gens ne le pensent.

Vous avez des options allant de simples configurations sans code à des implémentations entièrement personnalisées qui s'intègrent parfaitement à votre interface utilisateur existante. Que vous utilisiez le Messaging Web Widget moderne ou l'Classic Web Widget hérité, ce guide vous présente toutes les options de lanceur disponibles et vous aide à choisir l'approche adaptée à vos besoins.

Décomposons ce que vous pouvez réellement faire avec votre lanceur de widget et comment implémenter chaque option.

Comprendre vos options de lanceur de widget web Zendesk

Le lanceur par défaut

Dès le départ, Zendesk vous offre trois formes de lanceur au choix dans le Centre d'administration :

• Carré avec un rayon d'angle réglable (0px pour des angles vifs jusqu'à 20px pour des angles entièrement arrondis)
• Cercle pour un look moderne et compact
• Lanceur personnalisé qui masque le bouton par défaut afin que vous puissiez créer le vôtre

Le positionnement est simple : en bas à gauche ou en bas à droite de la fenêtre du navigateur. Vous pouvez également définir un espacement de décalage par rapport aux bords si vous devez éviter les conflits avec d'autres éléments de l'interface utilisateur tels que les bannières de cookies ou les widgets de chat.

Le lanceur par défaut prend en charge les étiquettes de texte facultatives (comme « Aide » ou « Chattez avec nous ») et vous pouvez choisir d'afficher ou non ce texte sur les appareils mobiles. Pour l'image de marque, vous définissez une couleur primaire qui s'applique à la fois au bouton du lanceur et à l'en-tête du widget, ainsi qu'aux couleurs des messages et des actions pour l'interface de conversation.

Quand choisir un lanceur personnalisé

Le lanceur par défaut fonctionne bien pour la plupart des cas d'utilisation. Mais il existe des situations où la création d'un lanceur personnalisé est judicieuse :

• Exigences spécifiques en matière d'image de marque : vous avez besoin que le lanceur corresponde à des éléments de conception uniques que les couleurs du Centre d'administration ne peuvent pas réaliser
• Placement non standard : vous voulez que le lanceur soit ailleurs que dans les coins inférieurs, ou intégré à un élément de navigation existant
• Déclencheurs complexes : vous voulez que le widget s'ouvre à partir de plusieurs éléments de la page, comme un lien « Contactez-nous » dans votre en-tête et un bouton flottant
• Badges de messages non lus : vous voulez afficher le nombre de notifications sur vos propres éléments d'interface utilisateur

Le compromis est le temps de développement. Les lanceurs personnalisés nécessitent des connaissances en HTML, CSS et JavaScript. Vous aurez également besoin d'une maintenance continue si Zendesk met à jour son API (Application Programming Interface).

En résumé ? Commencez par le lanceur par défaut, sauf si vous avez une exigence spécifique qu'il ne peut pas satisfaire.

Configuration du lanceur par défaut dans le Centre d'administration

Étape 1 : Accéder aux paramètres du widget web

Accédez à Centre d'administration > Canaux > Messagerie et réseaux sociaux > Messagerie, puis cliquez sur le nom de votre canal de widget web.

Vous verrez plusieurs onglets en haut : Notions de base, Style, Réponses, Préférences et Installation. Pour la configuration du lanceur, vous avez besoin de l'onglet Style.

Étape 2 : Personnaliser l'apparence du lanceur

Dans l'onglet Style, faites défiler jusqu'à la section Lanceur. Voici ce que vous pouvez configurer :

Position dans la fenêtre du navigateur : choisissez en bas à droite ou en bas à gauche. Tenez compte de ce qui se trouve également dans les coins de votre page. Si vous avez une bannière de cookies ou un autre outil de chat, vous devrez peut-être ajuster les décalages ou choisir le coin opposé.

Forme : sélectionnez carré, cercle ou lanceur personnalisé. Si vous choisissez carré, un curseur apparaît pour ajuster le rayon de la bordure de 0px (coins vifs) à 20px (entièrement arrondis).

Texte (facultatif) : ajoutez une étiquette qui apparaît à côté du bouton du lanceur. Quelque chose comme « Aide » ou « Chattez avec nous » peut augmenter l'engagement en rendant l'objectif du bouton plus clair.

Afficher sur mobile : activez ou désactivez l'affichage de l'étiquette de texte sur les appareils mobiles. Sur les petits écrans, vous préférerez peut-être simplement l'icône pour gagner de la place.

Étape 3 : Définir les couleurs et l'image de marque

Toujours dans l'onglet Style, la section Cadre contrôle l'identité visuelle du widget :

Couleur primaire : elle colore le bouton du lanceur et l'en-tête du widget. Entrez un code hexadécimal ou utilisez le sélecteur de couleurs. Si vous migrez depuis le widget classique, elle reprend vos paramètres de marque précédents par défaut.

Couleur du message : la couleur de fond des bulles de message du client.

Couleur de l'action : la couleur des boutons et des options sélectionnées dans la conversation.

Logo (facultatif) : téléchargez un JPG ou un PNG pour qu'il apparaisse en haut du cadre du widget. C'est l'occasion de renforcer la reconnaissance de la marque.

Titre : le texte qui apparaît en haut du widget. Il peut s'agir du nom de votre entreprise ou d'un appel à l'action tel que « Contactez-nous ».

Cliquez sur Enregistrer les paramètres et vos modifications seront immédiatement mises en ligne sur toutes les pages où le widget est installé.

Création d'un lanceur personnalisé

Préparation de l'implémentation personnalisée

Avant d'écrire du code, vous devez faire deux choses dans le Centre d'administration :

1. Accédez au même onglet Style décrit ci-dessus
2. Définissez Forme sur Lanceur personnalisé

Cela supprime le bouton de lanceur par défaut de votre site web. Le widget est toujours là, mais caché jusqu'à ce que vous le déclenchiez par programmation.

Pour l'implémentation technique, vous aurez besoin de :

• L'accès pour modifier le HTML et le CSS de votre site web
• Des connaissances de base en JavaScript
• Une connaissance de l'API du widget web Zendesk

Création du lanceur

Un lanceur personnalisé comporte trois composants :

1. Élément HTML : le bouton ou le lien cliquable qui déclenche le widget
2. CSS : le style pour correspondre à votre marque et positionner l'élément
3. JavaScript : les appels API pour ouvrir, fermer et surveiller l'état du widget

Voici une implémentation de base :

<!-- Votre bouton de lanceur personnalisé -->
<button id="custom-launcher">Chattez avec nous</button>

<script>
  // Masquer le lanceur par défaut (déjà fait dans le Centre d'administration, mais cela le garantit)
  zE('messenger:set', 'hideLauncher', true) ;

  // Ajouter un gestionnaire de clics à votre bouton personnalisé
  document.getElementById('custom-launcher').addEventListener('click', function() {
    zE('messenger', 'open') ;
  }) ;

  // Facultatif : Mettre à jour le texte du bouton lorsque le widget se ferme
  zE('messenger:on', 'close', function() {
    console.log('Widget fermé') ;
  }) ;
</script>

Vous pouvez styliser le bouton comme vous le souhaitez avec CSS. Positionnez-le n'importe où sur la page, utilisez les couleurs de votre marque, ajoutez des effets de survol ou intégrez-le à la navigation existante.

Exemple de code : Lanceur personnalisé de base avec badge non lu

Un exemple plus complet qui affiche le nombre de messages non lus :

<button id="custom-launcher">
  Chattez avec nous
  <span id="unread-badge" style="display: none;">0</span>
</button>

<script>
  // Suivre les messages non lus
  zE('messenger:on', 'unreadMessages', function(count) {
    const badge = document.getElementById('unread-badge') ;
    if (count > 0) {
      badge.textContent = count ;
      badge.style.display = 'inline' ;
    } else {
      badge.style.display = 'none' ;
    }
  }) ;

  // Activer/désactiver le widget au clic sur le bouton
  let isOpen = false ;
  document.getElementById('custom-launcher').addEventListener('click', function() {
    if (isOpen) {
      zE('messenger', 'close') ;
    } else {
      zE('messenger', 'open') ;
    }
  }) ;

  // Suivre l'état du widget
  zE('messenger:on', 'open', function() { isOpen = true ; }) ;
  zE('messenger:on', 'close', function() { isOpen = false ; }) ;
</script>

Cela vous donne un lanceur qui se comporte comme celui par défaut, mais avec un contrôle total sur l'apparence et le placement.

Options de personnalisation avancées

API de thèmes pour le widget de messagerie

Au-delà des paramètres de couleur du Centre d'administration, le widget de messagerie prend en charge une API de thèmes JavaScript pour une personnalisation dynamique. Ceci est utile si vous voulez :

• Changer les couleurs en fonction des préférences de l'utilisateur (comme le mode sombre)
• Appliquer différents thèmes sur différentes pages
• Mettre à jour l'image de marque de manière dynamique sans recharger

L'API utilise la commande set customization (définir la personnalisation) :

zE("messenger:set", "customization", {
  theme: {
    primary: "#FE5E41",
    onPrimary: "#FFFFFF",
    message: "#F3C178",
    onMessage: "#5F0F00",
    action: "#B0DB43",
    onAction: "#000000",
    background: "#DFE0E2",
    onBackground: "#F10404"
  }
})

Propriétés clés du thème :

• primary (primaire) : Couleur principale de la marque pour le lanceur et l'en-tête
• onPrimary (surPrimaire) : Couleur du texte sur les éléments primaires
• message (message) : Arrière-plan de la bulle de message du client
• onMessage (surMessage) : Couleur du texte dans les messages des clients
• action (action) : Couleurs des boutons et des éléments interactifs
• onAction (surAction) : Couleur du texte sur les boutons d'action
• background (arrière-plan) : Couleur d'arrière-plan du widget
• onBackground (surArrière-plan) : Couleur du texte sur l'arrière-plan

Vous n'avez pas besoin de spécifier chaque propriété. Celles que vous omettez utilisent les couleurs par défaut, ce qui signifie que vous pouvez remplacer uniquement ce dont vous avez besoin.

Source : API de personnalisation du widget web Zendesk

Différences de l'API du widget classique

Si vous utilisez toujours Web Widget (Classic), la structure de l'API est différente :

• Les commandes utilisent zE('webWidget:*') au lieu de zE('messenger:*')
• Les paramètres sont définis dans un objet window.zESettings avant le chargement du widget
• La personnalisation est plus limitée : couleur du thème et couleur du texte du thème uniquement
• Pas de prise en charge du mode intégré

Exemple de commande du widget classique :

zE('webWidget', 'show') ;
zE('webWidget', 'hide') ;
zE('webWidget', 'open') ;
zE('webWidget', 'close') ;

Source : API du widget web (classique)

Mode intégré

Au lieu d'un lanceur flottant, vous pouvez intégrer le widget directement dans un élément de page. Ceci est utile pour les pages d'assistance dédiées où vous voulez que l'interface de conversation soit visible immédiatement.

Pour utiliser le mode intégré :

1. Ajoutez un élément conteneur à votre HTML :

<div id="my-messenger-container"></div>

2. Désactivez le rendu automatique avant le chargement du widget :

<script>
  window.zEMessenger = { autorender: false } ;
</script>

3. Appelez la méthode de rendu avec le mode intégré :

zE("messenger", "render", {
  mode: "embedded",
  widget: {
    targetElement: "#my-messenger-container"
  }
})

Le widget s'ajuste automatiquement pour remplir son conteneur. Vous pouvez également afficher uniquement la liste des conversations ou le journal des messages séparément si vous voulez une mise en page en écran partagé.

Source : Documentation sur le mode intégré

Bonnes pratiques pour l'implémentation du lanceur

Réactivité mobile

Testez votre lanceur sur de vrais appareils mobiles, pas seulement avec les outils de développement du navigateur. Le lanceur par défaut gère raisonnablement bien le mobile, mais les lanceurs personnalisés nécessitent une attention particulière :

• Assurez-vous que les cibles tactiles mesurent au moins 44x44 pixels
• Déterminez si les étiquettes de texte sont pertinentes sur les petits écrans
• Vérifiez que le widget n'obscurcit pas l'interface utilisateur mobile critique

Accessibilité

Votre lanceur doit fonctionner pour tout le monde :

• Ajoutez des attributs aria-label appropriés aux lanceurs personnalisés
• Assurez-vous que la navigation au clavier fonctionne (Tab pour la mise au point, Entrée/Espace pour l'activation)
• Testez avec des lecteurs d'écran pour vérifier que le widget s'annonce correctement
• Maintenez un contraste de couleurs suffisant (minimum WCAG AA)

Éviter les conflits d'interface utilisateur

Les coins inférieurs des sites web sont des biens immobiliers encombrés. Avant de placer votre lanceur :

• Vérifiez la présence de bannières de consentement aux cookies
• Recherchez les outils de chat en direct d'autres fournisseurs
• Tenez compte de vos propres éléments de navigation
• Utilisez les paramètres de décalage pour créer un espace de respiration

Impact sur les performances

Le widget Zendesk se charge de manière asynchrone, il ne bloquera donc pas le rendu de votre page. Mais les lanceurs personnalisés qui vérifient l'état du widget ou se mettent à jour fréquemment peuvent ajouter une surcharge. Gardez vos gestionnaires d'événements simples et anticipez les mises à jour rapides.

Améliorer votre widget avec eesel AI

Une fois votre lanceur configuré, la question suivante est de savoir ce qui se passe lorsque les clients cliquent dessus. C'est là que nous pouvons vous aider.

Chez eesel AI, nous nous intégrons à la messagerie Zendesk pour fournir des réponses basées sur l'IA via votre widget web. Voici comment cela fonctionne :

Vous connectez eesel à votre compte Zendesk, et notre IA apprend de vos anciens tickets, des articles du centre d'aide, des macros et de toute documentation connectée. Lorsque les clients démarrent une conversation via votre widget, eesel peut gérer la réponse initiale, répondre aux questions courantes et ne faire appel à des agents humains qu'en cas de nécessité.

L'IA maintient la voix de votre marque car elle est formée sur la façon dont votre équipe écrit réellement. Et elle continue d'apprendre : lorsque vous corrigez une réponse ou mettez à jour votre documentation, eesel intègre automatiquement ces commentaires.

Cela fonctionne avec n'importe quelle configuration de lanceur, que vous utilisiez le bouton par défaut ou une implémentation entièrement personnalisée. L'IA se trouve derrière l'interface du widget que vos clients voient, vous bénéficiez donc de l'automatisation sans modifier votre configuration frontale.

Pour les équipes qui cherchent à réduire le volume de tickets tout en maintenant la qualité, la combinaison d'un lanceur bien conçu avec des réponses basées sur l'IA peut réduire considérablement la charge de l'assistance. Selon les données de référence de Zendesk, un libre-service et une automatisation efficaces peuvent réduire le volume de tickets jusqu'à 25 %.

Choisir la bonne option de lanceur pour vos besoins

Voici la version courte de la façon de décider :

Utilisez le lanceur carré ou cercle par défaut si :

• Vous voulez une configuration rapide avec un minimum de maintenance
• Les options d'image de marque standard sont suffisantes
• Vous n'êtes pas encore sûr de ce dont vous avez besoin

Créez un lanceur personnalisé si :

• Vous avez des exigences spécifiques en matière d'image de marque
• Vous avez besoin d'un placement non standard ou de plusieurs points de déclenchement
• Vous voulez afficher des badges de notification personnalisés

Utilisez le mode intégré si :

• Vous créez une page d'assistance dédiée
• Vous voulez que l'interface de conversation soit visible immédiatement
• Vous avez besoin d'une mise en page en écran partagé avec la liste des conversations et les messages côte à côte

Commencez simple. Le lanceur par défaut convient à la plupart des équipes, et vous pouvez toujours passer à une implémentation personnalisée plus tard. L'important est de mettre l'assistance devant vos clients rapidement, puis d'itérer en fonction de ce que vous apprenez.

N'oubliez pas : le lanceur n'est que la porte d'entrée. Ce qui compte, c'est ce qui se passe de l'autre côté. Que vous vous en teniez aux paramètres par défaut ou que vous construisiez quelque chose de complètement personnalisé, assurez-vous que l'expérience de conversation offre de la valeur une fois que les clients ont franchi cette porte.