Wie kann ich das Zendesk-Chat-Widget über die JavaScript-API anpassen?

Frage

Wie kann ich das Zendesk-Chat-Widget über die JavaScript-API anpassen?

Antwort

Mit der JavaScript-API können Sie Änderungen und Anpassungen an Ihrem Chat-Widget vornehmen, das auf einer einzigen Website oder Seite erscheint.

Als Einsteiger müssen Sie als Erstes herausfinden, ob Sie auf Ihrer Seite das Code-Snippet für das Chat- oder Web-Widget 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 anfangs ein Nur-Chat-Konto hatten, haben Sie jetzt diesen 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, unterscheidet sich jedoch vom Format eines Chat-Kontoschlüssels. Wenn Sie Ihr Chatkonto über Ihr Zendesk Support-Konto gestartet haben, gilt dies für Sie.

Sie können es nur herausfinden, wenn Sie Ihr Konto öffnen und auf der Widget-Seite nach dem genauen Widget-Snippet 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.

• Chat-Widget-Code
  
  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 Chat-Widgets, 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. Nachdem der Chat geladen ist, können Sie alle gewünschten Anpassungen zum Chat-Widget hinzufügen.

Hinweis zur Übersetzung: Dieser Beitrag wurde mit automatischer Übersetzungssoftware übersetzt, um dem Leser ein grundlegendes Verständnis des Inhalts zu vermitteln. Trotz angemessener Bemühungen, eine akkurate Übersetzung bereitzustellen, kann Zendesk keine Garantie für die Genauigkeit übernehmen.

Sollten in Bezug auf die Genauigkeit der Informationen im übersetzten Beitrag Fragen auftreten, beziehen Sie sich bitte auf die englische Version des Beitrags, die als offizielle Version gilt.