Damit Ihre Help Center-Artikel für Ihre Kunden am effektivsten und hilfreichsten sind, benötigen sie ein klares, leicht zu überfliegendes Format. Dies kann einfach im Artikel-Editor oder mit der Articles API erreicht werden.
Dieser Artikel zeigt genau, welche Formatierungen unterstützt werden und wie Sie Ihre gewünschten Stile mit der Articles API erreichen.
Hinweis: Für eine vollständige API-Referenz, sehen Sie unsere Entwicklerdokumentation.
Formatierung Ihrer öffentlichen Artikel
Der gesamte Fließtext muss innerhalb von Absatz-Tags (p) stehen:
<p>This is a paragraph</p>
Um einen Zeilenumbruch innerhalb eines Absatzes hinzuzufügen, verwenden Sie ein Zeilenumbruch-Tag (br):
<p>This paragraph<br>has a line break in it</p>
In Artikeln werden zwei Überschriftenebenen unterstützt: H1 und H2:
Alle anderen Überschriften-Tags, die über die API gesendet werden (H3 - H6), werden in H1 und H2 umgewandelt, wobei die Hierarchie erhalten bleibt.
<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>
Um ein Bild hinzuzufügen, verwenden Sie ein Bild-Tag (img) mit der Bild-URL als „src“-Attribut:
Das Bild wird von der angegebenen Quelle zu Intercom hochgeladen, und ein Intercom-Link wird verwendet, um es in Ihrem Artikel anzuzeigen. Unterstützte Dateitypen sind PNG, JPEG, SVG & GIF.
Wichtig: Ihre Bildquelle muss eine vollständige URL sein (z. B. https://examply.io/image.jpeg) und darf keine relative URL sein (z. B. /image.jpeg). Die Datei muss öffentlich zugänglich sein.
<img src=”https://examply.io/image.jpeg”/>
Profi-Tipp: Sie sollten auch eine Beschreibung Ihres Bildes mit einem „alt“-Attribut hinzufügen. Dies macht Ihre Artikel zugänglicher und hat SEO-Vorteile:
<img src=”https://examply.io/image.jpg” alt=”Examply project page”/>
Fügen Sie Links zu Ihren Artikeln mit Anker-Tags „a“ hinzu. Geben Sie die Ziel-URL als „href“-Attribut an:
<a href=”https://examply.io”>This is a text link</a>
Um Links als Schaltflächen anzuzeigen, fügen Sie die Klasse „intercom-h2b-button“ hinzu:
<a href=”https://examply.io” class=”intercom-h2b-button”>This link is a button</a>
Um ein Bild als Link zu verwenden, platzieren Sie es zwischen Link-Tags:
<a href=”https://examply.io”>
<img src=”https://examply.io/image_link.jpeg”/>
</a>
Hinweis: Das „target“-Attribut ist nicht erforderlich. Alle Links in Ihren Artikeln öffnen sich in einem neuen Tab.
Aufzählungs- und nummerierte Listen können mit „ungeordnete Liste (ul)“ und „geordnete Liste (ol)“ Tags hinzugefügt werden:
Jedes Element in Ihrer Liste muss innerhalb eines Listenelements (li) stehen.
Aufzählungsliste (ungeordnet):
<ul>
<li>First bulleted list item</li>
<li>Second bulleted list item</li>
</ul>
Nummerierte Liste (geordnet):
<ol>
<li>First numbered list item</li>
<li>Second numbered list item</li>
</ol>
Tipp: Für verschachtelte Listen fügen Sie ein „ol“ oder „ul“ Tag innerhalb eines anderen Listenelements hinzu.
Videos von Youtube, Wistia, Vimeo, Loom, Vidyard oder StreamIO können in einem iframe hinzugefügt werden:
<iframe src=”https://www.youtube.com/embed/jqO8AQHj7Fw”></iframe>
Hinweis: Sie müssen die embed-URL für Ihr Video als „src“-Attribut verwenden, nicht einen direkten Link zum Video selbst. Das Senden einer nicht unterstützten URL führt zum Fehlschlagen Ihrer API-Anfrage.
Code kann inline oder in Codeblöcken mit „pre“ und „code“ Tags hinzugefügt werden.
Codeblock:
<pre><code>This is a code block, perfect for larger blocks of code</code></pre>
Inline-Code in einem Absatz:
<p>This paragraph contains some <code>inline code</code>.</p>
Formatierung Ihrer Artikel
Für Fettdruck verwenden Sie „b“ oder „strong“ Tags:
<p>This paragraph contains <b>bold words here</b> and <strong>here</strong></p>
Für Kursivschrift verwenden Sie „i“ oder „em“ Tags:
<p>This paragraph contains <i>italic words here</i> and <em>here</em></p>
Hinweis: Beim Erstellen von Artikeln werden „strong“-Tags in „b“ und „em“-Tags in „i“ umgewandelt.
Überschriften, Absätze, Bilder und Schaltflächen können zentriert ausgerichtet werden
Überschriften, Unterüberschriften und Absätze
Fügen Sie die Klasse „intercom-align-center“ direkt zum h1-, h2- oder p-Tag hinzu:
<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>
Bilder und Schaltflächen
Um ein Bild oder eine Schaltfläche zentriert auszurichten, muss es in einem „div“-Tag mit der Klasse „intercom-align-center“ eingeschlossen sein:
Bild:
<div class="intercom-align-center"> <img src=”https://examply.io/image.jpg”/></div>
Schaltfläche:
<div class="intercom-align-center">
<a class="intercom-h2b-button" href="https://examply.io">Centered Button</a>
</div>
Wichtig: Dies sind die einzigen unterstützten „div“-Tags. Alle anderen „div“-Tags werden in Absatz-Tags umgewandelt.
Tabellen
Jeder „table“-Tag muss mindestens eine Zeile („tr“) und eine Zelle („td“) enthalten:
<table>
<tr>
<td>
</td>
</tr>
</table>
Hinweis:
Tabellen können nicht innerhalb anderer Tabellen verschachtelt werden.
Wenn Sie
thead,tfootodertbodyTags senden, werden deren Inhalte als normale Zeilen behandelt.
Trennlinien (Horizontale Linien):
<hr>
Was wird nicht unterstützt?
Divs und Spans
Alle „div“- oder „span“-Tags, die Sie senden, werden durch „p“-Tags ersetzt.
Hinweis: Dies schließt die Container-divs aus, die zum Zentrieren von Schaltflächen und Bildern verwendet werden (siehe oben).
Formulare und Eingaben
Alle „form“, „input“ oder „textarea“-Tags und deren Inhalte werden aus dem Textkörper Ihres Artikels entfernt.
Skripte
Das Einbinden von benutzerdefiniertem CSS oder Javascript wird nicht unterstützt. Alle „script“-Tags und deren Inhalte werden aus Ihrem Artikel entfernt. Das bedeutet, dass Schaltflächen in Artikeln keine onclick-Handler verwenden können – sie werden als formatierte Links angezeigt, führen aber kein JavaScript aus, wenn sie angeklickt werden. Um den Messenger von einer Schaltfläche aus zu öffnen, verlinken Sie auf eine Seite in Ihrer App, auf der Intercom installiert ist, und lösen Sie den Messenger dort mit JavaScript aus (z. B. Intercom('show')).
Andere Elemente
Alle Tags oder Attribute (wie "width" oder "height"), die in diesem Artikel nicht aufgeführt sind, werden durch Absatz-Tags ersetzt. Dazu gehören „head“, „html“, „footer“, „meta“ usw.
Exportieren von Help Center-Artikelinhalten
Es ist nicht möglich, Ihre Artikel über die Intercom-Benutzeroberfläche zu exportieren, aber Sie können unsere API-Dokumentation verwenden, um den Inhalt zu exportieren.