JavaScript APIを使用してZendesk Chatウィジェットをカスタマイズするにはどうすればよいですか？

質問

JavaScript APIを使用してZendesk Chatウィジェットをカスタマイズするにはどうすればよいですか？

回答

JavaScript APIを使用して、1つのサイトまたはページにローカライズされたChatウィジェットへの変更やカスタマイズを行うことができます。

まず、ページでChatのコードスニペットかWeb Widgetのコートスニペットのどちらを使用しているかを確認します。どちらもChat機能を提供し、サイトの訪問者に同じように見えることがあります。

コードスニペットを区別する

• Chatコードのスニペットは、次のようになります：

<!--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は、アカウントのただ一つのユニークな識別子です。最初からChat専用アカウントをお使いの場合、おそらくコードスニペットはこちらです。

• Web Widgetコードスニペットは、次のようになります：

<script id="ze-snippet" 
src="https://static.zdassets.com/ekr/snippet.js?key=ACCOUNT_KEY"> </script>

ACCOUNT_KEYは一意のIDですが、Chatアカウントキーとは別の形式です。ChatアカウントをSupportアカウント内から開始した場合、これはお客様に適用されます。

アカウントを開き、ウィジェットページをチェックして、アカウントの正確なウィジェットスニペットを確認するしか方法はありません。

カスタムJavaScriptを追加する

JavaScript APIを使用する際によくある問題は、イベントが正しい順序で実行されるように設定されていないことです。JavaScriptは通常、ページ上で非同期で実行されるため、適切な注意を払わないと、たとえば、ウィジェットの色を変更するコマンドが、ウィジェットが存在する前に実行される可能性があります。このため、信頼性の高いカスタマイズを提供するには、正しい「ready」関数を追加することが不可欠です。

• Chatウィジェットコード
  
  この場合、カスタムコードは次のようになります：
  

  $zopim(function(){ // Custom code here });

  このスニペットは、ページの読み込みが完了して、次にChatウィジェットの読み込みが完了してから、カスタマイズを追加します。
  
  
• Web Widgetコード
  
  以下のスクリプトを使用します。
  

   zE(function(){ $zopim(function(){ // Custom code here }); });

この例では、ページの読み込みが完了して、次にWeb Widgetの読み込みが完了してから、最後にWeb Widgetがチャット機能を読み込みます。Chatの読み込みの後に、任意のカスタマイズをChatウィジェットに追加するのが無難です。