CS界隈でも広く利用されているカスタマーサービスソフトウェア「Zendesk」を利用されている方向けに特化した内容です。
私の自己紹介はこちらに載っています。もしご興味があれば見ていってください。
この記事の対象読者
- Zendesk Guideを利用している
- 休日のお知らせを問い合わせフォームなどに掲出したい方
ゴールデンウィーク、夏期、年末年始休暇のお知らせを掲載するとき、ソースコードを毎回いじることなく誰でも管理できるようにしたい
顧客対応窓口の休暇のお知らせを顧客にお知らせする際、毎回Zendesk Guideのテーマテンプレートのソースコードを更新して対応している場合、対応が属人的になったり、お知らせを出すまでに時間がかかってしまうケースがあります。
そこで、この記事では、ZendeskGuideの設定パネルを用いて、ZendeskGuideの設定メニュー画面上で以下2つのことが実現する方法を解説します。
- お知らせの掲載ON/OFFを行えるようにする
- お知らせする内容を変更できるようにする
完成型
以下の画面のように、ZendeskGuideの左カラムにお知らせ掲載用のメニューを作成し、チェックボックスにて、掲載化・非掲載化ができるようになります。
/w=3840,quality=90,fit=scale-down)
また、掲載する文言についても左カラム内にて修正が可能になります。
.gif?w=876)
お知らせ領域の実装のレシピ
- 修正を加える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化したデータをロードします。
/w=1080,quality=90,fit=scale-down)
ロード後、テーマライブラリに追加されるので、「カスタマイズ」を押下します。
/w=1080,quality=90,fit=scale-down)
テーマの左カラムメニューに、先ほど追加した項目が表示されれば成功です！
この流れで、チェックボックス以外の要素もmanifest.jsonに追加していきます。
追加するのは、「お知らせのタイトル」「休業期間」「URLタイトル」「URL」の4つのフィールドです。これらの情報を variables フィールドに追加します。
チェックボックスの領域も含めた完成型はこちらです。
,
{
"label": "announcement_group_label",
"variables": [
{
"identifier": "show_announcement",
"type": "checkbox",
"description": "show_announcement_description",
"label": "show_announcement_label",
"value": false
},
{
"identifier": "form_announcement_title",
"type": "text",
"description": "form_announcement_title_description",
"label": "form_announcement_title_label",
"value": "○○休暇期間"
},
{
"identifier": "form_announcement_date",
"type": "text",
"description": "form_announcement_date_description",
"label": "form_announcement_date_label",
"value": "yyyy年mm月dd日（曜日） 〜 yyyy年mm月dd日（曜日）"
},
{
"identifier": "form_announcement_url_title",
"type": "text",
"description": "form_announcement_url_title_description",
"label": "form_announcement_url_title_label",
"value": "URL名(例:○○期間中のサポート対応・発送について)"
},
{
"identifier": "form_announcement_url",
"type": "text",
"description": "form_announcement_url_description",
"label": "form_announcement_url_label",
"value": "url"
}
]
}
ファイル作成後、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}}
<div class="holidays">
<p>
<strong>{{settings.form_announcement_title}}
<br>{{settings.form_announcement_date}}</strong>
<br>上記期間は規模を縮小して対応しております。
<br>お問い合わせへの返信までに通常よりお時間をいただく場合がございますので、ご了承ください。
<br>商品の発送につきましては、<a
href="{{settings.form_announcement_url}}">{{settings.form_announcement_url_title}}</a>をご確認ください。
</p>
</div>
{{/if}}こちらの構造について簡単に解説します。
{{#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画面での挙動確認
最後に、プレビュー画面上でお知らせの掲載が出ることの確認を行います。
「カスタマイズ」から開いた画面上のメインカラムにて「テンプレート：新規リクエストページ」および「プレビューロール：エンドユーザー」を選択して、お問い合わせフォーム画面を表示します。
/w=3840,quality=90,fit=scale-down)
左のカラムのチェックボックスをONにするとプレビュー画面上にお知らせが出ることを確認してください。
問題なく表示されていれば、左カラムにて表示したいメッセージ内容に更新し、保存をして無事にリリース完了です。お疲れ様でした。
.gif?w=876)
(任意)日本語化する手順
左メニューについてもカスタマイズが可能です。日本語名称にする場合は、 translations > ja.json ファイルの編集を行います。
このファイルをVS Codeにて開きます。
開いたファイルにて、今回新設した各種メニューに該当する日本語名称を追記します。
今回は以下のような内容で追記しました。
"announcement_group_label":"お知らせ領域",
"show_announcement_description":"お知らせのON・OFFを切り替えます",
"show_announcement_label":"お知らせ有効化",
"form_announcement_title_description":"お知らせの概要を書きます",
"form_announcement_title_label":"お知らせ概要",
"form_announcement_date_description":"期間情報を書きます",
"form_announcement_date_label":"休暇期間",
"form_announcement_url_title_description":"URLページタイトル",
"form_announcement_url_title_label":"URLページタイトル",
"form_announcement_url_description":"URL",
"form_announcement_url_label":"URL"
編集したファイルにてテーマをZendeskGuideに再ロードして、左カラムに日本語が反映されていれば成功です！
/w=750,quality=90,fit=scale-down)
参考：
Copyright ©︎ Takao Tatematsu. All Rights Reserved. This website is made with 🄽 Notion and ⚡️ Super