Zendesk Guide のテーマから動的コンテンツを参照してみた

Zendesk Guide のテーマから動的コンテンツを参照する際のハマりどころをご紹介します。また Zendesk の新規リクエストページ上部にアナウンスを掲載し、GUI で表示有無や表示内容を変更をする方法もご紹介します。

Takaaki Kakei

2022.12.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは、筧( @TakaakiKakei )です。

Zendesk Guide は、Zendesk のヘルプセンター機能を提供するサービスです。 Zendesk Guide のテーマを編集することで、ヘルプセンターをカスタマイズをすることができます。

また動的コンテンツは、サポートで複数の言語を提供する際に利用します。動的コンテンツのプレースホルダ(例：{{dc.password_help}})をメッセージのテキストに置き換えることで、システム側が動的コンテンツを参照して、予め用意しておいた言語のコンテンツを表示できます。

動的コンテンツでの複数の言語のサポート – Zendeskヘルプ

今回、Zendesk Guide のテーマから動的コンテンツを参照して、ヘルプセンター上で複数言語のサポートを実現したので、その内容をご紹介します。

何が嬉しいか

Zendesk Guide のテーマに独自のカスタマイズする際には、コードを編集する必要があります。ただ動的コンテンツを利用することで、一度コードを書いてしまえば、対象内容の編集は管理画面で GUI で編集できるようになり、コード編集が不要になるので、変更の手間を減らすことができます。またコード上で言語に応じた条件分岐が不要になるので、コードがスッキリすることも期待できます。

難しかった箇所

難しかった箇所を予めご紹介します。動的コンテンツを作成すると、(例：{{dc.password_help}})のようなプレースホルダが与えられます。 Zendesk Support のマクロや自動化で利用する場合は、上記プレースホルダをそのまま記載すれば動作します。一方で、Zendesk Guide のテーマの場合は、(例：{{dc "password_help"}})と記載するのを知らず、動的コンテンツの参照をするのに時間がかかりました。

やってみた

成果物

Zendesk の新規リクエストページ上部にアナウンスを掲載し、チェックボックスで表示有無を切り替えるコードを通じて、Zendesk Guide のテーマからの動的コンテンツを参照する方法をご紹介します。

アナウンス内容は後述の動的コンテンツで制御します。
アナウンス表示有無は、テーマのカスタマイズページを開いた後の左袖にある、announcement_group_labelのチェックボックスによって制御します。上図の例の場合、枠線と2つ目のアナウンスのみが表示されています。
- show_announcements: アナウンスを表示するときはチェックをつけます。枠線が表示されます。
- show_announcement1: 1つ目のアナウンスを表示するときはチェックをつけます。
- show_announcement2: 2つ目のアナウンスを表示するときはチェックをつけます。

参考

Zendesk Guide のテーマから動的コンテンツを参照する方法は、下記の公式ページを参考しました。

ヘルプセンターのコンテンツのローカライズ – Zendeskヘルプ

新規リクエスト画面上にアナウンスを掲載する方法は、下記ブログを参考させていただきました。

Zendeskのお問い合わせフォームに休業のお知らせを表示させる

動的コンテンツを用意

「Zendesk管理センター」を開き、検索窓から「動的コンテンツ」を検索して開きます。
「項目を追加」をクリックして、以下の動的コンテンツを作成します。バリアントは必要な言語分用意ください。

hc::new_request::form_announcement_title1
- 1つ目のアナウンスのタイトル用
hc::new_request::form_announcement_desc1
- 1つ目のアナウンスの説明
hc::new_request::form_announcement_url1
- 1つ目のアナウンスのURL
hc::new_request::form_announcement_title2
- 2つ目のアナウンスのタイトル用
hc::new_request::form_announcement_desc2
- 2つ目のアナウンスの説明
hc::new_request::form_announcement_url2
- 2つ目のアナウンスのURL

動的コンテンツを作成して開くと、画面上部にプレースホルダが表示されます。当該プレースホルダは後ほどコードで利用します。

編集対象のテーマをローカルにダウンロード

「Guide管理」で、サイドバーにあるデザインのカスタマイズアイコンをクリックします。
編集対象用のテーマを用意します。
対象テーマをローカルにダウンロードして、お好みのコードエディタで開きます。

ローカルでコードを編集

manifest.json の編集

manifest.json に以下のコードを追加します。

manifest.json

"settings": [
    {
..snip..
    },
    {
      "label": "announcements_group_label",
      "variables": [
        {
          "identifier": "show_announcements",
          "type": "checkbox",
          "description": "show_announcements_description",
          "label": "show_announcements_label",
          "value": false
        },
        {
          "identifier": "show_announcement1",
          "type": "checkbox",
          "description": "show_announcement1_description",
          "label": "show_announcement1_label",
          "value": false
        },
        {
          "identifier": "show_announcement2",
          "type": "checkbox",
          "description": "show_announcement2_description",
          "label": "show_announcement2_label",
          "value": false
        }
      ]
    }
  ]
}

settings の配列の中にハイライトの箇所を追加します。これによって、テーマのカスタマイズページの左袖にチェックボックスが現れます。
各項目は、{{settings.各identifier}}のような形で、コードから参照ができます。例えば、{{settings.show_announcements}}の場合、デフォルトでは、false を返します。左袖のチェックボックスにチェックをつけると、true を返します。
各identifier は後述の new_request_page.hbs 上から参照します。

設定パネルのカスタマイズ（Guide ProfessionalおよびEnterprise） – Zendeskヘルプ

new_request_page.hbs の編集

new_request_page.hbs に以下のコードを追加します。

new_request_page.hbs

..snip..

  {{#if settings.show_announcements}}
  <div class="announcements">
    {{#if settings.show_announcement1}}
    <p>
      <strong>{{dc "hc-new_request-form_announcement_title1"}}</strong>
      <br>{{dc "hc-new_request-form_announcement_desc1"}}
      <br><a href="{{dc "hc-new_request-form_announcement_url1"}}" target="_blank">{{dc "hc-new_request-form_announcement_url1"}}</a>
    </p>
    {{/if}}
    {{#if settings.show_announcement2}}
    <p>
      <strong>{{dc "hc-new_request-form_announcement_title2"}}</strong>
      <br>{{dc "hc-new_request-form_announcement_desc2"}}
      <br><a href="{{dc "hc-new_request-form_announcement_url2"}}" target="_blank">{{dc "hc-new_request-form_announcement_url2"}}</a>
    </p>
    {{/if}}
  </div>
  {{/if}}

  <div class="form">
    {{request_form}}
  </div>
</div>

ハイライトの箇所を追加します。これによって、新規リクエストページの上部にアナウンスを表示する準備が整います。
manifest.json の設定を参照するには、{{settings.各identifier}}と記載します。今回は当該情報を元に条件分岐したかったので、if 文も利用しています。
動的コンテンツの参照をするには、{{dc.hc-new_request-form_announcement_title1}}ではなく、{{dc "hc-new_request-form_announcement_title1"}}のように記載する必要があります。

編集対象のテーマをアップロード

「Guide管理」で、サイドバーにあるデザインのカスタマイズアイコンをクリックします。
「テーマを追加」から編集したテーマをアップロードします。
アップロードしたテーマの「カスタマイズ」を開き、announcement_group_labelのチェックボックスでアナウンスの表示有無を調整します。

おわりに

最後まで読んでいただきありがとうございます。

12月に入り、そろそろ年末ですね。よかったら、当該方法を使って「年末年始の営業日及び窓口のご案内」などをしてみてはいかがでしょうか。

それではまた！

Zendesk Guide のテーマから動的コンテンツを参照してみた

はじめに

何が嬉しいか

難しかった箇所

やってみた

成果物