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

  1. Create a full HTML email for one-off rich email campaigns.
  2. Craft a custom template designed with your branding and save it in Intercom so you can use it over and over.
  3. Or you can slightly format your email using HTML blocks.

Send a one-off full HTML email

You can create and send full HTML emails using Intercom. And you’ll have full control over the HTML you send.

Use full HTML if you want to: 

  • Create a total custom content layout.
  • Send a rich, visually-appealing marketing campaign.
  • Send a one-off email designed in HTML.

How to create a full HTML email

To write your messages in full HTML, click on the ‘Import your HTML email’ option on the bottom left-hand side of the email composer screen.

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 to customers by switching to desktop or mobile view.

Important note:
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.

Create a reusable custom template

Intercom gives you a selection of four templates to use for your emails. But if you want to create a stylized template that matches your brand’s design you should create a custom email template using 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 full HTML email? 

You should create a custom template (and not a full 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 a custom template if you want to:

  • Set the style of your email, including font type, size and background colour.
  • Add a custom header, footer or border.
  • Create multi-column layouts.
  • 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 a custom email template in Intercom.

Add a HTML block to your email

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 left hand-side of the composer and select the 'Add HTML' option.

Some of our customers use a HTML block to align an image horizontally in their email (Intercom aligns images vertically in the composer). To do so, your can copy the code format below and customize it to suit your own message:

<table cellpadding="0" cellspacing="0" border="0">

  <tr>

     <td align="center" class="col" width="280">

        <img src="http://static.intercomcdn.com/assets/emails/welcome-to-intercom/day06-segments-37767a1413efcbae771cb3d3a3c094de.png">

     </td>

     <td class="col col_text" width="280" align="left">

        <div class="col_content">

           <h3 class="content_header">SEGMENT</h3>

           <p class="content_text">A segment is a group of users defined by rules set by you. Your users will automatically get added to the group as soon as they match the rules.</p>

        </div>

     </td>

  </tr>

</table>            

Here’s how the above example will look when you preview your email:

4 tips to remember when using HTML blocks in your emails

  1. Use https for images to avoid any mixed content warnings.
  2. 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.
  3. While embedded videos work well for in-app messages, we don't support iframes and will not show your embedded videos.
  4. Remember that all styles and ID attributes that you include in the message body will be stripped out.

Important note: If you want to apply some special styling to HTML within your HTML blocks, then you could create a custom template 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.

Did this answer your question?