Para que seus artigos do Help Center sejam mais eficazes e úteis para seus clientes, eles precisam de um formato claro e fácil de escanear. Isso pode ser feito facilmente dentro do editor de artigos ou com a Articles API.
Este artigo mostra exatamente quais formatações são suportadas e como alcançar os estilos desejados com a Articles API.
Nota: Para um guia completo de referência da API, veja nossa documentação para desenvolvedores.
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 cabeçalho suportados em artigos; H1 e H2:
Quaisquer outras tags de cabeçalho enviadas via API (H3 - H6) serão convertidas para H1 e H2 mantendo a hierarquia.
<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>
Para adicionar uma imagem, use uma tag de imagem (img), com a URL da imagem como atributo “src”:
A imagem será carregada para o Intercom a partir da fonte que você especificar, e um link do Intercom será usado para exibi-la em 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 e traz benefícios de SEO:
<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 “unordered list (ul)” e “ordered list (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 em um iframe:
<iframe src=”https://www.youtube.com/embed/jqO8AQHj7Fw”></iframe>
Nota: Você deve usar a URL de embed para 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”.
Cabeçalhos, parágrafos, imagens e botões podem ser alinhados ao centro
Cabeçalhos, subcabeçalhos e parágrafos
Adicione a classe “intercom-align-center” diretamente à 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, ele deve estar envolvido 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 as divs contêiner usadas para alinhar botões e imagens ao centro (veja acima).
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 conteúdo de artigos do Help Center
Não é possível exportar seus artigos pela interface do Intercom, mas você pode usar nossa documentação da API para exportar o conteúdo.