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

CS界隈でも広く利用されているカスタマーサービスソフトウェア「Zendesk」を利用されている方向けに特化した内容です。

私の自己紹介はこちらに載っています。もしご興味があれば見ていってください。

profile

この記事の対象読者

• Zendesk Guideを利用している
• 休日のお知らせを問い合わせフォームなどに掲出したい方

ゴールデンウィーク、夏期、年末年始休暇のお知らせを掲載するとき、ソースコードを毎回いじることなく誰でも管理できるようにしたい

顧客対応窓口の休暇のお知らせを顧客にお知らせする際、毎回Zendesk Guideのテーマテンプレートのソースコードを更新して対応している場合、対応が属人的になったり、お知らせを出すまでに時間がかかってしまうケースがあります。

そこで、この記事では、ZendeskGuideの設定パネルを用いて、ZendeskGuideの設定メニュー画面上で以下2つのことが実現する方法を解説します。

• お知らせの掲載ON/OFFを行えるようにする
• お知らせする内容を変更できるようにする

完成型

以下の画面のように、ZendeskGuideの左カラムにお知らせ掲載用のメニューを作成し、チェックボックスにて、掲載化・非掲載化ができるようになります。

また、掲載する文言についても左カラム内にて修正が可能になります。

お知らせ領域の実装のレシピ

• 修正を加えるZendeskGuideテーマのテンプレートをダウンロード
• manifest.jsonファイルの加筆修正
• new_request_page.hbs ファイルの加筆修正
• テーマのロード
• Zendesk GuideのGUI画面での挙動確認
• (任意)日本語化する手順

1. 修正を加えるZendeskGuideテーマのテンプレートをダウンロード

Zendesk Guideのテンプレートを開発するため、今利用中のテンプレートのダウンロードを行います。

Zendesk Guideの管理画面にログイン後、テーマメニューを開いて、ライブテーマの「･･･」>「ダウンロード」を実施します

ダウンロードしたファイルはこのような構成ファイルです。このファイルの中で「 manifest.json 」と「 templates > new_request_page.hbs 」ファイルの修正を開始します。

2. manifest.jsonファイルの加筆修正

manifest.json ファイルを、Visual Studio Code などのエディタで開くと、以下画像のようなファイル構成になっています。

manifest.jsonファイルの役割の一つに、Zendesk Guideのテーマ編集メニュー欄に表示するメニューを定義する機能があります。

例えば、「色」というメニューは、manifest.json上では「 "label":"colors_group_label" 」で定義しています。「フォント」というメニューは、「 "label":"fonts_group_label" 」で定義しています。

このように、manifest.json内の "settings":[●●●●●●] 領域に追加したい定義を加えることで、Guideのテーマ領域に情報を追加していくことが可能です。

まず試しに、「お知らせメニュー」を追加し、この後利用するお知らせON・OFFを切り替えるチェックボックスの要素も追加してみます。以下のような情報を書き加えていきます。

設定オブジェクトの構造については、設定パネルのカスタマイズ – Zendeskヘルプ を参照してください。

,
{
  "label": "announcement_group_label",
  "variables": [
    {
      "identifier": "show_announcement",
      "type": "checkbox",
      "description": "show_announcement_description",
      "label": "show_announcement_label",
      "value": false
    }
  ]
}

上記内容を追加してファイルを保存し、ダウンロードしたファイルをフォルダごとzip化します。

ZendeskGuideのテーマメニューを開いて「テーマを追加 > テーマをインポート」より、zip化したデータをロードします。

ロード後、テーマライブラリに追加されるので、「カスタマイズ」を押下します。

テーマの左カラムメニューに、先ほど追加した項目が表示されれば成功です！

この流れで、チェックボックス以外の要素もmanifest.jsonに追加していきます。

追加するのは、「お知らせのタイトル」「休業期間」「URLタイトル」「URL」の4つのフィールドです。これらの情報を variables フィールドに追加します。

チェックボックスの領域も含めた完成型はこちらです。

ファイル作成後、zipファイル化して、ZendeskGuideのテーマに登録すると、上記のようにテキストエリアの領域が左カラムメニューに追加されていれば成功です！

3. new_request_page.hbs ファイルの加筆修正

この工程では、実際にお問い合わせフォームのファイルを編集して、manifest.jsonで加えた定義などをフォームに掲載する処理を追記していきます。

今回修正を加えるファイルは「 new_request_page.hbs 」ファイルです。また、見た目の調整も行うため、「 style.css 」ファイルも修正を行います。

※「 new_request_page.hbs 」はお問い合わせフォーム画面のファイルです。各テーマファイルの構造については、ヘルプセンターテーマのカスタマイズ – Zendeskヘルプ をご参照ください

今回は、new_request_page.hbs ファイルに対して、以下コードを追加します。

こちらの構造について簡単に解説します。

• {{#if settings.show_announcement}} 〜 {{/if}} こちらの構文で文章を挟み込むことで、今回manifest.jsonにセットした「 show_announcement 」のチェックボックスに応じたIF構文が成立します。
• チェックボックスをONにするとIFで囲われた領域が表示され、OFFにすると非表示の状態に切り替わります。
• IF構文内では、基本的に変更が起こらない日本語を書き込みつつ、タイトルや休業期間等の可変する領域については、manifest.jsonにセットしたプロパティを埋め込んでいきます。
• 各プロパティを埋め込む際には {{settings.xxxxxx}} というプレースホルダーです。

差し込む箇所ですが、今回は、 <h1>〜</h1> のすぐ後に置いてみます。

続いて、 style.css ファイルには、お知らせ領域を装飾する記述を追記します。

今回はこのような記述で設定しています。

.holidays{
  border: dotted 2px rgb(0, 0, 0);
  padding:10px 10px 10px 10px;
  max-width: 650px;
  font-size:14px;
  line-height:24px;
  margin-bottom: 10px;
}

3. テーマのロード

上記内容を追加してファイルを保存し、ダウンロードしたファイルをフォルダごとzip化します。

ZendeskGuideのテーマメニューを開いて「テーマを追加 > テーマをインポート」より、zip化したデータをロードします。

ロード後、テーマライブラリに追加されるので、「カスタマイズ」を押下します。

テーマの左カラムメニューに、先ほど追加した項目が表示されれば成功です！

4. Zendesk GuideのGUI画面での挙動確認

最後に、プレビュー画面上でお知らせの掲載が出ることの確認を行います。

「カスタマイズ」から開いた画面上のメインカラムにて「テンプレート：新規リクエストページ」および「プレビューロール：エンドユーザー」を選択して、お問い合わせフォーム画面を表示します。

左のカラムのチェックボックスをONにするとプレビュー画面上にお知らせが出ることを確認してください。

問題なく表示されていれば、左カラムにて表示したいメッセージ内容に更新し、保存をして無事にリリース完了です。お疲れ様でした。

(任意)日本語化する手順

左メニューについてもカスタマイズが可能です。日本語名称にする場合は、 translations > ja.json ファイルの編集を行います。

このファイルをVS Codeにて開きます。

開いたファイルにて、今回新設した各種メニューに該当する日本語名称を追記します。

今回は以下のような内容で追記しました。

編集したファイルにてテーマをZendeskGuideに再ロードして、左カラムに日本語が反映されていれば成功です！

参考：

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

テーマをエクスポートすると、エクスポートされたファイルには manifest.json という名前のファイルが含まれます。このファイルが、Guideのテーマの設定パネルを定義します。 このマニュアルでは、マニフェストファイルとは何か、このファイルを使用して何ができるかについて説明します。また、仕様のリファレンスも提供します。たとえば、テーマをエクスポートし、テキストエディタで manifest.json ファイルを開きます。 次のトピックについて説明します。 テーマをエクスポートすると、エクスポートされたファイルには manifest.jsonという名前のファイルが含まれます。このマニフェストファイルを使用して、Guideのテーマの 設定パネル を定義できます。 パネル内で既存の設定を変更することも、新しい設定を作成することもできます。次の例では、マニフェストファイルは、"＃30aabc"のデフォルト値を color_brand_text 設定に割り当てます。 "settings": [ { "label": "Colors", "variables": [ { "identifier": "color_brand_text", "type": "color", "description": "color_brand_text_description", "label": "color_brand_text_label", "value": "#30aabc" }, ... ] }, ...

support.zendesk.com

share this page

Copyright ©︎ Takao Tatematsu. All Rights Reserved. This website is made with 🄽 Notion and ⚡️ Super