All Collections
Help Center
Getting started
Formatting and exporting your articles with the Articles API
Formatting and exporting your articles with the Articles API

Everything you need to know to properly format your articles with the Articles API

Beth-Ann Sher avatar
Written by Beth-Ann Sher
Updated over a week ago

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

<img src=”https://examply.io/image.jpeg”/>

Pro tip: 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”/>

<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:

<a href=”https://examply.io”>
<img src=”https://examply.io/image_link.jpeg”/>
</a>

Note: The “target” attribute is not necessary. All links in your articles will open in a new tab.

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:

<ul>
<li>First bulleted list item</li>
<li>Second bulleted list item</li>
</ul>

Numbered (ordered) list:

<ol>
<li>First numbered list item</li>
<li>Second numbered list item</li>
</ol>

Tip: For nested lists, include an “ol” or “ul” tag within another list item.

Videos from Youtube, Wistia, Vimeo, Loom, Vidyard or StreamIO can be added in an iframe:

<iframe src=”https://www.youtube.com/embed/jqO8AQHj7Fw”></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.

Code block:

<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:

Image:

<div class="intercom-align-center">  <img src=”https://examply.io/image.jpg”/></div>

Button:

<div class="intercom-align-center">
<a class="intercom-h2b-button" href="https://examply.io">Centered Button</a>
</div>

Important: These are the only supported “div” tags. Any other “div” tags will be converted to paragraph tags.

Tables

Any “table” tag must contain at least one row (“tr”) and one cell (“td”):

<table>
<tr>
<td>

</td>
</tr>
</table>

Note:

  • Tables cannot be nested within other tables.

  • If you send thead, tfoot or tbody tags their contents will be treated as normal rows.

Dividers (Horizontal Rules):

<hr>

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.

Scripts

Including custom CSS or Javascript is not supported. Any “script” tags and their contents will be removed from your article.

Other elements

Any tags or attributes (such as "width" or "height") not listed in this article will be replaced with paragraph tags. This includes “head”, “html”, “footer”, “meta” etc.

Exporting Article Content

It's not possible to export your Articles through the Intercom UI however you can use our API documentation to export the content.


💡Tip

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


Did this answer your question?