Intercom comes with four default email template styles. But you can also create your own. Simply go to Settings > Messages > Email templates and you can add and edit your HTML there. 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.

You can use any of intercom's pre-made templates as the base for your custom templates.

Select whichever template you'd like to tweak. 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.

Here are some tips to remember when using custom templates:

1. You need to include these tags in the template:

  1. The {{ content }} tag
  2. The {{ 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 wish to send an email with no other content.

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 unsubscribe link, the {{ unsubscribe_url }} tag will include just the unsubscribe URL. You can do as follows:

<a href="{{ unsubscribe_url }}">Unsubscribe</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 or company 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" }}

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 make your sure your emails are responsive and display well on mobile, make sure to 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 CloudApp to host them. Then just paste the URL into your template code and the image will display.

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> 

One-time messages in full HTML

If you want to send a one off message written in HTML, instead of creating a reusable template, just import your source HTML 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.
  • You can use custom hosted web fonts from an open source font service like 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.
  • If you send Intercom an attribute to include in a link, we'll take care of the encoding.

See Sending full HTML messages for more details.

Did this answer your question?