チケットやヘルプセンターの記事通知など、アカウントから送信されるほとんどすべてのメール通知は、メールテンプレートによって制御されています。サイドカンバセーションのメール通知は、メールテンプレートを使用しません。
メールテンプレートは、HTMLとプレーンテキストの両方の形式に対応しています。両方のフォーマットがすべてのメールに含まれています。どちらのフォーマットがエンドユーザーに表示されるかは、ユーザーのメールクライアントの設定によって異なります。
HTMLテンプレートは、簡単なスタイル変更をいくつか行うことで、自社のブランド設定に合わせてカスタマイズできます。またプレーンテキストのメールに含まれる情報も編集可能です。
関連記事:
メールテンプレートを編集する
カスタマーに送信するメール通知の外観と操作性をカスタマイズすることができます。通知には、HTMLテンプレートとプレーンテキストのテンプレートがあります。
Enterpriseプランの場合は、メールを実際に使用する前に、サンドボックスでメールに変更を加え、変更をテストすることができます(「サンドボックスでの変更のテスト」を参照)。
- 管理センターで、サイドバーの「 チャネル」をクリックし、「Talkとメール」>「メール」を選択します。
-
メールテンプレートセクションで、「メールにユーザープロフィールの写真を表示する」をクリックすると、メールにユーザープロフィールが表示されます。
すべてのメールクライアントでデフォルトで画像が表示されるわけではありません。
- 必要に応じて、HTMLテンプレートを編集します。
- 必要に応じて、テキストテンプレートを編集します。
- デフォルトのバージョンに戻ってやり直す場合は、それぞれのテンプレートの下にある「デフォルトに戻す」をクリックします。
- ページの下部にある「保存」をクリックします。
メールテンプレートが更新されます。
- ユーザープロフィールの写真を表示する
- チケットリンクを追加または削除する
- メール通知への区切り行の追加と削除
-
リキッドマークアップを使用するメモ:リキッドマークアップはマクロ、トリガ、自動化でサポートされ、チケットの通知(フォロワーに送られるメール通知など)で機能しますが、ヘルプセンターの記事の通知ではサポートされません。リキッドマークアップを使用してメール通知の外観を変更する代わりに、メールテンプレートを複数のブランドで使用する方法もあります。
HTMLテンプレートを編集する
HTMLメールの外観を変更するには、HTMLテンプレートでHTMLおよびCSSを編集します。
ここでは、以下のトピックについて説明します。
HTMLメールの外観を変更する
HTMLテンプレートは、DIVタグとシステムプレースホルダで構成されています。
メールのほとんどの部分は、プレースホルダに挿入される内容から構成されます。
-
{{content}}
は必須プレースホルダなので、削除しないでください。 -
{{delimiter}}
が必要なのは、通知内にメール区切り行を使用している場合だけです。 -
{{styles}}
および{{attributes}}
のプレースホルダは将来使用するためのものです。書字方向が右から左のロケールに対応するスタイルや属性を挿入するために、システムによって使用されることもあります。 -
{{footer}}
はオプションです。
DIVタグはコンテンツにCSSスタイルを適用します。CSSスタイルを追加または修正することで、メール全体の見た目と操作感、区切り行テキスト、またはフッターを変更できます。
テキストの色を変更する場合は、アクセシビリティを考慮し、色に適切なコントラスト比を確保してください。Webアクセシビリティガイドライン(WCAG)の推奨に従い、WebAIMのカラーコントラストチェッカーなどのツールを活用して、テキストと背景のコントラスト比を確認してください。
- 管理センターで、サイドバーの「 チャネル」をクリックし、「Talkとメール」>「メール」を選択します。
-
メールテンプレートセクションで、必要に応じてHTMLテンプレートを編集します。
標準のテンプレートプレースホルダを使用する場合は、プレースホルダ名の一部を入力し、表示される候補から目的のプレースホルダを選択します。
- 「保存」をクリックします。
たとえばフッターのフォントの色を青緑に変更するには、次のように編集します。
... <div style=" color: #009966; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #eeeeee;" > {{footer}}{{footer_link}} </div> ...
次のようなスタイル宣言を使って、16進数値でフォントの色を青緑に設定できます。
color: #009966;
a:hover {color:#FF00FF;}
ただし、CSS擬似クラスはインラインCSSではサポートされておらず、Gmailなどの一般的なメールクライアントではインライン以外のCSSは適用されません。会社のロゴなどの画像をテンプレートに追加するには、画像を参照するIMGタグを挿入します。以下に例を示します。
<img src="http://YOURWEBSITE.com/logo.png"/>
<a href="http://YOURACCOUNT.zendesk.com"><img src="http://YOURWEBSITE.com/logo.png"></a>
- CSS portal(CSSポータル)(Mozilla Developer Network)
- ヘルプセンターのCSSレシピ集
HTMLメールのカスタマイズのガイドライン
HTMLテンプレートは自由にカスタマイズできますが、Zendeskはカスタムコーディングをサポートしていないことに注意してください。2022年6月15日以降に作成されたアカウントの場合、テンプレートはHTML5対応となります。サポートされているHTML5タグの詳細については、www.w3docs.comの「HTML5 Elements Reference」を参照してください。
HTMLメールの設計は、Webブラウザやメールクライアントに応じてHTMLとCSSがレンダリングされる方法が異なるため、簡単なことではありません。書式の中には迷惑メールとして解釈されてしまうものもあります。
- CSS3スタイル宣言は使用しないこと。CSS1またはCSS2のスタイル宣言を使用すること。
- DIVセクションは追加しないこと。
- テキストの書式設定を最小限にすること。太字のテキストが多いと、迷惑メールフィルターが作動する場合があります。
- 画像を大量に追加しないこと(迷惑メールフィルターを作動させるもう1つの要因です)。また使用する画像を縮小しないこと。
- すべての画像にALTタグを使用すること。このタグを使用すると、ユーザーがメールで画像を表示する前に、画像の説明が表示されます。
- 画像の幅と高さがわかっている場合は、それらを設定すること。これにより、画像をダウンロードする前に、メールクライアント側でメールのレイアウト内に画像の表示領域を確保することができます。
- 背景画像はすべてのメールクライアントでサポートされているとは限らないため、情報提供または機能設計を背景画像に依存しないこと。
- 非公開のZendeskアカウント内の画像にはリンクしないこと。メールの受信者が非登録ユーザーでサインインしていない場合、画像は表示されません。
テキストテンプレートを編集する
メールをHTML形式で表示しない場合は、テキスト形式のメールテンプレートを使用します。このテンプレートは次の2つのプレースホルダで構成されます。
{{content}} {{footer}}
{{content}}
プレースホルダには、テキスト区切り文字、チケットタイトル、ビジネスルール(トリガ、自動化、またはマクロ)によって生成されたテキスト、およびチケットコメントが挿入されます。{{footer}}
プレースホルダは省略可能です。不要であれば削除できます。詳しくは「システムプレースホルダについて」を参照してください。
{{delimiter}}
プレースホルダはテキストテンプレートでは必須ではありません。{{content}}
プレースホルダには区切り文字のテキストが含まれています。メールに行を追加したい場合は、テンプレートに追加します。
Thanks for contacting MondoCam Support! {{content}} {{footer}}
テキストテンプレートを編集するには
- 管理センターで、サイドバーの「 チャネル」をクリックし、「Talkとメール」>「メール」を選択します。
- メールテンプレートセクションが表示されるまで、下にスクロールします。
- 必要に応じて、テキストテンプレートを編集します。
- ページの下部にある「保存」をクリックします。
システムプレースホルダについて
通知メールのコンテンツの多くは、Zendeskシステムによって動的に生成されます。動的に生成されるコンテンツは、メールテンプレートのプレースホルダによって表されます。プレースホルダは、{{footer}}
のように、二重括弧で囲まれています。
プレースホルダには、区切り行のテキスト、メールの内容、およびフッターを挿入します
{{delimiter}}
- 「##- 返信メールでコメントを追加する際は、これより上に書いてください -##」のテキスト行が表示されます。古い内容と新しい内容を分けるために、システムにより区切り行が使用されます。ある人がメールに返信すると、返信に含まれる新しい内容がコメントとしてチケットに追加されます。メール区切り行を使用している場合、このプレースホルダはHTMLテンプレートで必須です。「メールの区切り行のカスタマイズ」を参照してください。
{{content}}
- チケットのコメントやユーザープロフィール写真などのメールの内容を表示します。この内容は、トリガや自動化など、ご使用のアカウントからメールを送信するあらゆるものに定義されています。「チケットの更新と通知のためのトリガの作成と管理」を参照してください。
{{quoted_content}}
- 省略可能です。メッセージ履歴を表示します。引用されたコンテンツは、通常、ユーザーのメールアプリケーションでは折りたたまれていますが、ユーザーが展開できます。たとえばGmailの場合、ユーザーは省略記号(...)をクリックします。詳しくは「シンプルなメールスレッドについて」を参照してください。
{{footer}}
- 省略可能です。「本メールはYourZendeskNameから送信されています」という行を表示します。また、エージェントに送られるメールにはチケットのプロパティ(ステータスやリクエスタなど)も表示されます。これらのプロパティはエンドユーザーに送られるメールには表示されません。
{{footer_link}}
- 省略可能です。「Zendesから配信されています」というメッセージ行を表示します。Zendeskという単語は、https://www.zendesk.comへのリンクになっています。
{{styles}}
- 省略可能です。将来使用するため。現在、このプレースホルダは、書字方向が右から左のロケールを検出した場合にスタイルを挿入するために使用されます。
{{attributes}}
- 省略可能です。将来使用するため。現在、このプレースホルダは、書字方向が右から左のロケールを検出した場合に属性を挿入するために使用されます。