サポートを提供する場合、特にBtoB（対企業）サポートでは、アカウントに接続中のユーザーの権限に応じて、ナレッジベース内の特定のコンテンツや問い合わせフォームの閲覧や使用を制限することはよくあります。たとえば、複数の企業をサポートしている場合、B社のナレッジベース記事をA社に表示することは望ましくありません。さらに、C社専用のチケットフォームはC社だけに表示する必要があります。または、D社が専用のメールテンプレートを使用したいかもしれません。各社それぞれでカスタマイゼーションを行っているため、会社ごとにトップに表示する項目を変える必要があります。

今回は、Zendesk Supportでエンドユーザーのナレッジベース、メールテンプレート、チケットフォームを簡単にカスタマイズする方法をご紹介します。さらに、シングルサインオン（SSO）を使ってこのプロセスを自動化する方法を紹介します。

次の4つのセクションに分けて説明します。

  • JSON Webトークンを設定してシングルサインオンを有効にする
  • アクセス制限付きのナレッジベースを作成する
  • ヘルプセンターのテーマをカスタマイズしてチケットフォームの表示/非表示を切り替える
  • エンドユーザーに送信するメールを組織に基づいてカスタマイズする
  • 最終的な結果
メモ：この記事で取り上げるZendesk Supportのチケットフォーム機能は、現時点ではProfessional生産性向上パックアドオンまたはEnterpriseで利用できます。この記事の残りの部分は、チケットフォームを使わなくても参考になります。

JSON Webトークンをセットアップしてシングルサインオンを有効にする

プロセスを簡単にするため、ここではシングルサインオンを使用して、データベースに既にある情報に基づいてエンドユーザーを作成します。たとえば、BlueBerry社で働いているTravis Bickle氏をVIP顧客と見なしており、その情報がすでにデータベースで利用可能だとします。Bickle氏をZendesk Supportのユーザーとして作成し、適切な組織に所属させます。

次に、その組織に、ナレッジベースの記事やチケットフォームへのアクセス制限を設定します。

  1. いずれかのZendesk製品で、一番上のメニューバーでZendesk製品アイコン（）をクリックし、「管理センター」を選択します。
  2. 左側のサイドバーにあるセキュリティアイコン（）をクリックし、「シングルサインオン」タブをクリックします。
  3. 「JSON Webトークン」の場合は、「設定」をクリックします。
  4. このガイドに従って、ID管理システムとZendesk Supportの間にJSON Webトークンを設定します（Zendeskのオープンソーススクリプトをご活用ください）。
  5. JWTペイロードにorganization属性を含めることで、エンドユーザーを毎回正しい組織で作成することができます。
JWT claims hash: {"iat"=>xxx, "jti"=>yyy, "name"=>"Travis Bickle", "email"=>"t.bickle@gmail.com", "external_id"=>"5678", "organization"=>"BlueBerry", "tags"=>"vip",  "locale_id"=>"8"}

上の図は、エンドユーザーのプロフィールタグ「vip」を使って、BlueBerry社のBickle氏に応答している例です。たとえば、エンドユーザーがWebサイトに接続してSupportリンクをクリックした時点で、Zendesk Supportに以下のような正しい情報を持つエンドユーザーアカウントが作成されます。

 

制限付きのナレッジベースを作成する

ヘルプセンターの大きなメリットの1つは、1つのZendesk Supportインスタンスを介して、複数のナレッジベースを作成し、エンドユーザーの言語、タグ、組織ごとにアクセスを制限できることです。ここでは、Travisの組織BlueBerry社に焦点を当てて説明します。

  1. Zendeskに管理者としてサインインし、サイドバーにあるヘルプセンターアイコン（）をクリックします。
  2. ヘルプセンターのコンテンツを作成し、この例のようにBlueBerry専用のセクションを追加します。
  3. その専用セクションへのアクセスを、BlueBerryの従業員だけに制限します。

これで、BlueBerryの組織内のエンドユーザーだけが、このコンテンツにアクセスできるようになります。

さらに細やかに制限を課すこともできます。たとえば「vip」タグが付けられたをエンドユーザーに基づいてアクセスを制限することもできます。同じヘルプセンター内に、多くの可能性があります。ここでは、とりあえず、シンプルな制限のままにします。

 

ヘルプセンターのテーマをカスタマイズしてチケットフォームの表示/非表示を切り替える

チケットフォームは、すべてのエンドユーザーがネイティブで表示できるか、あるいはまったく表示できないかのいずれかです。したがって、チケットフィールドを作成してフォームに追加し、JavaScriptを使用して、接続されているエンドユーザーに基づいてフォームを自動的に表示/非表示にする必要があります。

  1. サイドバーの管理アイコン（ ）をクリックし、「管理」>「チケットフィールド」を選択します。
  2. チケットフィールドを作成します。 エンドユーザーに表示されるように、フィールドを「編集可能」に設定することを忘れないでください。
  3. 少なくとも2つのチケットフォームを作成します。 エンドユーザーに表示されるようにすることを忘れないでください。
  4. 次に、BlueBerryという組織名、特定のBlueBerryチケットフォームID、そしてJavaScriptをヘルプセンターに追加します。 

同僚のRobbertが、フィールドの表示/非表示の方法を説明したヒントを公開しています。こちらをご覧ください。

チケットフォームのIDを探す

  1. サイドバーの管理アイコン（）をクリックし、「管理」>「チケットフォーム」を選択します。
  2. チケットフォームのリストから適切なチケットフォームを選択します。
  3. URLの最後のスラッシュの後にあるID番号を見つけます。

組織名を探す

  1. サイドバーの管理アイコン（）をクリックし、「管理」>「メンバー」を選択します。
  2. 正しい組織名を見つけるために、組織をブラウズまたは検索します。ここでは、「BlueBerry」を例に説明します。

JavaScriptで楽しむ

$(window).load(function() {
   var i = 0;
   var cZendesk = false; //assume user is not part of the BlueBerry Organization
   //reserve space for additional organizations
   var checkExist = setInterval(function() {
      i++;
      if ($("a.nesty-input").length){
         clearInterval(checkExist);
         $("a.nesty-input").each(function() {
            $(this).bind( "click", function() {
               for (var c in HelpCenter.user.organizations) {
                  if (HelpCenter.user.organizations[c].name == "BlueBerry"){
                     cZendesk = true; //if user is part of the organization called "BlueBerry", then set its variable to true.
                  }
                  //reserve space for additional organizations
                  }
                  if (!cZendesk){
                     $("#TICKET_FORM_ID").remove(); //replace the "TICKET_FORM_ID" with the proper id from the dropdown list. Leave the pound sign intact.
                  }
            //reserve space for additional organizations
            });
         });
      }
      if (i > 10){
         clearInterval(checkExist);
      }
   }, 100);
});

重要! 上記のコードを編集する必要があります。次の手順に従ってください。

  1. "TICKET_FORM_ID"を上記で見つけた実際のチケットフォームのIDに置き換えます。
  2. 「BlueBerry」を、チケットフォームに表示させたい実際の組織名に置き換えます。
  3. 上記のコードブロックをコピーします。
  4. コードをヘルプセンターのJavaScriptセクションに貼り付けます。
  5. テンプレートを保存し、変更を公開して効果を確認します。

送信メールの外観をカスタマイズする

この操作は任意ですが、BlueBerryからTravisに送信されるメールと、「レギュラー」のお客様に送信されるメールとで、外観や印象を変えることもできます。これを実現するには、リキッドマークアップとトリガを使用します。

  1. サイドバーの管理アイコン（）をクリックし、「ビジネスルール」>「トリガ」を選択します。
  2. この例では、条件付きのトリガを作成してみましょう。
  • チケット ＝ 作成された
  • 組織 = BlueBerry
  • そしてアクション：
  • 「blueberry」タグを追加
  • 会社のロゴを追加した場合は、「チャネル」>「メール」の下のメールテンプレートで削除することもできます。
  • トリガに戻り、「リクエスタへの通知 - リクエスト受信」と呼ばれるデフォルトのトリガを見つけ、それを複製します。
  • 条件では、次のように追加します。
  • タグには以下の値のいずれかが含まれています - blueberry
  • アクションまでスクロールダウンして、送信されるメールを変更します。

これは元のコンテンツです:

Your request ({{ticket.id}}) has been received and is being reviewed by our support staff.<br /><br />To add additional comments, reply to this email.<br /><br />

これは新しいコンテンツです:

{% capture tags %}
{{ ticket.tags }}
{% endcapture %}
{% if tags contains 'blueberry' %}
<img src="https://LINK/TO/LOGO.png" /></center>
{% endif %}

Your request ({{ticket.id}}) has been received and is being reviewed by our support staff.<br /><br />To add additional comments, reply to this email.<br /><br />

リキッドマークアップを使ってチケットのタグをキャプチャし、チケットのタグに基づいて異なるロゴを追加するための条件を追加しています。リキッドマークアップのサンプルがこちらにあります。

最終的な結果

これで完成です。このカスタマイズを通じて、ID管理システムからSSOを介してエンドユーザーを自動的に追加することができます。エンドユーザーは、表示を許可されている情報にのみアクセスでき、それ以外の情報にはアクセスできません。

では、BlueBerry社のエンドユーザーであるTravisに表示されるコンテンツ、別の組織の他のエンドユーザーに表示されるコンテンツとを比較してみましょう。

カスタマイズ前（チケット送信画面）：

カスタマイズ後（チケット送信画面）：

カスタマイズ前（ナレッジベース）：

カスタマイズ後（ナレッジベース）：

カスタマイズ前（メール）：


カスタマイズ後（メール）：

Powered by Zendesk