Frage
Wie kann ich das Zendesk-Chat-Widget über die JavaScript-API anpassen?
Antwort
Mit der JavaScript-API können Sie Änderungen und Anpassungen am Web Widget (Classic) vornehmen, das auf einer einzigen Website oder Seite lokalisiert ist.
Als Einsteiger sollten Sie zunächst herausfinden, ob Sie das Web Widget (Classic) oder das Web Widget-Code-Snippet auf Ihrer Seite verwenden. Beide bieten Chatfunktionen und sehen für Besucher der Website wahrscheinlich gleich aus.
Kenntnis der unterschiedlichen Code-Snippets
- Das Chat-Code-Snippet sieht wie folgt aus:
<!--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
ist die einzige eindeutige Kennung in Ihrem Konto. Wenn Sie ein Nur-Chat-Konto hatten, haben Sie dieses Code-Snippet.
- Das Code-Snippet für das Web Widget sieht wie folgt aus:
<script id="ze-snippet"
src="https://static.zdassets.com/ekr/snippet.js?key=ACCOUNT_KEY"> </script>
Der ACCOUNT_KEY
ist die eindeutige Kennung, hat jedoch ein anderes Format als ein Chat-Kontoschlüssel. Wenn Sie Ihr Chatkonto über Ihr Zendesk Support-Konto gestartet haben, gilt dies für Sie.
Sie können dies nur herausfinden, wenn Sie Ihr Konto öffnen und auf der Widget-Seite nach dem genauen Widget-Snippet Ihres Kontos suchen.
Hinzufügen von angepasstem JavaScript
Das häufigste Problem bei der Verwendung unserer JavaScript-API ist, dass Ereignisse nicht in der richtigen Reihenfolge ausgeführt werden. JavaScript wird in der Regel asynchron auf einer Seite ausgeführt. Daher ist es ohne sorgfältige Instandhaltung beispielsweise möglich, den Befehl zum Ändern der Farbe des Widgets auszuführen, bevor das Widget existiert. Aus diesem Grund ist es für eine zuverlässige Anpassung unabdingbar, die richtigen einsatzbereiten Funktionen hinzuzufügen.
-
Web Widget (Classic) Core
In diesem Fall sollte der angepasste Code wie folgt aussehen:
$zopim(function(){ // Custom code here });
Dieses Snippet wartet, bis das Laden der Seite abgeschlossen ist und dann das Laden des Web Widgets (Classic), bevor Anpassungen hinzugefügt werden.
-
Web-Widget-Code
Verwenden Sie das folgende Skript:
zE(function(){ $zopim(function(){ // Custom code here }); });
In diesem Beispiel wartet der Code, bis die Seite geladen ist, dann das Web-Widget und zuletzt die Chat-Funktion durch das Web-Widget. Nach dem Laden von Chat können Sie alle gewünschten Anpassungen zum Web Widget (Classic) hinzufügen.
Weitere Informationen finden Sie in den folgenden Beiträgen: