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

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

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

注意：

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

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

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

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

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

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

注意：メッセージが正しく保存され、検証チェックに合格するために、購読解除URLは</body>タグの前に配置してください。

{{content}} タグ

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

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

{{unsubscribe_link}}

{{unsubscribe_url}} タグ

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

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

重要：

配信停止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を使用可能ですが、カスタムテンプレートの内の

注意：テンプレートのメインコンテンツエリアに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"を実際の画像リンクに置き換えてください。

重要：

ビジュアルエディタに戻したり、メッセージタイプをインアプリに変更することはできません。
テンプレート化されたURLのリンクトラッキングは一回限りのHTMLメールでは機能しません。代わりにカスタムメールテンプレートを使うか、HTMLから新しいテンプレートを作成することをおすすめします。
リンクに含める属性をIntercomに送信すると、エンコードはIntercomが処理します。
Google Fontsを使用できます。ただし、メールクライアントが対応していない場合は、テキストはウェブセーフフォントにフォールバックします。Google Fontsを使う場合は、Intercomでスタイルシートを埋め込むために「@import」方式を使用してください。
ウェブフォントに対応している主なメールクライアント：
- Apple Mail
- Lotus Notes 8
- Mac用Outlook 2011およびOutlook 2016
- iOS Mail
- Androidメールアプリ
- Androidメール 2.3、4.2、4.4
他の外部ホストフォントを含めることはできません。