Question
Comment personnaliser le widget Zendesk Chat avec l’API JavaScript ?
Réponse
Utilisez l’API JavaScript pour modifier et personnaliser votre Web Widget (Classique) localisé sur un site ou une page.
Si vous débutez, la première chose à faire est de savoir si vous utilisez le snippet de code Web Widget (Classique) ou Web Widget sur votre page. Ces deux éléments offrent des fonctionnalités de chat et peuvent avoir un aspect identique pour le visiteur du site.
Connaissance des différents snippets de code
- Le snippet de code Chat prend la forme suivante :
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?ACCOUNT_KEY";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
Le snippet ACCOUNT_KEY
est le seul identifiant unique de votre compte. Si vous avez commencé par un compte Chat uniquement, il s’agit de votre snippet de code.
- Le snippet de code du Web Widget se présente comme suit :
<script id="ze-snippet"
src="https://static.zdassets.com/ekr/snippet.js?key=ACCOUNT_KEY"> </script>
ACCOUNT_KEY
est l’unique identifiant, mais il s’agit d’un format différent de celui d’une clé de compte Chat. Si vous avez créé votre compte Chat à partir de votre compte Support, cela vous concerne.
La seule façon d’en être sûr est d’ouvrir votre compte et de consulter la page Widget pour voir quel est exactement le snippet du widget de votre compte.
Ajout de code JavaScript personnalisé
Les problèmes les plus courants au niveau de l’API JavaScript résultent d’erreurs de paramétrage de la séquence d’exécution des événements. JavaScript s’exécutant généralement de façon asynchrone sur une page, on risque, si l’on n’y prend pas garde, d’exécuter une commande (par exemple, la commande permettant de modifier la couleur du widget) avant même la fin de la création du widget. Pour cette raison, il est essentiel d’ajouter les fonctions « prêt » adéquates pour que la personnalisation soit fiable.
-
Code du Web Widget (Classique)
Dans ce cas, votre code personnalisé devrait ressembler à ceci :
$zopim(function(){ // Custom code here });
Ce snippet attend la fin du chargement de la page, puis du Web Widget (Classique), avant d’ajouter toute personnalisation.
-
Code du Web Widget
Utilisez le script ci-dessous :
zE(function(){ $zopim(function(){ // Custom code here }); });
Dans cet exemple, le code attend le chargement de la page, puis du Web Widget et enfin de la fonctionnalité de Chat par Web Widget. Une fois le chat chargé, vous pouvez personnaliser le Web Widget (Classique) comme vous l’entendez.
Pour en savoir plus, consultez ces articles :