Domanda
Come posso personalizzare il widget di Zendesk Chat usando l'API JavaScript?
Risposta
Usa l’API JavaScript per apportare modifiche e personalizzazioni al Web Widget (versione classica) localizzato in un sito o in una pagina.
Se sei un principiante, la prima cosa da fare è capire se usi il frammento di codice del Web Widget (versione classica) o del Web Widget nella tua pagina. Entrambi offrono funzionalità di Chat e possono apparire uguali ai visitatori del sito.
Conoscenza dei diversi frammenti di codice
- Il frammento di codice di Chat ha il seguente aspetto:
<!--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-->
ACCOUNT_KEY
è l’unico identificatore univoco per il tuo account. Se hai iniziato con un account solo Chat, questo è il frammento di codice che hai.
- Il frammento di codice del Web Widget ha il seguente aspetto:
<script id="ze-snippet"
src="https://static.zdassets.com/ekr/snippet.js?key=ACCOUNT_KEY"> </script>
ACCOUNT_KEY
è l’identificatore univoco, ma è un formato diverso dalla chiave dell’account Chat. Se hai aperto l’account Chat dall’account Support, questo vale anche per te.
L’unico modo per saperlo con certezza è aprire il tuo account e controllare la pagina Widget per vedere qual è il frammento di widget esatto del tuo account.
Aggiunta di JavaScript personalizzato
Il problema più comune nell’uso della nostra API JavaScript è che gli eventi non sono configurati per essere eseguiti nell’ordine corretto. JavaScript di solito viene eseguito in modo asincrono su una pagina, quindi senza la dovuta cura, è possibile che il comando, ad esempio per cambiare il colore del widget venga eseguito prima che il widget esista. Per questo motivo, l’aggiunta delle corrette funzioni “pronte” è fondamentale per poter disporre di una personalizzazione affidabile.
-
Codice del Web Widget (versione classica)
In questo caso, il tuo codice personalizzato dovrebbe assomigliare a questo:
$zopim(function(){ // Custom code here });
Questo frammento di codice attende il completamento del caricamento della pagina, quindi il completamento del caricamento del Web Widget (versione classica) prima di aggiungere qualsiasi personalizzazione.
-
Codice del Web Widget
Usa lo script qui sotto:
zE(function(){ $zopim(function(){ // Custom code here }); });
In questo esempio, il codice è in attesa del caricamento della pagina, quindi del caricamento del Web Widget e infine del caricamento della funzionalità Chat da parte del Web Widget. Dopo il caricamento di Chat, puoi aggiungere le personalizzazioni desiderate al Web Widget (versione classica).
Per maggiori informazioni, leggi questi articoli: