You can use HTML to create custom emails in Intercom. You have three options, and each one serves a different purpose. You can either:

Create a reusable email template from HTML recommended
Send a one-off full HTML email.
Format your email using HTML blocks.

Create a reusable template from HTML

Intercom gives you a selection of three templates to use for your emails. But if you want to create a stylized template that matches your brand’s design you can create an email template from HTML. Your new custom template will get saved as a template in Intercom and you can use it as many times as you like.

Why create a custom template instead of a one-off HTML email?

You should create a custom template (and not a one-off HTML email) if you want a custom style for your brand but you still want to take advantage of the power and ease-of-use of the composer. Once you save your custom template in Intercom, you can select it as a template and write your email without needing to use HTML.

Create an email template from HTML if you want to:

Set the style of your email, including font type, size and background color.
Add a custom header, footer or border.
Use link tracking of templated URLs.
Customize your Intercom button style. To do so add some styles to the HTML class .intercom-h2b-button.

Ready to get going? Here’s how to create an email template from HTML in Intercom.

Send a one-off full HTML email

You can also create a custom content layout and send a one-off email designed in HTML.

Note: Link tracking of templated URLs won't work in one-off HTML emails. We strongly recommend using a custom email template or creating a new template from HTML instead.

How to create a full HTML email

To write your messages in full HTML, create a new email message using any template and then click </> Switch to HTML editor on the bottom left side of the email composer.

The HTML composer will open on the right and now you can create your email.

As you write, you can see how your message will appear in the Template Preview.

Important: You can’t switch back to the visual editor or change your message type to in-app once you have started writing your email in full HTML.

Format your email using HTML blocks

When you need to break out from the regular formatting options that the composer offers you, you can use HTML blocks to add custom elements to your email.

You can use HTML blocks to:

Place a table in your email.
Show data in HTML tables for easier viewing.
Insert hi-dpi retina images into your email.
Create block quotes.
Add a custom button (you need to create your button style in a custom template first but you can set the class using a HTML block).
Add a column (this is handy for placing images alongside each other).

To add a HTML block to your email just hover over the composer and select the + icon to insert </> HTML.

4 tips to remember when using HTML blocks in your emails

Use HTTPS (not HTTP) for images to avoid any mixed content warnings. HTTP images will not display in your email preview in Intercom.
Take care to preview your message, especially when sending it by email. You can always tweak in-app messages, but once an email goes out, there's no turning back.
While embedded videos work well for in-app messages, we don't support iframes and will not show your embedded videos.
Remember that all styles and ID attributes that you include in the message body will be stripped out.

If you want to apply some special styling to HTML within your HTML blocks, then you could create an email template from HTML with your specific styles in the <head> and then reference the classes in the HTML block. These styles will be inlined when the email is sent.

HTML tags and attributes Intercom supports

We support two subsets of HTML in Intercom. Below, you can see the tags and attributes we support for full html emails and custom templates. And you'll see the tags and attributes we support for HTML blocks.

Supported elements in HTML mode (for full HTML emails and custom templates):

Structural Elements: article, aside, blockquote, body, br, div, figcaption, figure, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, main, p, section, wbr
Head Elements: meta, title
List Elements: dd, dl, dt, li, ol, ul
Text Formatting Elements: a, abbr, address, b, bdi, bdo, center, cite, code, del, dfn, em, i, ins, kbd, mark, pre, q, rp, rt, ruby, s, samp, small, span, strike, strong, sub, sup, time, u, var
Media Elements: img
Table Elements: caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

Supported attributes in HTML mode (for full HTML emails and custom templates):

All attributes support: align, bgcolor, class, dir, height, id, lang, style, title, width
a tag support: href, name, target
blockquote tag support: cite
col tag support: span, valign
colgroup tag support: span, valign
del tag support: xmlns
html tag support: href, name, target
img tag support: alt, src
ins tag support: cite, datetime
meta tag support: content, http-equiv, name
ol tag support: reversed, start, type
q tag support: cite
style tag support: data-premailer, type
table tag support: border, cellpadding, cellspacing, summary
tbody tag support: valign
td tag support: abbr, axis, colspan, rowspan, valign
tfoot tag support: valign
th tag support: abbr, axis, colspan, rowspan, scope, valign
thead tag support: valign
time tag support: datetime, pubdate
tr tag support: valign
ul tag support: type

Here are the different HTML tags we support for HTML blocks:

Headings: h1, h2, h3, h4, h5, h6
Text formatting tags such as strong, em, sub, sup, small, code, pre, strike
Tags for creating tables: table, thead, tbody, tfoot, th, tr, td
Lists: ol, ul
Hyperlinks using the anchor element
Images

Here are the HTML attributes we support for HTML blocks:

ALL tags allow dir lang title width height id class align
a allows href target name
blockquote allows cite
col allows span width valign
colgroup allows span width valign
del allows cite datetime
img allows align alt height src width title
ins allows cite datetime
ol allows start reversed type
q allows cite
table allows summary width border cellspacing cellpadding
tbody allows valign
tfoot allows valign
thead allows valign
td allows abbr axis colspan rowspan width valign
th allows abbr azis colspan rowspan scope width valign
thead allows tr
time allows datetime pubdate
ul allows type

Best practices for using HTML in Intercom

Whether you’re sending a one-off HTML email or creating a reusable custom email template, the following best practices apply:

Inline your CSS styles

Most email clients require you to inline your CSS styles and it can make for a not-so-nice development experience. That’s because when you want to add a style, you have to add it to each individual <p> tag. And if you want to change the style you’ve added, you’d have to change the style for each <p> tag individually. However, in Intercom you can (and should) write your HTML and styles using style tags and classes like you normally would. Then when the email is sent, Intercom will inline all your CSS styles to the appropriate elements.

Responsive styles should not be inlined

One caveat is that you should not inline responsive styles (those within a @media() {} block). If they are inlined, they will be applied by default rather than at a specific screen width. Instead, they should be placed inside a style tag with the special incantation data-premailer="ignore". This means that these responsive styles won't be inlined. Any browsers that understand media queries will apply these styles depending on the screen size.

Add the right data attributes

When creating a custom template, we require you to have a single {{content}} tag. You can place it anywhere within the <body> tag. Currently we only support having one {{content}} tag per email which means you can’t have more than one content region per email.
When creating a custom template or writing in full HTML in Intercom you must include either an {{unsubscribe_url}} or {{unsubscribe_link}} to comply with anti-Spam laws. You can place it anywhere within the <body> tag Here's how.

Get the HTML basics right

And lastly, we couldn’t go without sharing a few fundamental tips about how to create better HTML emails:

Create your layouts using tables to ensure that your email displays correctly across all email clients. If you want to place a 20px gap under a paragraph of text, for example, it’s best to add a row with an attribute of height="20" Don’t use padding, margins and floats as they won’t always work (most notably with certain versions of Outlook).
Inline all styles into your email to ensure that your styles get applied by each email client and to make sure that your design appears correctly when sent. To ease your workflow Intercom helps with that.
You can use custom hosted web fonts from an open source font service like Google Fonts. All you have to do is embed the code in your email template. However, do note that if your email client doesn’t support this, the text in your emails will fallback to use your websafe font.
To create a responsive design, your width should be at least 320px but no more than 600px. And it’s best to use a maximum width of 600px as your default view. It’s also important to use media queries to transform your template into a single column at smaller viewports.
For image file sizes, try to keep your images as small as possible (maximum 1MB in size). Downloading large images will provide a sub-optimal experience to your users, especially those who are viewing your email on mobile devices, as images may take a long time to appear.
Use an email testing tool like Litmus to test your emails in all of your target email clients and browsers. It's not good enough to just look at your email in a regular browser or in one or two email clients. They all produce different results. Tools like Litmus give you full visibility of how your email will look everywhere.

Now that you’ve learned how to create better HTML emails in Intercom, you’ll want to make sure they get delivered and opened.

💡Tip

Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts

3 email templates to choose from

Create HTML email templates

Composing an outbound message

Visual email template editor

Email customization FAQs