メインコンテンツにスキップ

HTMLメールテンプレートを作成する

HTMLを使ってカスタムメールテンプレートを作成しましょう。

D
対応者：Dan Griggs

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

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

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

注意：

  • ワークスペースはカスタムメールテンプレートを100個まで作成可能です。

  • テンプレートの最大サイズは200,000文字に制限されています。

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

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

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

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

  1. {{content}} タグ

  2. {{unsubscribe_link}} または {{unsubscribe_url}} タグ

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

{{content}} タグ

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

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

{{unsubscribe_link}} 

{{unsubscribe_url}} タグ

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

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

重要：

  • 配信停止URLは検証チェックに認識され、メッセージが正しく保存されるために、</body>タグの前に配置する必要があります。

  • 配信停止リンクのURL自体はカスタマイズできません（リンクテキストのみカスタマイズ可能です）。

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

User変数:

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

カスタムUser変数:

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

Company

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

Company ID

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

Companyカスタム変数:

{{ 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コンポーネント（テキストフォーマッターや属性挿入ツールなど）が隠れてしまうためです。

注意：テンプレートでグローバルCSSリセット（例：* { margin: 0; }）を使うと、挿入コンテンツの段落間隔がなくなることがあります。段落間隔を復元するには、テンプレートのスタイルブロックに.body p { margin: 0 0 20px; line-height: 1.75; }のようなルールを追加してください。

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>

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

重要：

  • ビジュアルエディターに戻したり、メッセージタイプをインアプリに変更することはできません。

  • テンプレート化されたURLのリンクトラッキングは一回限りのHTMLメールでは機能しません。代わりにカスタムメールテンプレートを使うか、HTMLから新しいテンプレートを作成することをおすすめします。

  • リンクに含める属性をIntercomに送信すると、エンコードは当社で処理します。

  • Google Fontsを含めて使用できます。ただしメールクライアントが対応していない場合は、メール内のテキストはウェブセーフフォントにフォールバックします。Google Fontsを使う場合は、Intercomでスタイルシートを埋め込むために'@import'方式を使う必要があります。
    ウェブフォントに対応している主なメールクライアント:
    - Apple Mail
    - Lotus Notes 8
    - Mac用Outlook 2011およびOutlook 2016
    - iOS Mail
    - Android Mailアプリ
    - Android Mail 2.3、4.2、4.4

  • 他の外部ホストフォントを含めることはできません。

詳細はHTMLメール作成をご覧ください。

関連記事
こちらの回答で解決しましたか？