Verwenden Sie diesen Artikel, um Ihre Help Center-Artikel mit der Articles API zu formatieren und zu gestalten sowie Ihre Artikelinhalte programmatisch zu exportieren. Die Articles API ermöglicht es Ihnen, Artikel zu erstellen und zu aktualisieren, indem Sie HTML im body-Feld senden – dieser Artikel behandelt alle unterstützten HTML-Elemente, wie man sie gestaltet und was entfernt oder konvertiert wird.
Wenn Sie Artikel lieber manuell formatieren möchten, können Sie dies stattdessen im Artikel-Editor tun.
Hinweis: Für eine vollständige API-Referenz, sehen Sie unsere Entwicklerdokumentation.
Hinweis: Dieser Artikel richtet sich an Entwickler, die die Intercom Articles API (application programming interface) integrieren. Sie benötigen einen API-Schlüssel zur Authentifizierung der Anfragen – siehe die API-Referenz für Authentifizierungsdetails.
Formatierung Ihrer öffentlichen Artikel
Der gesamte Fließtext muss innerhalb von Absatz- (p) Tags stehen:
<p>This is a paragraph</p>
Um einen Zeilenumbruch innerhalb eines Absatzes hinzuzufügen, verwenden Sie ein Zeilenumbruch- (br) Tag:
<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. Diese Normalisierung ist relativ: Wenn im Body kein <h1> vorhanden ist, verschiebt Intercom alle Überschriften nach oben, sodass die oberste Ebene bei <h1> beginnt. Wenn im Body ein <h1> enthalten ist, bleiben niedrigere Überschriftenebenen erhalten.
<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>
Hinweis: Die title- und body-Felder werden unabhängig behandelt – der Artikeltitel wird automatisch als <h1> dargestellt, beeinflusst jedoch nicht, wie Überschriften im Body normalisiert werden. Um <h2> und tiefere Überschriftenebenen zu erhalten, fügen Sie immer ein <h1> im Artikel-Body ein.
Hinweis: Der Help Center-Editor zeigt H3- und H4-Überschriftenoptionen an, diese werden jedoch beim Speichern des Artikels oder beim Zugriff über die API auf H1 oder H2 normalisiert. Wenn sich Überschriftenebenen in Ihren Artikeln unerwartet ändern, ist dies erwartetes Verhalten – Inhalte, die über die API gesendet oder von einem Übersetzungsdienst verarbeitet werden, lösen die Normalisierung aus.
Um ein Bild hinzuzufügen, verwenden Sie ein Bild- (img) Tag 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), keine relative URL (z. B. /image.jpeg), und 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 für Kunden, die Screenreader verwenden, zugänglicher und hilft Suchmaschinen (SEO – search engine optimization), Ihre Inhalte genau zu indexieren:
<img src=”https://examply.io/image.jpg” alt=”Examply project page”/>
Fügen Sie Links zu Ihren Artikeln mit Anker-„a“-Tags 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 „unordered list (ul)“ und „ordered list (ol)“ Tags hinzugefügt werden:
Jedes Element in Ihrer Liste muss innerhalb eines Listenelements (li) Tags stehen.
Aufzählungsliste (unordered):
<ul>
<li>First bulleted list item</li>
<li>Second bulleted list item</li>
</ul>
Nummerierte Liste (ordered):
<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 ein.
Videos von YouTube, Wistia, Vimeo, Loom, Vidyard oder StreamIO können mit einem iframe (inline frame) Tag 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,tfootodertbody-Tags 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 zwei spezifischen div-Container aus, die für die Zentrierung unterstützt werden: einer um ein img-Tag und einer um ein a-Tag mit der Klasse intercom-h2b-button. Diese sind im Abschnitt „Überschriften, Absätze, Bilder und Schaltflächen können zentriert ausgerichtet werden“ dokumentiert.
Formulare und Eingaben
Alle „form“, „input“ oder „textarea“-Tags und deren Inhalte werden aus dem Body 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 gestaltete Links dargestellt, führen jedoch 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. Dies schließt „head“, „html“, „footer“, „meta“ usw. ein.
Exportieren von Help Center-Artikelinhalten
Sie können den vollständigen Inhalt Ihrer Help Center-Artikel exportieren – einschließlich des HTML-Bodys, Titels, Metadaten und Lokalisierungsdaten – mit der Articles API. Jeder Artikel wird einzeln über seine ID abgerufen. Die Authentifizierung erfolgt über Ihren API-Schlüssel.
Das Exportieren von Artikeln über die Intercom-Benutzeroberfläche wird nicht unterstützt. Verwenden Sie die API-Referenzdokumentation, um Artikelinhalte programmatisch abzurufen. Die Referenz behandelt das vollständige Antwortschema, verfügbare Felder und Authentifizierungsanforderungen.