Une fois que l’administrateur a terminé la configuration initiale des composants dans le Web Widget (Classique) à partir du Centre d’administration et a collaboré avec le développeur pour ajouter le Web Widget (Classique) à son site Web, il peut collaborer plus avant avec le développeur pour encore personnaliser le Web Widget (Classique) s’il le souhaite.
Cet article est une vue d’ensemble destinée aux administrateurs, qui explique quelles personnalisations avancées sont possibles avec le Web Widget (Classique). Il est conçu pour répondre à la question « Que puis-je faire d’autre avec mon Web Widget (Classique) ? » Il explique le processus de personnalisation pour les administrateurs et indique la documentation dont les développeurs Web ont besoin pour faire leur travail.
Si vous êtes un développeur Web (ou un administrateur capable de se charger du développement Web tout seul) et que vous recherchez une documentation complète pour les paramètres et commandes d’API décrits dans cet article, ou des exemples de code supplémentaires, consultez plutôt la documentation destinée aux développeurs pour l’API du Web Widget (Classique).
Cet article aborde les personnalisations du widget et les sujets suivants :
- Planification des personnalisations du Web Widget (Classique)
- Navigation dans la documentation pour l’API du Web Widget (Classique)
- Affichage du widget dans une autre langue
- Préremplissage des formulaires avec les coordonnées des utilisateurs
- Désactivation des pièces jointes aux tickets
- Repositionnement du bouton de lancement
- Décalage du placement du widget
- Personnalisation de la couleur des éléments du widget
- Modification de l’ordre visible dans le widget
- Suppression de fonctionnalités sur des pages spécifiques
- Personnalisation du texte du widget
- Ajout d’une ligne de sujet au formulaire de contact
- Masquer le bouton Afficher l’article original
- Limiter les résultats de recherche
- Personnalisation du texte de recherche du centre d’aide
- Configuration avancée de Talk dans le Web Widget (Classique)
- Configuration avancée de Chat dans le Web Widget (Classique)
- Mise à disposition de plusieurs options de contact pour les utilisateurs finaux
- Formatage du code pour plusieurs éléments du Web Widget (Classique)
Pour en savoir plus au sujet de l’ajout du Web Widget (Classique) à votre site, consultez Utilisation du Web Widget (Classique) pour incorporer le service client à votre site Web.
Pour la liste complète des documents disponibles pour le Web Widget (Classique), consultez Web Widget (Classique) - Ressources.
Planification des personnalisations du Web Widget (Classique)
La plupart des administrateurs Support ne sont pas des développeurs Web et collaborent donc avec une autre personne pour implémenter les personnalisations du Web Widget (Classique). Ils ne personnalisent pas le Web Widget (Classique) ni les sites Web tout seuls. Ils travaillent avec un développeur Web de leur entreprise ou un développeur externe avec lequel ils ont un contrat pour l’implémentation des modifications.
Le développeur Web est la personne qui se charge du travail de personnalisation, en ajoutant du code [API du Web Widget (Classique)] au code HTML du site Web. Cependant, l’administrateur a aussi un rôle à jouer. Il doit comprendre quelles personnalisations sont possibles pour le Web Widget (Classique) et communiquer ce qu’il souhaite au développeur Web.
Certains administrateurs ont une solide expérience du code HTML et choisissent de se charger eux-mêmes de la personnalisation et ainsi de jouer le rôle de développeur Web, et c’est tout à fait acceptable. Dans les deux cas, la personnalisation du Web Widget (Classique) demande une certaine planification de la part de l’administrateur et nécessite les étapes suivantes :
- Lisez les informations contenues dans cet article pour comprendre quelles personnalisations avancées sont possibles.
- Discutez avec les principales parties prenantes de votre entreprise pour créer une liste de critères à remplir pour votre Web Widget (Classique). Quelles couleurs voulez-vous utiliser ? Comment voulez-vous que le Web Widget (Classique) se comporte ?
- Préparez une liste des personnalisations souhaitées. Soyez le plus précis possible et incluez des liens vers la documentation de l’API pour votre développeur.
- Donnez la liste à votre développeur Web, qui personnalisera le Web Widget (Classique) en modifiant le code HTML de votre site Web.
Navigation dans la documentation pour l’API du Web Widget (Classique)
Voici des informations importantes pour aider les développeurs à s’y retrouver dans la documentation de l’API du Web Widget (Classique) sur le site Zendesk destiné aux développeurs.
Documentation destinée aux développeurs mise à jour et réorganisée et syntaxe API : la syntaxe de l’API du Web Widget (Classique) a changé et nous avons aussi réorganisé la documentation de l’API du Web Widget (Classique) destinée aux développeurs afin qu’il soit plus facile de trouver une commande ou un paramètre spécifique. Cette documentation est désormais organisée par canal de produit (centre d’aide, Tickets, Chat et Talk) ou par commandes et paramètres principaux. Pour en savoir plus, consultez la documentation de l’API du Web Widget (Classique) destinée aux développeurs.
Nouvelles API Chat : pour connaître les correspondances entre les anciennes API Chat (Zopim) et les API du Web Widget (Classique), consultez Migration de la syntaxe du widget Chat à la syntaxe du Web Widget (Classique) unifiée.
Affichage du widget dans une autre langue
Par défaut, le Web Widget (Classique) incorporé à un site Web affiche le texte dans la langue de l’utilisateur final, en fonction de la langue de son navigateur. Par exemple, si la langue du navigateur de l’utilisateur final est définie sur de (allemand), le widget s’affiche en allemand pour cet utilisateur. Si le widget est incorporé à un centre d’aide, il affiche le texte en fonction du paramètre de langue du centre d’aide.
Le Web Widget (Classique) prend en charge un sous-ensemble des langues prises en charge par Zendesk. Si la langue du navigateur de l’utilisateur final n’est pas prise en charge par le Web Widget (Classique), il s’affiche en anglais. Si le widget n’arrive pas à obtenir la langue du navigateur de l’utilisateur final, il s’affiche dans la langue spécifiée dans Zendesk Support.
Vous pouvez personnaliser le widget pour qu’il s’affiche toujours dans une langue spécifique en utilisant la commande setLocale. Cette commande configure la langue pour le widget uniquement et ne remplace pas la langue de votre page hôte.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour la commande setLocale.
Préremplissage des formulaires avec les coordonnées des utilisateurs
Pour faciliter la tâche des visiteurs de votre site, vous pouvez préremplir leur nom, leur adresse e-mail et leur numéro de téléphone dans les formulaires de contact. Cela inclut les formulaires de ticket, les formulaires pré-chat et les formulaires Chat hors ligne. Utilisez les paramètres identify et prefill.
Vous pouvez aussi configurer les informations utilisateur pour qu’elles soient en lecture seule en utilisant le paramètre prefill. Cela vous permet d’avoir plusieurs comptes utilisateur pour la même personne dans Support.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour les paramètres identify et prefill.
Désactivation des pièces jointes aux tickets
Si vous avez activé les pièces jointes pour vos tickets, les utilisateurs peuvent par défaut joindre des fichiers aux tickets envoyés par le biais du Web Widget (Classique). Vous pouvez cependant désactiver cette option si nécessaire.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre attachments de l’objet contactForm.
Repositionnement du bouton de lancement
Par défaut, le Web Widget (Classique) se trouve en bas à droite du navigateur et quand un utilisateur clique sur le bouton de lancement du Web Widget (Classique), il s’ouvre en s’agrandissant vers le haut.
Vous pouvez choisir un emplacement différent pour le Web Widget (Classique) d’une page à l’autre, et le placer sur la gauche ou la droite de la page, ou en haut de la page (auquel cas il s’ouvre en s’agrandissant vers le bas). Utilisez le paramètre position pour placer le Web Widget (Classique) en haut à gauche, en haut à droite, en bas à gauche ou en bas à droite de la page.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre position.
Décalage du placement du widget
Vous pouvez utiliser le paramètre offset pour repositionner votre Web Widget (Classique) sur vos appareils de bureau ou mobiles. Utilisez le paramètre position initial comme point de référence, puis le paramètre offset pour déplacer le Web Widget (Classique) horizontalement, verticalement ou les deux à partir de cette position (en pixels).
Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre offset.
Personnalisation de la couleur des éléments du widget
Vous pouvez spécifier un thème de couleurs global pour le Web Widget (Classique) (couleur du thème) et une couleur personnalisée pour le texte du bouton de lancement, du bouton de contact et de l’en-tête (couleur du texte du thème) à partir de la page d’administration du Web Widget (Classique) [consultez Configuration des composants dans le Web Widget (Classique)].
Pour personnaliser des éléments spécifiques, vous devez utiliser le paramètre color. Vous pouvez choisir une couleur unique pour chacun des composants suivants du Web Widget (Classique) :
- Bouton de lancement
- Bouton
- Texte des boutons
- Liste des résultats
- En-tête
- Liens vers les articles
À des fins d’accessibilité, le Web Widget (Classique) ajuste automatiquement les couleurs en utilisant un algorithme afin de garantir un rapport de contraste minimal comme spécifié dans les directives WCAG (règles pour l’accessibilité des contenus Web).
Pour en savoir plus au sujet de la personnalisation de la couleur des éléments du Web Widget (Classique), consultez la documentation destinée aux développeurs pour le paramètre color.
Modification de l’ordre visible dans le widget
Vous pouvez utiliser le paramètre zIndex [l’un des principaux paramètres du Web Widget (Classique)] pour définir une nouvelle valeur et modifier comment le Web Widget (Classique) s’affiche par rapport à d’autres éléments s’affichant au même endroit de votre site.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre zIndex.
Suppression de fonctionnalités du widget sur des pages spécifiques
Vous pouvez activer le formulaire de contact, Chat, Talk et le centre d’aide dans le Web Widget (Classique), puis utiliser le paramètre suppress pour modifier les fonctionnalités proposées sur des pages spécifiques de votre site en fonction de vos besoins.
- réduire le nombre de tickets du centre d’aide sur certaines pages ;
- avoir le formulaire Chat ou de contact sans réduction du nombre de tickets sur d’autres pages ;
- proposer différents niveaux de service aux utilisateurs connectés et identifiés.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre suppress.
Personnalisation du texte du widget
Vous pouvez modifier le texte des composants du Web Widget (Classique) répertoriés dans le tableau ci-dessous et vous pouvez aussi personnaliser le texte de recherche par défaut de votre centre d’aide.
| Composant | Détails |
|---|---|
|
Objet : launcher Paramètre : chatLabel Description : texte sur le bouton de lancement quand Chat est activé et le centre d’aide ne l’est pasTexte par défaut : Chat |
|
Objet : launcher Paramètre : label Description : texte sur le bouton de lancement Texte par défaut : Aide, Assistance ou Commentaires, comme défini à la page d’administration du Web Widget (Classique) |
|
Objet : helpCenter Paramètre : title Description : titre de la page du centre d’aide Texte par défaut : Aide |
|
Objet : contactForm Paramètre : title Description : titre du formulaire de contactTexte par défaut : Laissez-nous un message ou Contactez-nous, comme défini à la page d’administration du Web Widget (Classique) |
|
Objet : helpCenter Paramètre : messageButton Description : texte sur le bouton dans le formulaire du centre d’aide qui permet de charger le formulaire de contact (limite de 20 caractères environ) Texte par défaut : Laissez-nous un message ou Contactez-nous, comme défini à la page d’administration du Web Widget (Classique) |
|
Objet : helpCenter Paramètre : chatButton Description : texte sur le bouton dans le formulaire du centre d’aide qui permet de charger le chat (limite de 20 caractères environ)Texte par défaut : Aide, Assistance ou Commentaires, comme défini à la page d’administration du Web Widget (Classique) |
Pour modifier le texte par défaut qui s’affiche dans le Web Widget (Classique), utilisez l’objet translations. Les traductions sont regroupées par fonctionnalité, par exemple bouton de lancement, centre d’aide et formulaire de contact.
Vous trouverez la liste des codes des langues dans Codes pour les langues prises en charge par Zendesk.
Les traductions sont déclenchées par la langue du navigateur de l’utilisateur final. Vous pouvez aussi forcer le widget à toujours s’afficher dans une langue donnée et remplacer le paramètre de langue du navigateur de l’utilisateur final. Pour en savoir plus, consultez Affichage de votre widget dans une autre langue.
Ajout d’une ligne de sujet au formulaire de contact
Avec le paramètre subject de l’objet contactForm, vous pouvez configurer le Web Widget (Classique) de façon à inclure une ligne de sujet au formulaire de contact par défaut.
Le formulaire de contact par défaut est conçu pour encourager les interactions et offre une expérience fluide aux utilisateurs. Le formulaire de contact par défaut n’inclut pas de ligne de sujet, mais vous pouvez en ajouter une pour améliorer encore l’expérience utilisateur.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre subject de l’objet contactForm.
Masquer le bouton Afficher l’article original
Le bouton Afficher l’article original associe l’article dans le Web Widget (Classique) à l’article dans le centre d’aide. Vous pouvez masquer ce bouton en utilisant l’objet helpCenter et en définissant la propriété originalArticleButton sur false.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre originalArticleButton de l’objet helpCenter.
Limiter les résultats de recherche
Avec le paramètre filter de l’objet helpCenter, vous pouvez limiter les résultats des recherches effectuées dans le Web Widget (Classique) aux articles en fonction de la catégorie, de la section et des libellés. Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre filter.
Poursuivez votre lecture pour voir d’autres exemples qui ne sont pas inclus dans la documentation destinée aux développeurs et qui illustrent certaines façons dont vous pouvez limiter les résultats de recherche.
Pour limiter la recherche à une section spécifique :
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
section: '200154474-Announcements'
}
}
}
};
</script>Pour limiter la recherche à une catégorie spécifique :
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '200053794-General'
}
}
}
};
</script>Pour limiter la recherche au contenu de plusieurs catégories :
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '115000669485,201742209'
}
}
}
};
</script>Pour limiter la recherche au contenu avec un libellé spécifique :
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
label_names: 'orders'
}
}
}
};
</script>Pour limiter la recherche au contenu dans une catégorie spécifique et avec des libellés spécifiques :
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '200053794-General',
label_names: 'Label One,Label Two,Label Three'
}
}
}
};
</script>Personnalisation du texte de recherche du centre d’aide
Par défaut, le texte affiché dans le champ de recherche du centre d’aide est Comment pouvons-nous vous aider ?. Vous pouvez personnaliser ce texte pour qu’il corresponde à la langue de l’utilisateur ou pour qu’un texte spécifique s’affiche dans certaines langues. Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre searchPlaceholder.
Si l’aide contextuelle est activée, vous pouvez aussi configurer le Web Widget (Classique) pour qu’il ouvre des articles recommandés, ce qui permet à vos clients de s’auto-assister plus facilement. Pour en savoir plus, consultez la documentation destinée aux développeurs pour la commande setSuggestions de l’objet helpCenter.
Configuration avancée de Talk dans le Web Widget (Classique)
Vous pouvez créer plusieurs configurations qui définissent le comportement de Talk dans le Web Widget (Classique). Avec chaque configuration, vous pouvez personnaliser le routage des appels et les options d’affichage pour Talk dans le Web Widget (Classique), en fonction de vos besoins et préférences.
-
Le groupe d’agents vers lequel vous souhaitez que soient routées les demandes de rappel du Web Widget (Classique)
-
La priorité des demandes de rappel du Web Widget (Classique)
-
L’affichage de Demandez à être rappelé, Appelez-nous ou ces deux options dans le Web Widget (Classique)
-
L’affichage d’un temps d’attente estimé dans le Web Widget (Classique)
Si vous avez créé une seule configuration de Talk dans le Web Widget (Classique), ce sera automatiquement la configuration par défaut qui s’affiche dans le Web Widget (Classique) quand Talk est disponible.
Si vous avez créé plusieurs configurations de Talk dans le Web Widget (Classique), vous pouvez utiliser le paramètre de surnom Talk pour cibler la configuration de votre choix.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour l’objet talk, le paramètre nickname et Configuration des paramètres Zendesk Talk pour le Web Widget (Classique).
Configuration avancée de Chat dans le Web Widget (Classique)
Si vous utilisez lechat en direct dans le Web Widget (Classique), vous pouvez fournir les fonctionnalités Zendesk Chat dans le Web Widget (Classique) pour que les visiteurs de votre site Web puissent chatter avec les agents, ainsi qu’envoyer et recevoir des fichiers pouvant aider à résoudre leurs problèmes. Les agents peuvent aussi envoyer des messages proactifs aux visiteurs pour voir s’ils veulent de l’aide ou en ont besoin.
Pour en savoir plus, consultez la documentation destinée aux développeurs pour l’objet chat.
Pour connaître les correspondances entre les anciennes API Chat (Zopim) et les API du Web Widget (Classique), consultez Migration de la syntaxe du widget Chat à la syntaxe du Web Widget unifiée.
Mise à disposition de plusieurs options de contact pour les utilisateurs finaux
Vous pouvez permettre aux utilisateurs finaux de choisir une option de contact. Vous pouvez envisager de personnaliser votre site Web pour que certaines pages permettent aux utilisateurs finaux de faire ce choix et pas d’autres. Le comportement exact dépend de si Chat ou Talk est configuré pour le Web Widget (Classique) et qu’un agent de chat est en ligne. Vous pouvez personnaliser le texte par défaut des options de contact si vous le souhaitez.
Voici une liste des textes par défaut :
| Option de contact | Texte par défaut |
|---|---|
| Bouton de contact | Contactez-nous |
| Libellé Chat (avec un agent en ligne) | Chat en direct |
| Libellé Chat (avec un agent hors ligne) | Le chat n’est pas disponible. |
| Libellé du formulaire de contact | Laissez-nous un message |
Pour en savoir plus, consultez la documentation destinée aux développeurs pour le paramètre contactOptions.
Mise à disposition de différentes options de contact avec Chat
Si Chat est configuré pour le Web Widget (Classique), les utilisateurs finaux sont automatiquement dirigés vers un chat si un agent de chat est disponible. Cependant, vous pouvez permettre aux utilisateurs finaux de choisir entre chatter avec un agent ou remplir un formulaire de contact, même si un agent de chat est disponible. Si un agent de chat est disponible quand l’utilisateur clique sur le bouton de lancement mais qu’il se déconnecte avant le début du chat, l’utilisateur final peut voir un message indiquant que l’agent n’est pas disponible.
Quand un utilisateur final choisir le chat, il ne peut pas utiliser le bouton Retour pour retourner aux autres options de contact. C’est un problème connu. Pour pouvoir le faire, il doit complètement mettre fin au chat ou actualiser la page.
Mise à disposition de différentes options de contact avec Talk
Si Talk et d’autres options de contact sont activées dans le Web Widget (Classique) et qu’il y a des agents en ligne, les options de contact sont automatiquement activées.
Formatage du code pour plusieurs composants du widget
Les éléments spécifiques au formulaire de contact, au centre d’aide et à Zendesk Chat sont imbriqués sous ces en-têtes (contactForm, helpCenter et chat) dans le code HTML de votre site et les éléments globaux sont inclus séparément.
- La position du Web Widget (Classique) sur l’écran a été modifiée à l’aide du paramètre offset. Le décalage (offset) est un élément global et a donc sa propre entrée.
- Recherche dans le centre d’aide : n’inclut pas le bouton Afficher l’article original. A le titre « Search for help » pour les utilisateurs anglophones et « Have your say » pour toutes les autres langues.
- Le chat est désactivé.
- Le titre du formulaire de contact est « Message us » et « Contact us » pour toutes les autres langues.
- Le texte du bouton de lancement est « Make a request » et « Get help » pour les autres langues.
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
offset: { horizontal: '400px', vertical: '400px' },
helpCenter: {
originalArticleButton: false,
title: {
'en-US': 'Search for help',
'*': 'Have your say'
}
},
chat: {
suppress: true
},
contactForm: {
title: {
'en-US': 'SMessage us',
'*': 'Contact us'
}
},
launcher: {
label: {
'en-US': 'Make a request',
'*': 'Get help'
}
}
}
};
</script>