Pour que vos articles du Help Center soient les plus efficaces et utiles pour vos clients, ils doivent avoir un format clair et facile à parcourir. Cela peut être réalisé facilement dans l'éditeur d'articles, ou avec l'Articles API.
Cet article montre exactement quel formatage est pris en charge et comment obtenir les styles souhaités avec l'Articles API.
Note : Pour un guide complet de référence API, consultez notre documentation pour développeurs.
Formatage de vos articles publics
Tout le texte du corps doit être placé dans des balises paragraphe (p) :
<p>This is a paragraph</p>
Pour ajouter un saut de ligne dans un paragraphe, utilisez une balise saut de ligne (br) :
<p>This paragraph<br>has a line break in it</p>
Deux niveaux de titres sont pris en charge dans les articles ; H1 et H2 :
Toutes les autres balises de titre envoyées via l'API (H3 - H6) seront converties en H1 et H2 tout en maintenant la hiérarchie.
<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>
Pour ajouter une image, utilisez une balise image (img), avec l'URL de l'image comme attribut “src” :
L'image sera téléchargée sur Intercom depuis la source que vous spécifiez, et un lien Intercom sera utilisé pour l'afficher dans votre article. Les types de fichiers pris en charge sont PNG, JPEG, SVG et GIF.
Important : La source de votre image doit être une URL complète (par exemple https://examply.io/image.jpeg) et non une URL relative (par exemple /image.jpeg) et le fichier doit être accessible publiquement
<img src=”https://examply.io/image.jpeg”/>
Astuce : vous devriez également inclure une description de votre image avec un attribut “alt”. Cela rend vos articles plus accessibles et présente des avantages SEO :
<img src=”https://examply.io/image.jpg” alt=”Examply project page”/>
Ajoutez des liens à vos articles avec des balises ancre “a”. Incluez l'URL de destination comme attribut “href” :
<a href=”https://examply.io”>This is a text link</a>
Pour afficher les liens sous forme de boutons, ajoutez la classe “intercom-h2b-button” :
<a href=”https://examply.io” class=”intercom-h2b-button”>This link is a button</a>
Pour utiliser une image comme lien, placez-la entre des balises de lien :
<a href=”https://examply.io”>
<img src=”https://examply.io/image_link.jpeg”/>
</a>
Note : L'attribut “target” n'est pas nécessaire. Tous les liens de vos articles s'ouvriront dans un nouvel onglet.
Les listes à puces et numérotées peuvent être ajoutées avec des balises “liste non ordonnée (ul)” et “liste ordonnée (ol)” :
Chaque élément de votre liste doit être dans une balise élément de liste (li).
Liste à puces (non ordonnée) :
<ul>
<li>First bulleted list item</li>
<li>Second bulleted list item</li>
</ul>
Liste numérotée (ordonnée) :
<ol>
<li>First numbered list item</li>
<li>Second numbered list item</li>
</ol>
Astuce : Pour les listes imbriquées, incluez une balise “ol” ou “ul” dans un autre élément de liste.
Les vidéos de Youtube, Wistia, Vimeo, Loom, Vidyard ou StreamIO peuvent être ajoutées dans une iframe :
<iframe src=”https://www.youtube.com/embed/jqO8AQHj7Fw”></iframe>
Note : Vous devez utiliser l'URL embed pour votre vidéo comme attribut “src”, pas un lien direct vers la vidéo elle-même. Envoyer une URL non prise en charge fera échouer votre requête API.
Le code peut être ajouté en ligne ou dans des blocs de code avec des balises “pre” et “code”.
Bloc de code :
<pre><code>This is a code block, perfect for larger blocks of code</code></pre>
Code en ligne dans un paragraphe :
<p>This paragraph contains some <code>inline code</code>.</p>
Mise en forme de vos articles
Pour le texte en gras, utilisez les balises “b” ou “strong” :
<p>This paragraph contains <b>bold words here</b> and <strong>here</strong></p>
Pour le texte en italique, utilisez les balises “i” ou “em” :
<p>This paragraph contains <i>italic words here</i> and <em>here</em></p>
Note : Lors de la création d'articles, les balises “strong” seront converties en “b” et les balises “em” seront converties en “i”.
Les titres, paragraphes, images et boutons peuvent être centrés
Titres, sous-titres et paragraphes
Ajoutez la classe “intercom-align-center” directement à la balise 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>
Images et boutons
Pour centrer une image ou un bouton, elle doit être enveloppée dans une balise “div” avec la classe “intercom-align-center” appliquée :
Image :
<div class="intercom-align-center"> <img src=”https://examply.io/image.jpg”/></div>
Bouton :
<div class="intercom-align-center">
<a class="intercom-h2b-button" href="https://examply.io">Centered Button</a>
</div>
Important : Ce sont les seules balises “div” prises en charge. Toutes les autres balises “div” seront converties en balises paragraphe.
Tableaux
Toute balise “table” doit contenir au moins une ligne (“tr”) et une cellule (“td”) :
<table>
<tr>
<td>
</td>
</tr>
</table>
Note :
Les tableaux ne peuvent pas être imbriqués dans d'autres tableaux.
Si vous envoyez des balises
thead,tfootoutbody, leur contenu sera traité comme des lignes normales.
Diviseurs (règles horizontales) :
<hr>
Qu'est-ce qui n'est pas pris en charge ?
Divs et spans
Toutes les balises “div” ou “span” que vous envoyez seront remplacées par des balises “p”.
Note : Cela exclut les divs conteneurs utilisés pour centrer les boutons et les images (voir ci-dessus).
Formulaires et champs de saisie
Toutes les balises “form”, “input” ou “textarea” et leur contenu seront supprimés du corps de votre article.
Scripts
L'inclusion de CSS ou Javascript personnalisé n'est pas prise en charge. Toutes les balises “script” et leur contenu seront supprimés de votre article. Cela signifie que les boutons dans les articles ne peuvent pas utiliser de gestionnaires onclick — ils s'afficheront comme des liens stylisés mais n'exécuteront pas de JavaScript lorsqu'on clique dessus. Pour ouvrir le Messenger depuis un bouton, liez-le à une page de votre application où Intercom est installé et déclenchez le Messenger là-bas en utilisant JavaScript (par exemple Intercom('show')).
Autres éléments
Toutes les balises ou attributs (tels que "width" ou "height") non listés dans cet article seront remplacés par des balises paragraphe. Cela inclut “head”, “html”, “footer”, “meta”, etc.
Exportation du contenu des articles du Help Center
Il n'est pas possible d'exporter vos articles via l'interface Intercom, mais vous pouvez utiliser notre documentation API pour exporter le contenu.