マルチブランドのセットアップ（パート1）：レガシーZendesk Chat（スタンドアロン）

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

はじめに

複数のブランドでさまざまな製品ラインを揃えた企業の場合、 すべての顧客に一貫して高品質のサポートを提供するには、マルチブランド戦略を検討する必要があります。 マルチブランド企業であるということは、基本的に、1つの親ブランドの下で2つ以上の製品を販売、マーケティング、およびサポートすることを意味します。 これらの各ブランドに対して、それぞれ異なる業務を管理するのは難しい場合があります。 Zendeskを使用する利点は、サポート業務を1か所で集中管理できることです。

この記事では、1つの親組織が複数の製品ライン、ブランド、さらにはさまざまな地域のWebサイトを管理するシナリオについて説明します。 たとえば、ある企業が、製品は1つしかないけれども、世界で10か所のWebサイト（異なる言語とタイムゾーン）で販売しているとします。 これら10サイトに対して一貫して集中管理されたサポートを提供するには、マルチブランド化が欠かせません。

メモ：

手順1： ChatをWebサイトに追加する

Webサイトの数にかかわらず、すべてのサイトに共通のZendesk Chatアカウントを使用できます。

ただし、複数のブランドやWebサイトでChatを使用するには、すべてのWebサイトに同じZendesk Chatの埋め込みコードを追加する必要があります。

手順2： 各ブランドの部門を作成する

埋め込みコードを追加したら、マルチブランドワークフローの設定を行います。

最初のステップはブランドの部門を設定することです。 それには、Webサイごとに専用の部門を作成します。

たとえば、Obscura、Boomerang、Jubileeというブランド/Webサイトがある場合は、それぞれ「Obscura」、「Boomerang」、「Jubilee」という3つの部門を作成できます。

手順3： 各部署にエージェントを割り当てる

各ブランドに部門を設定したら、次は、エージェントを組織します。特定のブランドの専門知識を持つ担当者を対応する部門に割り当てます。

Webサイトに到達するトラフィックの量に応じて、各部署にそれぞれ異なる数のエージェントを割り当てるとよいでしょう。また、エージェントを割り当てる際には、それぞれのWebサイト/部門に必要なスキルと知識を考慮します。

手順4： チャットを各部門にルーティングする

部門を作成してエージェントを割り当てた後は、JavaScript APIを使用して、各ブランドのWebサイトの受信チャットを対応する部門に自動的にルーティングさせる必要があります。

WebサイトのHTMLコードに次のAPIスクリプトを追加する必要があります。以下のコードは、「Obscura」ブランドの場合の例です。

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="//v2.zopim.com/?ABCDEFGH";z.t=+new Date;$.

type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");

$zopim(function() {

$zopim.livechat.setOnConnected(function() {

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

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

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

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

// 2 - ウィジェットを非表示にします

$zopim.livechat.hideAll();

} else {

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

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

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

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

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

}

});

});

このAPIスクリプトは次のことを行います。

部門内のすべてのエージェントがオフラインの場合：

• 1 - ステータスはオフラインに設定される
• 2 - ウィジェットは非表示になる

これにより、ウィジェットが非表示になり、オンラインエージェントいない部門にはチャットが転送されなくなります（たとえば、「Obscura」にオンラインエージェントがいない場合、obscura.comにウィジェットは表示されません）。

部門の担当者がオンラインの場合：

• 3 - 部門のドロップダウンが非表示になる
• 4 - チャットは対応する部門に自動的にルーティングされる

プリチャットフォームを使用することで、顧客は自分の個人情報を入力して部門を選択できます。ただし、顧客を特定の部門に自動的にルーティングするため、APIでは顧客を選択するオプションが削除されています。

スクリプトの最後の部分は、チャットを「Obscura」部門のエージェントに自動的にルーティングします。

手順5： Chatウィジェットをカスタマイズする

ブランドが複数ある場合は、それぞれ独自のロゴとデザインを持つウィジェットを作成します。

各ブランドとそのWebサイト用にChatウィジェットをカスタマイズするには、当社のJavaScript APIを使用する必要があります。

• setColorパラメータを使って色を変更できます。
• または、setImageパラメータを使って別の画像に変えることもできます。
• setColor、setSize、およびSetTitleパラメータを使用してチャットウィンドウのデザインを変更することもできます。

例：

次のAPIスクリプトを使用して、ページによってチャットウィジェットの色を変更できます。

$zopim(function() {

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

$zopim.livechat.theme.reload(); // 新しいテーマの設定を適用します

});

このスクリプトを使用して、チャットバッジ（「バッジ」）または最小化されたチャットウィジェット（「プライマリ」）の色を変更できます。 選択した色は16進形式で指定する必要があります。

同様に、チャットウィンドウの配色も変更できます。

$zopim(function() {

$zopim.livechat.window.setColor(‘#FFCC00‘);

$zopim.livechat.theme.reload(); // 新しいテーマの設定を適用します

});

ZendeskのJavaScript APIにはさまざまなカスタマイズオプションが用意されています。

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