Intercomには3つのデフォルトのメールテンプレートが用意されています。しかし、ビジュアルテンプレートデザイナーを使ってカスタマイズしたり、以下で説明するHTMLから新しいテンプレートを作成することも可能です。

アクセスするには、設定 > アウトバウンド > メールテンプレートに移動し、新しいテンプレート > HTMLから作成をクリックしてください。

これでフォントサイズ、種類、色などをブランドに合わせて編集できます。ロゴやヘッダーを上部に追加することも可能です。好きなHTMLやデザインで完全に新しいテンプレートを一から作成することもできます。

注意：

ワークスペースは100個のカスタムメールテンプレートに制限されています。
テンプレートの最大サイズは200,000文字に制限されています。

テンプレートに満足したら名前を付けて保存してください。メール作成時にテンプレート一覧から利用可能になります。

重要：カスタムテンプレートは完全なHTMLエディタのように（HTML、CSS＋コンテンツをすべて入れるのではなく）、ヘッダー、フッター、コンテンツのスタイリングに重点を置いてください。すべてのコンテンツをカスタムテンプレートに入れて、標準エディタでメッセージを編集せずに送信すると、メッセージをライブ設定する際にエラーが発生します。

HTMLテンプレート使用時のヒント

1. テンプレートには以下のタグを含める必要があります:

{{content}} タグ
{{unsubscribe_link}} または {{unsubscribe_url}} タグ

注意：unsubscribe URLは検証チェックに引っかかり正しく保存されるために、</body>タグの前に配置してください。

{{content}} タグ

{{content}} タグはメール本文に置き換えられます。これは新しいメッセージを送るたびに変わるコンテンツです。メッセージ本文の内容を更新しない場合でも、このタグを必ず含めてください。

{{unsubscribe_link}} タグ
usersにメッセージの配信停止の機会を提供する必要があります。{{unsubscribe_link}} タグは、ユーザーがクリックして配信停止できるテキスト付きの完全なHTMLリンクを含みます。メール内にリンク自体を含めることも可能です:

{{unsubscribe_link}}

{{unsubscribe_url}} タグ

配信停止リンクの文言を独自に設定したい場合、{{unsubscribe_url}} タグは配信停止URLのみを含みます。以下のように使えます:

<a href="{{unsubscribe_url}}">あなたのカスタム配信停止文言</a>

重要：

unsubscribe URLは検証チェックに引っかかり正しく保存されるために、</body>タグの前に配置する必要があります。
配信停止リンクのURL自体はカスタマイズできません（リンクテキストのみカスタマイズ可能です）。

2. users、会社、または著者の変数をテンプレートに追加する場合。

ユーザー変数:

{{ first_name | fallback:"ENTER FALLBACK HERE" }}

カスタムユーザー変数:

{{ custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}

会社

{{ company.name | fallback:"ENTER FALLBACK HERE" }}

会社ID

 {{ company.remote_company_id | fallback:"ENTER FALLBACK HERE" }}

会社のカスタム変数:

{{ company.custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}

著者およびワークスペース変数

送信するチームメイトの名前（名、フルネーム）やワークスペース名をテンプレートに含めるには、以下の変数を使用できます:

{{ message.author.first_name }}
{{ message.author.name }}
{{ app.name }}

これは、このテンプレートで送信されるメッセージの「From」欄にチームメイトの名前を使用します。

3. 他のプロバイダーからコードを貼り付ける場合...

MailChimpやCampaign Monitorなどの場合、カスタムタグが機能しない可能性があり、正しく動作させるためにコードの修正が必要です。

4. テンプレートをレスポンシブにする

メールがレスポンシブでモバイルでも見やすくなるよう、デフォルトテンプレートに含まれている「Style」タグを使用してください。

<style type="text/css" data-premailer="ignore">...</style>

5. テンプレートで画像を使う場合

テンプレートで画像を使う場合は、ImgurやZightなどのアプリでホストしてください。URLをテンプレートコードに貼り付けるだけで画像が表示されます。

画像にはHTTPS（HTTPではなく）を使用して、混在コンテンツ警告を回避してください。HTTP画像はIntercomのメールプレビューで表示されません。

6. テンプレートでCSSを使う場合

すべてのCSSが使用可能で、カスタムテンプレートのhead内のstyle属性にdata-premailer="ignore"を入れない限り、自動的にすべてのスタイルをインライン化します。ignoreはレスポンシブレイアウトでCSSのインライン化がレイアウトを壊す場合に便利です。

注意：テンプレートのメインコンテンツエリアにoverflow: hidden;を適用しないでください。これはメッセージ作成時の編集体験に影響し、テキストフォーマッターや属性挿入ツールなどのUIコンポーネントが隠れてしまいます。

7. メッセージを書く

テンプレートを使うには、次回メール作成時にメッセージ作成ウィンドウのドロップダウンから選択してください。基本的なHTMLでコンテンツをスタイリングでき、テンプレート内の{{ content }}タグの代わりに表示されます。

8. ボタンのスタイリング

カスタムメールテンプレートを作成する場合、Composerで挿入されるボタンには最小限のスタイルしか適用されません。.intercom-h2b-buttonクラスと以下のマークアップをターゲットにしてカスタマイズできます:

<a href="http://test.com" class="intercom-h2b-button">ボタンテキスト</a>

9. カスタムテンプレートを異なるメールクライアントでテストする

メールプロバイダーごとにメールの表示が少し異なります。デフォルトテンプレートはできるだけ多くのメールクライアントで問題なく表示されるよう設計されています。

カスタムテンプレートを使う場合は、複数のメールクライアントでの表示を確認することをおすすめします。各メッセージの「テストメールを送信」オプションを使ってテスト送信が可能です。

また、Litmus、250ok、Email on Acidなどのサードパーティツールを使って、多様なクライアントでのメール表示を包括的に確認する方法もあります。

フルHTMLの一回限りのメール

再利用可能なテンプレートを作成せずにHTMLで一回限りのメッセージを送りたい場合は、新規メッセージ作成時に</> HTMLエディタに切り替えをクリックしてください。

よくある質問

`dir="rtl"`がテンプレートから削除されますが、これは意図的ですか？

はい、これは想定された動作です。カスタムテンプレートにrtlを追加する回避策として、CSSの代替手段であるstyle="direction: rtl;"を使う方法があります。これはテンプレートから削除されません。

メールの件名を`#`で始めたいが、削除されてしまいます。どうすればよいですか？

#の前にバックスラッシュ\を付けると正しく表示されます。例えば、件名を#HashtagsAreGreatと送るとHastagsAreGreatに削除されますが、\#HashtagsAreGreatと送ると#HashtagsAreGreatのままになります。

HTMLメールプレビューで画像が表示されないのはなぜですか？

HTMLメールで画像を使う場合は、プレビュー表示のためにhttpsのURLを使う必要があります。httpの生画像はサポートしていないため、プレビューでは画像が壊れて表示されます（ただし送信時は正しく表示されます）。解決策として、画像をhttpsのURLでホストしてください。

カスタムテンプレートからメッセージの著者名やアプリ名を動的に読み込みたいのですが、可能ですか？

可能です。こちらは使えるカスタムHTMLテンプレートです。

<table>
 <tbody>
 <tr> 
 <td width="40" class="space"> </td>
 
 <td valign="middle" width="50" style="color: #272727;" align="left">
 <img src="example-image.com" height="40" width="40" class="avatar" alt="intercomavatar">
 </td>

 <td class="admin_name" style="color: #999999">
 <p> {{ message.author.first_name }} from {{ app.name }} </p> 
 </td>
 </tr>
 </tbody>
</table>

注意：使用したい画像のsrc="example-image.com"を実際の画像リンクに置き換えてください。