Intercom comes with three default email templates. But you can also customize your own using the visual template editor, or create a new template from HTML which we'll cover below.
To access it, you can go to Settings > Channels > Emails > Email settings and find the "Email templates for outbound email" section.
Select Create or manage templates.
Then click on New template and select Create from HTML.
Now you can edit the HTML so that things like font size, type, and colour match your brand. You can add in your logo or header at the top too. You can also create a new template entirely from scratch using whatever HTML or design you like.
Workspaces are limited to 100 custom email templates.
The maximum size of the template is restricted to 200,000 characters.
Once you're happy with your template, give it a name and save it. It will then be available in your list of templates when you are composing an email.
Custom Templates should not be used like the full HTML editor (putting HTML, CSS + content in), but should focus more on headers, footers, and styling of content. If you put all of your content into the custom template, and send it off without making any edits to the message in the standard editor, you will get an error when trying to set the message live.
Tips when using HTML templates
1. You need to include these tags in the template:
The
{{content}}tagThe
{{unsubscribe_link}}or{{unsubscribe_url}}tag
Note: The unsubscribe URL should be placed before </body> tag in order to be picked up by our validation checks and for the message to be saved correctly.
The {{content}} tag
The {{content}} tag will be replaced with the body of your email. This is the content that will change each time you send a new message. You must include this tag even if you don't intend to update the content of your message body.
The {{unsubscribe_link}} tag
You must give your users the opportunity to opt out of your messages. The {{unsubscribe_link}} tag will include a fully formed html link with text that the user can click to opt out. You can include the link itself in the email:
{{unsubscribe_link}}
The {{unsubscribe_url}} tag
If you'd like to provide your own wording for the unsubscribe link, the {{unsubscribe_url}} tag will include just the unsubscribe URL. You can do as follows:
<a href="{{unsubscribe_url}}">YOUR CUSTOM UNSUBSCRIBE WORDING</a>
Important:
The unsubscribe URL has to be placed before
</body>tag in order to be picked up by our validation checks and for the message to be saved correctly.For the unsubscribe link there's no way to customize the URL itself (you can only customize the link text).
2. When adding user, company, or author variables to your template.
User variables:
{{ first_name | fallback:"ENTER FALLBACK HERE" }}Custom user variables:
{{ 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 custom variables:
{{ company.custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}
Author and workspace variables
To include the sending teammate's first name, full name or your workspace name in a template, you can use any of the following variables:
{{ message.author.first_name }}
{{ message.author.name }}
{{ app.name }}
This will use the name of the teammate in the 'From' field of any message sent with this template.
3. When pasting code from another provider...
...such as MailChimp or Campaign Monitor, be aware that your custom tags may not work, and you'll need to modify the code to get it working properly.
4. Making your templates responsive
To ensure your emails are responsive and display well on mobile, use this “Style" tag that we've included in the default template.
<style type="text/css" data-premailer="ignore">...</style>
5. Using images in your template
If you're using images in your template, you'll need to use an app such as Imgur or Zight to host them. Then just paste the URL into your template code and the image will display.
Use HTTPS (not HTTP) for images to avoid any mixed content warnings. HTTP images will not display in your email preview in Intercom.
6. Using CSS in your template
You can use all CSS that you want, we will automatically inline all styles unless you put the data-premailer="ignore" attribute in the style attribute in the head of your custom template. The ignore can be helpful for when you have a responsive template layout and inlining the CSS would break that layout.
When styling the main content area of your template don't apply an overflow: hidden; rule to it as this will affect the message composer editing experience. Applying this rule will cause the message composer's UI components, e.g. the text formatter, the attribute inserter etc., to be hidden from view, like this:
7. Writing your message
To use your template, select it from the drop down in the message composer window the next time you want to send an email. You can then style the content with some basic HTML, and it will display in place of the {{ content }} tag that you included in your template.
8. Styling Buttons
If creating a custom email template please be aware that buttons inserted by the Composer will have minimal styles applied to them. You can customize the buttons by targeting the .intercom-h2b-button HTML class and the following markup:
<a href="http://test.com" class="intercom-h2b-button">Button Text</a>
9. Test your custom templates in different email clients
Each email provider tends to render emails a little differently. Our default templates are designed to play as nicely as possible with as many email clients as possible.
If you're using a custom template, we recommend checking your email’s rendering in several different email clients. This can be done by using each Message’s 'Send a test email' option to test sends to different email clients.
Another choice is to use a third-party tool to get a comprehensive look at how your email will render in a broad variety of clients -- Litmus, 250ok, and Email on Acid are just a few examples of tools that do this.
One-time emails in full HTML
If you want to send a one off message written in HTML, instead of creating a reusable template, just click </> Switch to HTML editor when composing a new message.
FAQs
dir="rtl" is stripped from the template, is this on purpose?
Yes, this is expected behaviour. There is a workaround for adding rtl into a custom template, which is using the CSS alternative: style="direction: rtl;" . This is not stripped from our templates.
I want to start their email subject line with a #, but it is stripped out - how can I do this?
If you add a backslash \ before the #, then it will show up correctly. For example, if you send you subject line as #HashtagsAreGreat, this will be stripped to HastagsAreGreat. However, if you send \#HashtagsAreGreat, this will be stripped to #HashtagsAreGreat.
Why isn't an image rendering in the HTML email preview?
If you are using images in their HTML email, you should be using https URLs in order to see the preview of the message. We do not support raw images with a http URL, therefore the image will appear broken in the preview (but will be rendered correctly when sent to the customer). To resolve this, you should host their image on a https URL.
I want to dynamically load the message author name and the app name directly from a custom template, is this possible?
You can indeed. Here's a custom HTML template you can use.
<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>
You should replace the src="example-image.com" of the img tag with an actual link to an image you want to use.
Important:
You won't be able to switch back to the visual editor or change message type to in-app.
Link tracking of templated URLs won't work in one-off HTML emails. We recommend using a custom email template or creating a new template from HTML instead.
If you send Intercom an attribute to include in a link, we'll take care of the encoding.
You can include and use Google Fonts. However if your email client doesn’t support this, the text in your emails will fallback to use your websafe font. If you're using Google Fonts, you'll need to use the '@import' method to embed the stylesheet in Intercom.
Some email clients that do support web fonts:
- Apple Mail
- Lotus Notes 8
- Outlook 2011 for Mac and Outlook 2016
- iOS Mail
- Android Mail App
- Android Mail 2.3, 4.2, and 4.4It's not possible to include any other externally hosted fonts.
See creating HTML emails for more details.
Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts