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.
Simply go to Outbound > Settings > Email templates and click + New template 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.
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.
Note: HTML email templates are only available on certain Intercom plans.
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.
Note: 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.
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.
💡Tip
Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts