マルチブランドのセットアップ（パート2）：Zendesk Chat-Supportインテグレーション（フェーズ3）

• マルチブランドのセットアップ（パート1）： レガシーZendesk Chat（スタンドアロン）
• マルチブランドのセットアップ（パート2）：Zendesk Chat-Supportインテグレーション（フェーズ3）
• マルチブランドのセットアップ（パート3）： ベストプラクティス

Chatフェーズ3のChat-Supportインテグレーションを使用している場合は、Zendeskで複数のブランドを設定する必要があります。また、Chatウィジェットの代わりに、Web Widgetを使用する必要があります。

手順1： Zendeskに複数のブランドを設定する

Zendeskアカウントにはデフォルトで1個のブランドが用意されますが、Support Enterpriseの場合は複数のブランドを設定してサポートすることもできます。

詳しくは、「Zendeskで複数のブランドを設定するためのガイド」をお読みください。

手順2： ZendeskでWeb Widgetをブランドに追加

Web Widgetはマルチブランドをサポートしています。 これは次のように機能します。

• 顧客はブランドごとに1つのWeb Widgetを持つことができます
• 各Web Widgetは、以下のもので構成されています。
• コードの固有のコードスニペット（それぞれのブランドのWebサイトにアクセスするため）
• そのウィジェットの一連のカスタマイズ/設定
• （マルチブランドの）すべてのWeb Widgetsが1つのZendesk Chatアカウントを共有します。 エージェントのチャットウィンドウに表示するために、特定のブランド名がタグとしてChatに渡されます（コンテキスト用）。

手順3： Web Widgetを使用してチャットを部門にルーティングする

各ブランドでWeb Widgetを有効にしたら、すべてのブランドをサポートするようにZendesk Chatアカウントを設定する必要があります。

Zendesk Chatウィジェットと同様に、部門を作成してエージェントを追加した後は、ZendeskのJavaScript APIを使用して、各ブランドのWebサイトで受信したチャットをそれぞれ対応する部門に自動的にルーティングする必要があります。

Webページに追加する必要のあるAPIスクリプトは次のとおりです。

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(c){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write(''),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","mysubdomain.zendesk.com");

zE(function() {

$zopim(function() {

$zopim.livechat.setOnConnected(function() {

var department_status = $zopim.livechat.departments.getDepartment('Obscura');

if (department_status.status == 'offline') {

// アカウントのステータスを「オフライン」に設定します

$zopim.livechat.setStatus('offline');

// ウィジェットを非表示または非表示相当にします

$zopim.livechat.hideAll();

} else {

// 部門はオンラインです（その部門で少なくとも1人のエージェントはオンラインです）

// 自動的にタグを追加します

$zopim.livechat.addTags('Obscura');

// プリチャットフォームのドロップダウンリストで部門を選択するオプションを非表示にします

$zopim.livechat.departments.filter('');

// 自動的に部門を設定します

$zopim.livechat.departments.setVisitorDepartment('Obscura');

}

});

});

});

大きな違いは、Web Widgetは対応する部門がオフラインであるかどうかを自動的に検出し、問い合わせフォームのみを提供することです。 スクリプトのこれ以外の部分はほとんど変わりません。

手順4： Web Widgetをカスタマイズする

Chatウィジェットのように、ブランドに合わせてWeb Widgetをカスタマイズしたい場合、

上記と同じAPIコマンドを使用できますが、次のコードを追加する必要があります。

$(document).ready(function() {

これによりWeb Widget/JavaScript APIが起動され、カスタマイズの変更が行われます。

これ以外のAPIスクリプトは、ウィジェットのカスタマイズに使用したものと似ています。

zE(function() {

//Zopim API

$zopim(function() {

$zopim.livechat.theme.setColors({badge: ‘#FFFFFF‘, primary: ‘#000000‘});

$zopim.livechat.theme.reload(); // apply new theme settings

});

//End Zopim API

});

});

次のステップ： マルチブランドのセットアップ（パート3）： ベストプラクティス