Zum Hauptinhalt springen

Erstellung von HTML-E-Mails

Wann Sie E-Mails mit HTML-Vorlagen, einmaligen HTML-E-Mails oder einfachen HTML-Blöcken erstellen sollten.

Verfasst von Beth-Ann Sher

Sie können HTML verwenden, um benutzerdefinierte E-Mails in Intercom zu erstellen. Sie haben drei Optionen, die jeweils einem anderen Zweck dienen. Sie können entweder:

  1. Erstellen Sie eine wiederverwendbare E-Mail-Vorlage aus HTML empfohlen

  2. Senden Sie eine einmalige vollständige HTML-E-Mail.

  3. Formatieren Sie Ihre E-Mail mit HTML-Blöcken.

Erstellen Sie eine wiederverwendbare Vorlage aus HTML

Intercom bietet Ihnen eine Auswahl von drei Vorlagen für Ihre E-Mails. Wenn Sie jedoch eine stilisierte Vorlage erstellen möchten, die dem Design Ihrer Marke entspricht, können Sie eine E-Mail-Vorlage aus HTML erstellen. Ihre neue benutzerdefinierte Vorlage wird in Intercom als Vorlage gespeichert und Sie können sie so oft verwenden, wie Sie möchten.

Warum eine benutzerdefinierte Vorlage anstelle einer einmaligen HTML-E-Mail erstellen?

Sie sollten eine benutzerdefinierte Vorlage (und keine einmalige HTML-E-Mail) erstellen, wenn Sie einen individuellen Stil für Ihre Marke wünschen, aber dennoch die Leistungsfähigkeit und Benutzerfreundlichkeit des Komponisten nutzen möchten. Sobald Sie Ihre benutzerdefinierte Vorlage in Intercom speichern, können Sie sie als Vorlage auswählen und Ihre E-Mail schreiben, ohne HTML verwenden zu müssen.

Erstellen Sie eine E-Mail-Vorlage aus HTML, wenn Sie:

  • Den Stil Ihrer E-Mail festlegen möchten, einschließlich Schriftart, Größe und Hintergrundfarbe.

  • Einen benutzerdefinierten Kopfbereich, Fußzeile oder Rahmen hinzufügen möchten.

  • Link-Tracking von vorlagenbasierten URLs verwenden möchten.

  • Den Stil Ihrer Intercom-Schaltfläche anpassen möchten. Fügen Sie dazu einige Stile zur HTML-Klasse .intercom-h2b-button hinzu.

Bereit loszulegen? So erstellen Sie eine E-Mail-Vorlage aus HTML in Intercom.

Senden Sie eine einmalige vollständige HTML-E-Mail

Sie können auch ein benutzerdefiniertes Inhaltslayout erstellen und eine einmalige E-Mail im HTML-Design senden.

Hinweis: Link-Tracking von vorlagenbasierten URLs funktioniert in einmaligen HTML-E-Mails nicht. Wir empfehlen dringend, stattdessen eine benutzerdefinierte E-Mail-Vorlage zu verwenden oder eine neue Vorlage aus HTML zu erstellen.

Wie man eine vollständige HTML-E-Mail erstellt

Um Ihre Nachrichten vollständig in HTML zu schreiben, erstellen Sie eine neue E-Mail-Nachricht mit einer beliebigen Vorlage und klicken Sie dann unten links im E-Mail-Komponisten auf </> Zum HTML-Editor wechseln.

Der HTML-Komponist öffnet sich rechts und jetzt können Sie Ihre E-Mail erstellen.

Während Sie schreiben, können Sie sehen, wie Ihre Nachricht in der Vorlagenvorschau angezeigt wird.

Wichtig: Sie können nicht zum visuellen Editor zurückkehren oder den Nachrichtentyp auf In-App ändern, sobald Sie begonnen haben, Ihre E-Mail vollständig in HTML zu schreiben.

Formatieren Sie Ihre E-Mail mit HTML-Blöcken

Wenn Sie von den regulären Formatierungsoptionen des Komponisten abweichen müssen, können Sie HTML-Blöcke verwenden, um benutzerdefinierte Elemente zu Ihrer E-Mail hinzuzufügen.

Sie können HTML-Blöcke verwenden, um:

  • Eine Tabelle in Ihre E-Mail einfügen.

  • Daten in HTML-Tabellen zur besseren Übersicht anzeigen.

  • HiDPI-Retina-Bilder in Ihre E-Mail einfügen.

  • Blockzitate erstellen.

  • Eine benutzerdefinierte Schaltfläche hinzufügen (Sie müssen Ihren Schaltflächenstil zuerst in einer benutzerdefinierten Vorlage erstellen, aber Sie können die Klasse mit einem HTML-Block festlegen).

  • Eine Spalte hinzufügen (praktisch, um Bilder nebeneinander zu platzieren).

Um einen HTML-Block zu Ihrer E-Mail hinzuzufügen, fahren Sie einfach mit der Maus über den Komponisten und wählen Sie das + Symbol, um </> HTML einzufügen.

4 Tipps zur Verwendung von HTML-Blöcken in Ihren E-Mails

  1. Verwenden Sie HTTPS (nicht HTTP) für Bilder, um gemischte Inhaltswarnungen zu vermeiden. HTTP-Bilder werden in Ihrer E-Mail-Vorschau in Intercom nicht angezeigt.

  2. Achten Sie darauf, Ihre Nachricht vorzuschauen, besonders beim Versand per E-Mail. In-App-Nachrichten können Sie immer noch anpassen, aber sobald eine E-Mail versendet wurde, gibt es kein Zurück mehr.

  3. Während eingebettete Videos für In-App-Nachrichten gut funktionieren, unterstützen wir keine iframes und zeigen Ihre eingebetteten Videos nicht an.

  4. Denken Sie daran, dass alle Stile und ID-Attribute, die Sie im Nachrichtenkörper einfügen, entfernt werden.

Wenn Sie spezielle Stile auf HTML innerhalb Ihrer HTML-Blöcke anwenden möchten, können Sie eine E-Mail-Vorlage aus HTML erstellen mit Ihren spezifischen Stilen im <head> und dann die Klassen im HTML-Block referenzieren. Diese Stile werden beim Versand der E-Mail inline gesetzt.

HTML-Tags und Attribute, die Intercom unterstützt

Wir unterstützen zwei HTML-Teilmengen in Intercom. Unten sehen Sie die Tags und Attribute, die wir für vollständige HTML-E-Mails und benutzerdefinierte Vorlagen unterstützen. Und Sie sehen die Tags und Attribute, die wir für HTML-Blöcke unterstützen.

Unterstützte Elemente im HTML-Modus (für vollständige HTML-E-Mails und benutzerdefinierte Vorlagen):

  • Strukturelemente: article, aside, blockquote, body, br, div, figcaption, figure, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, main, p, section, wbr

  • Kopfelemente: meta, title

  • Listenelemente: dd, dl, dt, li, ol, ul

  • Textformatierungselemente: a, abbr, address, b, bdi, bdo, center, cite, code, del, dfn, em, i, ins, kbd, mark, pre, q, rp, rt, ruby, s, samp, small, span, strike, strong, sub, sup, time, u, var

  • Medienelemente: img

  • Tabellenelemente: caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

Unterstützte Attribute im HTML-Modus (für vollständige HTML-E-Mails und benutzerdefinierte Vorlagen):

  • Alle Attribute unterstützen: align, bgcolor, class, dir, height, id, lang, style, title, width

  • a-Tag unterstützt: href, name, target

  • blockquote-Tag unterstützt: cite

  • col-Tag unterstützt: span, valign

  • colgroup-Tag unterstützt: span, valign

  • del-Tag unterstützt: xmlns

  • html-Tag unterstützt: href, name, target

  • img-Tag unterstützt: alt, src 

  • ins-Tag unterstützt: cite, datetime

  • meta-Tag unterstützt: content, http-equiv, name

  • ol-Tag unterstützt: reversed, start, type

  • q-Tag unterstützt: cite

  • style-Tag unterstützt: data-premailer, type

  • table-Tag unterstützt: border, cellpadding, cellspacing, summary

  • tbody-Tag unterstützt: valign

  • td-Tag unterstützt: abbr, axis, colspan, rowspan, valign

  • tfoot-Tag unterstützt: valign

  • th-Tag unterstützt: abbr, axis, colspan, rowspan, scope, valign

  • thead-Tag unterstützt: valign

  • time-Tag unterstützt: datetime, pubdate

  • tr-Tag unterstützt: valign

  • ul-Tag unterstützt: type

Hier sind die verschiedenen HTML-Tags, die wir für HTML-Blöcke unterstützen:

  • Überschriften: h1, h2, h3, h4, h5, h6

  • Textformatierungstags wie strong, em, sub, sup, small, code, pre, strike 

  • Tags zum Erstellen von Tabellen: table, thead, tbody, tfoot, th, tr, td

  • Listen: ol, ul

  • Hyperlinks mit dem Ankerelement

  • Bilder

Hier sind die HTML-Attribute, die wir für HTML-Blöcke unterstützen:

  • ALLE Tags erlauben dir, lang, title, width, height, id, class, align

  • a erlaubt href, target, name

  • blockquote erlaubt cite

  • col erlaubt span, width, valign

  • colgroup erlaubt span, width, valign

  • del erlaubt cite, datetime

  • img erlaubt align, alt, height, src, width, title

  • ins erlaubt cite, datetime

  • ol erlaubt start, reversed, type

  • q erlaubt cite

  • table erlaubt summary, width, border, cellspacing, cellpadding

  • tbody erlaubt valign

  • tfoot erlaubt valign

  • thead erlaubt valign

  • td erlaubt abbr, axis, colspan, rowspan, width, valign

  • th erlaubt abbr, azis, colspan, rowspan, scope, width, valign

  • thead erlaubt tr

  • time erlaubt datetime, pubdate

  • ul erlaubt type

Best Practices für die Verwendung von HTML in Intercom

Egal, ob Sie eine einmalige HTML-E-Mail senden oder eine wiederverwendbare benutzerdefinierte E-Mail-Vorlage erstellen, gelten die folgenden Best Practices:

Fügen Sie Ihre CSS-Stile inline ein 

Die meisten E-Mail-Clients erfordern, dass Sie Ihre CSS-Stile inline einfügen, was die Entwicklungserfahrung nicht gerade angenehm macht. Das liegt daran, dass Sie beim Hinzufügen eines Stils diesen zu jedem einzelnen <p>-Tag hinzufügen müssen. Und wenn Sie den hinzugefügten Stil ändern möchten, müssen Sie den Stil für jeden <p>-Tag einzeln anpassen. In Intercom können (und sollten) Sie jedoch Ihr HTML und Ihre Stile wie gewohnt mit Style-Tags und Klassen schreiben. Wenn die E-Mail gesendet wird, fügt Intercom alle Ihre CSS-Stile inline in die entsprechenden Elemente ein.

Responsive Stile sollten nicht inline eingefügt werden 

Eine Ausnahme ist, dass Sie responsive Stile (die innerhalb eines @media() {} Blocks liegen) nicht inline einfügen sollten. Wenn sie inline eingefügt werden, werden sie standardmäßig angewendet und nicht nur bei einer bestimmten Bildschirmbreite. Stattdessen sollten sie in einem Style-Tag mit der speziellen Anweisung data-premailer="ignore" platziert werden. Das bedeutet, dass diese responsiven Stile nicht inline eingefügt werden. Browser, die Media Queries verstehen, wenden diese Stile je nach Bildschirmgröße an.

Fügen Sie die richtigen Datenattribute hinzu 

  • Beim Erstellen einer benutzerdefinierten Vorlage ist es erforderlich, ein einzelnes {{content}}-Tag zu haben. Sie können es überall innerhalb des <body>-Tags platzieren. Derzeit unterstützen wir nur ein {{content}}-Tag pro E-Mail, was bedeutet, dass Sie nicht mehr als einen Inhaltsbereich pro E-Mail haben können.

  • Beim Erstellen einer benutzerdefinierten Vorlage oder beim Schreiben von vollständigem HTML in Intercom müssen Sie entweder ein {{unsubscribe_url}} oder {{unsubscribe_link}} einfügen, um den Anti-Spam-Gesetzen zu entsprechen. Sie können es überall innerhalb des <body>-Tags platzieren So geht's.

Beherrschen Sie die HTML-Grundlagen

Und schließlich möchten wir Ihnen einige grundlegende Tipps geben, wie Sie bessere HTML-E-Mails erstellen:

  • Erstellen Sie Ihre Layouts mit Tabellen, um sicherzustellen, dass Ihre E-Mail in allen E-Mail-Clients korrekt angezeigt wird. Wenn Sie beispielsweise einen Abstand von 20px unter einem Textabsatz einfügen möchten, ist es am besten, eine Zeile mit dem Attribut height="20" hinzuzufügen. Verwenden Sie keine Padding-, Margin- oder Float-Eigenschaften, da diese nicht immer funktionieren (insbesondere bei bestimmten Outlook-Versionen).

  • Fügen Sie alle Stile inline in Ihre E-Mail ein, damit jeder E-Mail-Client Ihre Stile anwendet und Ihr Design beim Senden korrekt angezeigt wird, um Ihren Arbeitsablauf zu erleichtern. Intercom unterstützt Sie dabei.

  • Sie können benutzerdefinierte gehostete Webfonts von einem Open-Source-Schriftartenservice wie Google Fonts verwenden. Alles, was Sie tun müssen, ist, den Code in Ihre E-Mail-Vorlage einzubetten. Beachten Sie jedoch, dass wenn Ihr E-Mail-Client dies nicht unterstützt, der Text in Ihren E-Mails auf Ihre web-sichere Schriftart zurückfällt.

  • Um ein responsives Design zu erstellen, sollte Ihre Breite mindestens 320px und höchstens 600px betragen. Es ist am besten, eine maximale Breite von 600px als Standardansicht zu verwenden. Es ist auch wichtig, Media Queries zu verwenden, um Ihre Vorlage bei kleineren Ansichten in eine einzelne Spalte zu verwandeln.

  • Versuchen Sie, die Dateigröße Ihrer Bilder so klein wie möglich zu halten (maximal 1 MB). Das Herunterladen großer Bilder führt zu einer suboptimalen Erfahrung für Ihre users, insbesondere für diejenigen, die Ihre E-Mail auf mobilen Geräten ansehen, da Bilder lange zum Laden brauchen können.

  • Verwenden Sie ein E-Mail-Testtool wie Litmus, um Ihre E-Mails in allen Ziel-E-Mail-Clients und Browsern zu testen. Es reicht nicht aus, Ihre E-Mail nur in einem normalen Browser oder in ein oder zwei E-Mail-Clients anzusehen. Sie alle liefern unterschiedliche Ergebnisse. Tools wie Litmus geben Ihnen volle Transparenz darüber, wie Ihre E-Mail überall aussehen wird.

Jetzt, da Sie gelernt haben, wie man bessere HTML-E-Mails in Intercom erstellt, möchten Sie sicherstellen, dass sie zugestellt und geöffnet werden.

Verwandte Artikel
3 E-Mail-Vorlagen zur Auswahl
HTML-E-Mail-Vorlagen erstellen
Erste Schritte mit Outbound-E-Mails
Visueller E-Mail-Vorlagendesigner
Häufig gestellte Fragen zur E-Mail-Anpassung
Hat dies deine Frage beantwortet?