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

Frage

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 mit einem reinen Chat-Konto arbeiten, ist dies wahrscheinlich das Code-Snippet, das Sie haben.

Das Code-Snippet für das Web Widget sieht wie folgt aus:

<!-- Start of Zendesk Widget script -->
<script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var e=this.createElement("script");n&&(this.domain=n),e.id="js-iframe-async",e.src="https://assets.zendesk.com/embeddable_framework/main.js",this.t=+new Date,this.zendeskHost="SUBDOMAIN.zendesk.com",this.zEQueue=a,this.body.appendChild(e)},o.write('<body onload="document._l();">'),o.close()}();
/*]]>*/</script>
<!-- End of Zendesk Widget script -->

SUBDOMAIN ist die eindeutige Kennung. Wenn Sie Ihr Chatkonto über Ihr Zendesk Support-Konto gestartet haben, gilt dies für Sie.

Allerdings können Sie nur sichergehen, indem Sie Ihren Site-Editor öffnen oder den Quellcode untersuchen und feststellen, welche der Optionen oben eingesetzt wird.

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.

Frage

Antwort

0 Kommentare

Verwandte Beiträge