Comment personnaliser la position et la taille du widget web Zendesk

Bien positionner votre widget web Zendesk peut faire la différence entre un canal de support client utile et une distraction ennuyeuse. Que vous souhaitiez qu'il soit discrètement rangé dans un coin ou affiché bien en évidence, les options de positionnement varient selon le type de widget que vous utilisez.

Voici exactement comment personnaliser la position et la taille de chaque variante de widget Zendesk.

Quel widget Zendesk avez-vous ?

Avant de pouvoir ajuster le positionnement, vous devez savoir avec quel widget vous travaillez. Zendesk propose trois principaux types de widgets, et chacun a des capacités de personnalisation différentes.

Web Widget (Messaging) est la norme actuelle pour les comptes avec Zendesk Suite ou Support + Chat sur les plans Team et supérieurs avec la messagerie activée. Il propose une interface de chat moderne avec des bulles de conversation et prend en charge les conversations persistantes d'une session à l'autre.

Web Widget (Classic) est l'option héritée pour les comptes qui n'ont pas activé la messagerie. Il combine la recherche dans le centre d'aide, les formulaires de contact et le chat en direct optionnel dans une interface traditionnelle. Cette version offre l'API JavaScript la plus complète pour la personnalisation.

Chat-only Web Widget (Classic) apparaît si vous avez uniquement le produit Chat sans Support. Il s'agit essentiellement du composant de chat sans les fonctionnalités de billetterie.

Pour identifier votre widget, consultez votre Centre d'administration. Si vous voyez Canaux > Messagerie et réseaux sociaux > Messagerie, vous avez le Web Widget (Messaging). Si vous voyez Canaux > Classic > Web Widget, vous utilisez la version Classic.

Source : Guide d'identification du widget Zendesk

Positionnement du Web Widget (Messaging)

Le Web Widget (Messaging) offre des commandes de positionnement simples via l'interface du Centre d'administration.

Pour accéder aux paramètres de position :

1. Ouvrez le Centre d'administration
2. Cliquez sur Canaux dans la barre latérale
3. Sélectionnez Messagerie et réseaux sociaux > Messagerie
4. Cliquez sur le nom du canal que vous souhaitez modifier
5. Ouvrez l'onglet Style

Options de position :

Le widget de messagerie prend en charge deux positions : En bas à droite (par défaut) ou En bas à gauche. Contrairement au widget Classic, vous ne pouvez pas le placer en haut de la page via l'interface utilisateur.

Configuration du décalage :

Vous pouvez affiner le placement exact à l'aide des valeurs de décalage. La valeur par défaut est de 16 pixels à partir du bord que vous avez choisi. Augmentez ces valeurs pour déplacer le widget vers l'intérieur à partir du coin, ou diminuez-les pour le rapprocher du bord.

Personnalisation de l'apparence :

Bien qu'il ne s'agisse pas strictement de positionnement, ces paramètres affectent l'empreinte visuelle du widget :

• Rayon de la bordure : Ajustez de 0 px (coins pointus) à 20 px (entièrement arrondi)
• Forme du lanceur : Choisissez Carré (avec courbe réglable), Cercle ou Lanceur personnalisé
• Éléments de taille : La taille du bouton du lanceur est fixe, mais vous pouvez ajouter du texte facultatif qui augmente sa largeur

Considérations relatives aux appareils mobiles :

Activez Afficher sur mobile pour afficher le texte du lanceur dans les SDK mobiles. Le widget adapte automatiquement sa taille aux écrans plus petits, mais la position reste ancrée au coin que vous avez choisi.

Source : Configuration de l'apparence du Web Widget

Positionnement du Web Widget (Classic)

Le widget Classic offre plus de flexibilité de positionnement que son homologue de messagerie, y compris la possibilité de le placer dans n'importe quel coin de l'écran.

Pour accéder aux paramètres de position :

1. Ouvrez le Centre d'administration
2. Cliquez sur Canaux dans la barre latérale
3. Sélectionnez Classic > Web Widget
4. Localisez le composant Position

Positionnement dans les quatre coins :

Le widget Classic prend en charge les quatre coins :

• En haut à gauche
• En haut à droite
• En bas à gauche
• En bas à droite

Lorsqu'il est positionné en haut, le widget se développe vers le bas lorsqu'il est ouvert. Lorsqu'il est positionné en bas, il se développe vers le haut.

Ajustement de base du décalage :

Le composant Position comprend des commandes de décalage pour affiner le placement à partir du coin sélectionné. Ceci est utile pour éviter les conflits avec d'autres éléments fixes sur votre page.

Personnalisation JavaScript avancée :

Pour un contrôle précis, le widget Classic accepte la configuration JavaScript via window.zESettings. Cette approche vous permet de définir des valeurs de pixels exactes et même de modifier le positionnement de manière dynamique en fonction du contenu de la page.

Source : Repositionnement du Web Widget

Positionnement de l'ancien widget Chat

Si vous utilisez un ancien compte Chat uniquement, vos paramètres de widget se trouvent à un emplacement différent.

Pour accéder aux paramètres de position :

1. Ouvrez votre tableau de bord Chat
2. Accédez à Paramètres > Widget
3. Recherchez le menu déroulant Position du widget

Options disponibles :

L'ancien widget Chat prend en charge les mêmes quatre coins que le Web Widget Classic. Cependant, les options de personnalisation sont plus limitées. Vous n'aurez pas accès à l'API JavaScript étendue offerte par le widget Classic.

Remarque importante : De nombreux comptes qui utilisaient auparavant le widget Chat autonome ont désormais leurs paramètres gérés dans la configuration du Web Widget (Classic) dans le produit Support. Si vous ne voyez pas les paramètres de position dans Chat, vérifiez plutôt Centre d'administration > Canaux > Classic > Web Widget.

Source : Personnalisation de l'ancien widget Chat

Positionnement avancé avec l'API JavaScript

Pour les développeurs qui ont besoin d'un contrôle précis, l'API JavaScript du Web Widget (Classic) offre des capacités de positionnement étendues.

Les bases :

Toute la personnalisation se fait via l'objet window.zESettings, qui doit être défini avant le chargement du script du widget :

window.zESettings = {
  webWidget: {
    position: {
      vertical: 'top',
      horizontal: 'right'
    },
    offset: {
      horizontal: '20px',
      vertical: '100px'
    }
  }
};

Propriétés de position :

Scénarios de positionnement courants :

En haut à droite avec de l'espace :

window.zESettings = {
  webWidget: {
    position: { vertical: 'top', horizontal: 'right' },
    offset: { horizontal: '30px', vertical: '80px' }
  }
};

En bas à gauche en évitant un pied de page :

window.zESettings = {
  webWidget: {
    position: { vertical: 'bottom', horizontal: 'left' },
    offset: { horizontal: '20px', vertical: '100px' }
  }
};

Contrôle zIndex :

Si votre widget apparaît derrière d'autres éléments tels que des barres de navigation ou des modales, augmentez la valeur zIndex dans vos paramètres JavaScript :

window.zESettings = {
  webWidget: {
    zIndex: 999999
  }
};

Mode intégré :

Pour un contrôle complet sur le placement, vous pouvez intégrer le widget dans un conteneur spécifique sur votre page plutôt que de le faire flotter. Cela nécessite du JavaScript supplémentaire et est généralement utilisé lorsque vous souhaitez que le widget apparaisse comme faisant partie de la mise en page de votre page plutôt que comme une superposition.

Source : Introduction à l'API Web Widget

Meilleures pratiques pour le positionnement des widgets

Bien positionner le widget, c'est plus que simplement choisir un coin. Voici des directives pratiques pour un placement efficace du widget.

Tenez compte de la mise en page de votre contenu :

Placez le widget là où il n'obstruera pas la navigation ou le contenu important. Le bas à droite est populaire car la plupart des utilisateurs sont droitiers et de nombreux sites Web ont moins de contenu critique dans cette zone. Cependant, si votre site a un pied de page fixe ou des CTA importants en bas à droite, envisagez un positionnement en bas à gauche ou en haut.

Réactivité mobile :

Testez la position que vous avez choisie sur des appareils mobiles réels, pas seulement en redimensionnant le navigateur. Le lanceur de widget ne doit pas couvrir les menus de navigation, les bannières de consentement aux cookies ou les boutons d'action flottants. Sur les écrans plus petits, vous pourriez avoir besoin de valeurs de décalage plus importantes pour éviter le chevauchement avec l'interface utilisateur native du navigateur.

Considérations relatives à l'accessibilité :

Le widget ajuste automatiquement les couleurs pour répondre aux directives de contraste WCAG, mais le positionnement est également important pour l'accessibilité. Assurez-vous que le lanceur ne couvre pas les indicateurs de focus ou les liens d'accès au contenu. Les utilisateurs naviguant au clavier doivent pouvoir atteindre le widget sans tabulation excessive.

Quand utiliser un lanceur personnalisé :

Les deux types de widgets prennent en charge le masquage du lanceur par défaut et la création de votre propre déclencheur. Ceci est utile lorsque vous souhaitez que le widget s'ouvre à partir d'un bouton spécifique dans votre navigation, ou lorsque le lanceur flottant est en conflit avec votre système de conception. N'oubliez pas que l'utilisation d'un lanceur personnalisé nécessite un travail de développement supplémentaire pour gérer les états d'ouverture/fermeture.

Recommandations de test :

• Vérifiez le positionnement sur différentes tailles d'écran (mobile de 320 px à bureau de 1920 px)
• Vérifiez que le widget ne chevauche pas les bannières de cookies, les modales de vérification de l'âge ou les fenêtres contextuelles promotionnelles
• Testez avec le contenu réel de votre site Web, pas seulement une page vierge
• Tenez compte de la façon dont la position fonctionne avec le comportement de défilement de votre site

Dépannage des problèmes de positionnement courants

Même avec des paramètres clairs, le positionnement du widget ne fonctionne parfois pas comme prévu. Voici comment résoudre les problèmes les plus courants.

Le widget n'apparaît pas à la position attendue :

Tout d'abord, vérifiez que vous modifiez les paramètres du bon type de widget. Les modifications apportées au widget de messagerie n'affecteront pas le widget Classic et vice versa. Videz le cache de votre navigateur et vérifiez le widget dans une fenêtre de navigation privée pour exclure le JavaScript mis en cache.

Conflits z-index :

Si le widget apparaît derrière d'autres éléments tels que des barres de navigation ou des modales, augmentez la valeur zIndex dans vos paramètres JavaScript. Commencez par 999999 et ajustez vers le bas si cela cause d'autres problèmes. Certains outils tiers utilisent des valeurs z-index extrêmement élevées, vous devrez donc peut-être faire des essais.

Problèmes de positionnement mobile :

Les navigateurs mobiles gèrent les unités de fenêtre d'affichage différemment des ordinateurs de bureau. Si vos valeurs de décalage fonctionnent sur un ordinateur de bureau mais pas sur un appareil mobile, essayez d'utiliser un positionnement basé sur un pourcentage ou testez différentes valeurs de pixels spécifiquement pour les fenêtres d'affichage mobiles. Le widget de messagerie a un paramètre mobile dédié, mais le widget Classic nécessite des requêtes de média CSS pour un positionnement spécifique aux appareils mobiles.

Les modifications ne se reflètent pas sur votre site Web :

Les paramètres du widget peuvent prendre quelques minutes à se propager. Si vous avez attendu et que vous ne voyez toujours pas les modifications, vérifiez que vous consultez une page où le widget est réellement installé. L'extrait de code du widget doit être présent sur la page pour que les paramètres prennent effet.

Considérations relatives au cache et au CDN :

Si vous utilisez un CDN ou une couche de mise en cache, votre JavaScript de widget peut être mis en cache. Purgez votre cache CDN après avoir apporté des modifications de positionnement. Pour le widget Classic, les modifications apportées à window.zESettings prennent effet immédiatement au chargement de la page, de sorte que la mise en cache est moins un problème qu'avec les modifications du Centre d'administration.

Améliorez votre widget Zendesk avec l'IA

Une fois que votre widget est parfaitement positionné, réfléchissez à la façon dont l'IA peut vous aider à gérer les conversations qui le traversent. Bien que Zendesk offre des fonctionnalités d'IA intégrées, vous pourriez souhaiter plus de flexibilité dans la façon dont vous automatisez les réponses et acheminez les conversations.

C'est là qu'un coéquipier IA peut compléter votre stratégie de widget. Au lieu de simplement collecter des tickets, vous pouvez avoir un agent IA qui résout réellement les problèmes courants directement dans la conversation. L'IA apprend de vos anciens tickets et du contenu du centre d'aide, de sorte que les réponses correspondent à la voix et aux politiques de votre marque.

Si vous cherchez à aller au-delà des fonctionnalités de base du chatbot, envisagez d'explorer les options de support alimentées par l'IA qui s'intègrent à Zendesk. La bonne configuration d'IA peut gérer automatiquement les questions de routine tout en escaladant de manière transparente les problèmes complexes vers votre équipe humaine.

Pour les équipes qui souhaitent une solution d'IA complète, un chatbot IA formé sur votre base de connaissances spécifique peut fournir des réponses plus précises que les alternatives génériques. Consultez les options de tarification pour voir ce qui correspond à votre volume de support.