Zendesk Guide のテーマから動的コンテンツを参照してみた
はじめに
こんにちは、筧( @TakaakiKakei )です。
Zendesk Guide は、Zendesk のヘルプセンター機能を提供するサービスです。 Zendesk Guide のテーマを編集することで、ヘルプセンターをカスタマイズをすることができます。
ヘルプセンターをGuideで構築する方法：設定 – Zendeskヘルプ
また動的コンテンツは、サポートで複数の言語を提供する際に利用します。
動的コンテンツのプレースホルダ(例：{{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 に以下のコードを追加します。
"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 に以下のコードを追加します。
..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月に入り、そろそろ年末ですね。 よかったら、当該方法を使って「年末年始の営業日及び窓口のご案内」などをしてみてはいかがでしょうか。
それではまた！
