For your articles to be most effective and helpful to your customers, they need a clear, easy to scan format. This can be achieved easily within the articles editor, or with the Articles API.
This article shows exactly which formatting is supported, and how to achieve your desired styles with the Articles API.
Note: For a full API reference guide, see our developer documentation.
Formatting your articles
All body text must be placed within paragraph (p) tags:
<p>This is a paragraph</p>
To add a line break within a paragraph, use a line break (br) tag:
<p>This paragraph<br>has a line break in it</p>
There are two heading levels supported in articles; H1 and H2:
Any other heading tags sent via the API (H3 - H6) will be converted to H1 and H2 while maintaining the hierarchy.
<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>
To add an image, use an image (img) tag, with the image URL as the “src” attribute:
The image will be uploaded to Intercom from the source you specify, and an Intercom link will be used to display it in your article. Supported file types are PNG, JPEG, SVG & GIF.
Important: Your image source must be a complete URL (e.g. https://examply.io/image.jpeg) not a relative URL (e.g. /image.jpeg) and the file must be publicly accessible
Optional: you should also include a description of your image with an “alt” attribute. This makes your articles more accessible, and has SEO benefits:
<img src=”https://examply.io/image.jpg” alt=”Examply project page”/>
Add links to your articles with anchor “a” tags. Include the destination URL as the “href” attribute:
<a href=”https://examply.io”>This is a text link</a>
To display links as buttons add the “intercom-h2b-button” class:
<a href=”https://examply.io” class=”intercom-h2b-button”>This link is a button</a>
To use an image as a link, place it between link tags:
Note: The “target” attribute is not necessary. All links in your articles will open in a new tab.
Single level bulleted and numbered lists can be added with “unordered list (ul)” and “ordered list (ol)” tags:
Each item in your list must be within a list item (li) tag.
Bulleted (unordered) list:
<li>First bulleted list item</li>
<li>Second bulleted list item</li>
Numbered (ordered) list:
<li>First numbered list item</li>
<li>Second numbered list item</li>
Important: Nested lists are not supported. Any “ol” or “ul” tags within another list item will cause your API request to fail.
Videos from Youtube, Wistia, Vimeo, Loom, Vidyard or StreamIO can be added in an iframe:
Note: You must use the embed URL for your video as the “src” attribute, not a direct link to the video itself. Sending an unsupported URL will cause your API request to fail.
Code can be added inline or in code blocks with “pre” and “code” tags.
<pre><code>This is a code block, perfect for larger blocks of code</code></pre>
Inline code in a paragraph:
<p>This paragraph contains some <code>inline code</code>.</p>
Styling your articles
For bold text use “b” or “strong” tags:
<p>This paragraph contains <b>bold words here</b> and <strong>here</strong></p>
For italic text use “i” or “em” tags:
<p>This paragraph contains <i>italic words here</i> and <em>here</em></p>
Note: When creating articles, “strong” tags will be converted to “b” and “em tags will be converted to “i”.
Headings, paragraphs, images and buttons can be aligned to center
Headings, sub-headings and paragraphs
Add the class “intercom-align-center” directly to the h1, h2 or p tag:
<h1 class=”intercom-align-center”>This heading is centered</h1>
<h2 class=”intercom-align-center”>So is this subheading</h2>
<p class=”intercom-align-center”>This paragraph is also centered.</p>
Images and buttons
To center align an image or button it must be wrapped in a “div” tag with the “intercom-align-center” class applied:
<div class="intercom-align-center"> <img src=”https://examply.io/image.jpg”/></div>
<a class="intercom-h2b-button" href="https://examply.io">Centered Button</a>
Important: These are the only supported “div” tags. Any other “div” tags will be converted to paragraph tags.
Any “table” tag must contain at least one row (“tr”) and one cell (“td”):
- Tables cannot be nested within other tables.
- If you send
tbodytags their contents will be treated as normal rows.
Dividers (Horizontal Rules):
What’s not supported?
Divs and spans
Any “div” or “span” tags you send will be replaced with “p” tags.
Note: This excludes the container divs used to center-align buttons and images (see above).
Forms and inputs
Any “form”, “input” or “textarea” tags and their contents will be removed from the body of your article.
Any tags not listed in this article will be replaced with paragraph tags. This includes “head”, “html”, “footer”, “meta” etc.