Use este artigo para formatar e estilizar seus artigos do Help Center usando a Articles API, e para exportar o conteúdo do seu artigo programaticamente. A Articles API permite criar e atualizar artigos enviando HTML no campo body — este artigo cobre todos os elementos HTML suportados, como estilizar eles e o que é removido ou convertido.
Se preferir formatar os artigos manualmente, você pode fazer isso dentro do editor de artigos.
Nota: Para um guia completo da API, veja nossa documentação para desenvolvedores.
Nota: Este artigo é destinado a desenvolvedores que integram com a Intercom Articles API (application programming interface). Você precisará de uma chave API para autenticar as requisições — veja a referência da API para detalhes de autenticação.
Formatando seus artigos públicos
Todo o texto do corpo deve estar dentro de tags de parágrafo (p):
<p>This is a paragraph</p>
Para adicionar uma quebra de linha dentro de um parágrafo, use uma tag de quebra de linha (br):
<p>This paragraph<br>has a line break in it</p>
Existem dois níveis de título suportados nos artigos; H1 e H2:
Quaisquer outras tags de título enviadas via API (H3 - H6) serão convertidas para H1 e H2. Essa normalização é relativa: se o corpo não tiver um <h1>, o Intercom desloca todos os títulos para cima para que o nível superior comece em <h1>. Se o corpo incluir um <h1>, os níveis inferiores de título são preservados.
<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>
Nota: Os campos title e body são tratados independentemente — o título do artigo é automaticamente renderizado como <h1> mas não afeta como os títulos no corpo são normalizados. Para preservar os níveis <h2> e mais profundos, sempre inclua um <h1> no corpo do artigo.
Nota: O editor do Help Center mostra opções de títulos H3 e H4, mas estes são normalizados para H1 ou H2 quando o artigo é salvo ou acessado via API. Se os níveis de título mudarem inesperadamente em seus artigos, isso é comportamento esperado — conteúdo enviado pela API ou processado por um serviço de tradução acionará a normalização.
Para adicionar uma imagem, use uma tag de imagem (img), com a URL da imagem como atributo “src”:
A imagem será enviada para o Intercom a partir da fonte que você especificar, e um link do Intercom será usado para exibi-la no seu artigo. Os tipos de arquivo suportados são PNG, JPEG, SVG e GIF.
Importante: A fonte da sua imagem deve ser uma URL completa (ex.: https://examply.io/image.jpeg) e não uma URL relativa (ex.: /image.jpeg) e o arquivo deve ser publicamente acessível
<img src=”https://examply.io/image.jpeg”/>
Dica profissional: você também deve incluir uma descrição da sua imagem com um atributo “alt”. Isso torna seus artigos mais acessíveis para clientes que usam leitores de tela e ajuda os motores de busca (SEO — search engine optimization) a indexar seu conteúdo com precisão:
<img src=”https://examply.io/image.jpg” alt=”Examply project page”/>
Adicione links aos seus artigos com tags de âncora “a”. Inclua a URL de destino como atributo “href”:
<a href=”https://examply.io”>This is a text link</a>
Para exibir links como botões, adicione a classe “intercom-h2b-button”:
<a href=”https://examply.io” class=”intercom-h2b-button”>This link is a button</a>
Para usar uma imagem como link, coloque-a entre tags de link:
<a href=”https://examply.io”>
<img src=”https://examply.io/image_link.jpeg”/>
</a>
Nota: O atributo “target” não é necessário. Todos os links em seus artigos abrirão em uma nova aba.
Listas com marcadores e numeradas podem ser adicionadas com tags de “lista não ordenada (ul)” e “lista ordenada (ol)”:
Cada item da sua lista deve estar dentro de uma tag de item de lista (li).
Lista com marcadores (não ordenada):
<ul>
<li>First bulleted list item</li>
<li>Second bulleted list item</li>
</ul>
Lista numerada (ordenada):
<ol>
<li>First numbered list item</li>
<li>Second numbered list item</li>
</ol>
Dica: Para listas aninhadas, inclua uma tag “ol” ou “ul” dentro de outro item da lista.
Vídeos do YouTube, Wistia, Vimeo, Loom, Vidyard ou StreamIO podem ser adicionados usando uma tag iframe (inline frame):
<iframe src=”https://www.youtube.com/embed/jqO8AQHj7Fw”></iframe>
Nota: Você deve usar a URL de embed do seu vídeo como atributo “src”, não um link direto para o vídeo. Enviar uma URL não suportada fará sua requisição API falhar.
Código pode ser adicionado inline ou em blocos de código com tags “pre” e “code”.
Bloco de código:
<pre><code>This is a code block, perfect for larger blocks of code</code></pre>
Código inline em um parágrafo:
<p>This paragraph contains some <code>inline code</code>.</p>
Estilizando seus artigos
Para texto em negrito use tags “b” ou “strong”:
<p>This paragraph contains <b>bold words here</b> and <strong>here</strong></p>
Para texto em itálico use tags “i” ou “em”:
<p>This paragraph contains <i>italic words here</i> and <em>here</em></p>
Nota: Ao criar artigos, tags “strong” serão convertidas para “b” e tags “em” serão convertidas para “i”.
Títulos, parágrafos, imagens e botões podem ser alinhados ao centro
Títulos, subtítulos e parágrafos
Adicione a classe “intercom-align-center” diretamente na tag h1, h2 ou p:
<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>
Imagens e botões
Para alinhar uma imagem ou botão ao centro, ela deve estar envolvida em uma tag “div” com a classe “intercom-align-center” aplicada:
Imagem:
<div class="intercom-align-center"> <img src=”https://examply.io/image.jpg”/></div>
Botão:
<div class="intercom-align-center">
<a class="intercom-h2b-button" href="https://examply.io">Centered Button</a>
</div>
Importante: Estas são as únicas tags “div” suportadas. Quaisquer outras tags “div” serão convertidas em tags de parágrafo.
Tabelas
Qualquer tag “table” deve conter pelo menos uma linha (“tr”) e uma célula (“td”):
<table>
<tr>
<td>
</td>
</tr>
</table>
Nota:
Tabelas não podem ser aninhadas dentro de outras tabelas.
Se você enviar tags
thead,tfootoutbody, seus conteúdos serão tratados como linhas normais.
Divisores (Regras Horizontais):
<hr>
O que não é suportado?
Divs e spans
Quaisquer tags “div” ou “span” que você enviar serão substituídas por tags “p”.
Nota: Isso exclui os dois containers div específicos suportados para alinhamento central: um envolvendo uma tag img e outro envolvendo uma tag a com a classe intercom-h2b-button. Estes estão documentados na seção "Títulos, parágrafos, imagens e botões podem ser alinhados ao centro".
Formulários e entradas
Quaisquer tags “form”, “input” ou “textarea” e seus conteúdos serão removidos do corpo do seu artigo.
Scripts
Incluir CSS ou Javascript personalizado não é suportado. Quaisquer tags “script” e seus conteúdos serão removidos do seu artigo. Isso significa que botões em artigos não podem usar manipuladores onclick — eles serão exibidos como links estilizados, mas não executarão JavaScript ao serem clicados. Para abrir o Messenger a partir de um botão, vincule-o a uma página no seu app onde o Intercom está instalado e acione o Messenger lá usando JavaScript (ex.: Intercom('show')).
Outros elementos
Quaisquer tags ou atributos (como "width" ou "height") não listados neste artigo serão substituídos por tags de parágrafo. Isso inclui “head”, “html”, “footer”, “meta” etc.
Exportando o conteúdo dos artigos do Help Center
Você pode exportar o conteúdo completo dos seus artigos do Help Center — incluindo o corpo HTML, título, metadados e dados de localização — usando a Articles API. Cada artigo é recuperado individualmente pelo seu ID. A autenticação é necessária via sua chave API.
Exportar artigos pela interface do Intercom não é suportado. Use a documentação de referência da API para recuperar o conteúdo dos artigos programaticamente. A referência cobre o esquema completo da resposta, campos disponíveis e requisitos de autenticação.