Intercom bietet drei Standard-E-Mail-Vorlagen. Sie können jedoch auch Ihre eigene Vorlage mit dem visuellen Vorlagendesigner anpassen oder eine neue Vorlage aus HTML erstellen, was wir unten erläutern.
Um darauf zuzugreifen, gehen Sie zu Einstellungen > Ausgehend > E-Mail-Vorlagen und klicken Sie auf Neue Vorlage > Aus HTML erstellen.
Jetzt können Sie das HTML so bearbeiten, dass Dinge wie Schriftgröße, Schriftart und Farbe zu Ihrer Marke passen. Sie können auch Ihr Logo oder Ihren Header oben hinzufügen. Sie können auch eine komplett neue Vorlage von Grund auf mit beliebigem HTML oder Design erstellen.
Hinweis:
Arbeitsbereiche sind auf 100 benutzerdefinierte E-Mail-Vorlagen begrenzt.
Die maximale Größe der Vorlage ist auf 200.000 Zeichen beschränkt.
Wenn Sie mit Ihrer Vorlage zufrieden sind, geben Sie ihr einen Namen und speichern Sie sie. Sie wird dann in Ihrer Vorlagenliste verfügbar sein, wenn Sie eine E-Mail verfassen.
Wichtig: Benutzerdefinierte Vorlagen sollten nicht wie der vollständige HTML-Editor verwendet werden (HTML, CSS + Inhalt einfügen), sondern sich mehr auf Kopf- und Fußzeilen sowie die Gestaltung des Inhalts konzentrieren. Wenn Sie Ihren gesamten Inhalt in die benutzerdefinierte Vorlage einfügen und die Nachricht im Standardeditor nicht bearbeiten, erhalten Sie einen Fehler beim Versuch, die Nachricht zu senden.
Tipps zur Verwendung von HTML-Vorlagen
1. Sie müssen diese Tags in der Vorlage einfügen:
Das
{{content}}-TagDas
{{unsubscribe_link}}- oder{{unsubscribe_url}}-Tag
Hinweis: Die Abmelde-URL sollte vor dem </body>-Tag platziert werden, damit sie von unseren Validierungsprüfungen erkannt wird und die Nachricht korrekt gespeichert werden kann.
Das {{content}}-Tag
Das {{content}}-Tag wird durch den Textkörper Ihrer E-Mail ersetzt. Dies ist der Inhalt, der sich bei jeder neuen Nachricht ändert. Sie müssen dieses Tag einfügen, auch wenn Sie den Inhalt des Nachrichtenkörpers nicht aktualisieren möchten.
Das {{unsubscribe_link}}-Tag
Sie müssen Ihren users die Möglichkeit geben, sich von Ihren Nachrichten abzumelden. Das {{unsubscribe_link}}-Tag enthält einen vollständig formatierten HTML-Link mit Text, auf den der Benutzer klicken kann, um sich abzumelden. Sie können den Link selbst in der E-Mail einfügen:
{{unsubscribe_link}}
Das {{unsubscribe_url}}-Tag
Wenn Sie Ihre eigene Formulierung für den Abmeldelink bereitstellen möchten, enthält das {{unsubscribe_url}}-Tag nur die Abmelde-URL. Sie können Folgendes tun:
<a href="{{unsubscribe_url}}">IHRE BENUTZERDEFINIERTE ABMELDEFORMULIERUNG</a>
Wichtig:
Die Abmelde-URL muss vor dem
</body>-Tag platziert werden, damit sie von unseren Validierungsprüfungen erkannt wird und die Nachricht korrekt gespeichert werden kann.Für den Abmeldelink gibt es keine Möglichkeit, die URL selbst anzupassen (nur der Linktext kann angepasst werden).
2. Beim Hinzufügen von Benutzer-, Firmen- oder Autorenvariablen zu Ihrer Vorlage.
Benutzervariablen:
{{ first_name | fallback:"ENTER FALLBACK HERE" }}Benutzerdefinierte Benutzervariablen:
{{ custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}Firma
{{ company.name | fallback:"ENTER FALLBACK HERE" }}Firmen-ID
{{ company.remote_company_id | fallback:"ENTER FALLBACK HERE" }}Benutzerdefinierte Firmenvariablen:
{{ company.custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}
Autor- und Arbeitsbereichsvariablen
Um den Vornamen, den vollständigen Namen des sendenden Teammitglieds oder den Namen Ihres Arbeitsbereichs in einer Vorlage einzufügen, können Sie eine der folgenden Variablen verwenden:
{{ message.author.first_name }}
{{ message.author.name }}
{{ app.name }}
Dies verwendet den Namen des Teammitglieds im Feld „Von“ jeder mit dieser Vorlage gesendeten Nachricht.
3. Beim Einfügen von Code von einem anderen Anbieter...
...wie MailChimp oder Campaign Monitor, beachten Sie, dass Ihre benutzerdefinierten Tags möglicherweise nicht funktionieren und Sie den Code anpassen müssen, damit er richtig funktioniert.
4. Ihre Vorlagen responsiv machen
Um sicherzustellen, dass Ihre E-Mails responsiv sind und auf Mobilgeräten gut angezeigt werden, verwenden Sie diesen „Style“-Tag, den wir in der Standardvorlage eingefügt haben.
<style type="text/css" data-premailer="ignore">...</style>
5. Verwendung von Bildern in Ihrer Vorlage
Wenn Sie Bilder in Ihrer Vorlage verwenden, müssen Sie eine App wie Imgur oder Zight verwenden, um diese zu hosten. Fügen Sie dann einfach die URL in Ihren Vorlagencode ein, und das Bild wird angezeigt.
Verwenden Sie HTTPS (nicht HTTP) für Bilder, um gemischte Inhaltswarnungen zu vermeiden. HTTP-Bilder werden in der E-Mail-Vorschau in Intercom nicht angezeigt.
6. Verwendung von CSS in Ihrer Vorlage
Sie können beliebiges CSS verwenden, wir werden alle Stile automatisch inline setzen, es sei denn, Sie fügen das Attribut data-premailer="ignore" im style-Attribut im Kopf Ihrer benutzerdefinierten Vorlage ein. Das Ignorieren kann hilfreich sein, wenn Sie ein responsives Vorlagenlayout haben und das Inline-CSS dieses Layout zerstören würde.
Hinweis: Beim Gestalten des Hauptinhaltsbereichs Ihrer Vorlage wenden Sie keine overflow: hidden;-Regel an, da dies die Bearbeitungserfahrung im Nachrichten-Composer beeinträchtigt. Die Anwendung dieser Regel führt dazu, dass UI-Komponenten des Nachrichten-Composers, z. B. der Textformatierer, der Attribut-Einfüger usw., ausgeblendet werden, wie hier:
7. Schreiben Ihrer Nachricht
Um Ihre Vorlage zu verwenden, wählen Sie sie beim nächsten Verfassen einer E-Mail im Dropdown-Menü des Nachrichten-Composers aus. Sie können dann den Inhalt mit einfachem HTML gestalten, und er wird anstelle des {{ content }}-Tags angezeigt, das Sie in Ihre Vorlage eingefügt haben.
8. Schaltflächen gestalten
Wenn Sie eine benutzerdefinierte E-Mail-Vorlage erstellen, beachten Sie bitte, dass Schaltflächen, die vom Composer eingefügt werden, nur minimale Stile haben. Sie können die Schaltflächen anpassen, indem Sie die HTML-Klasse .intercom-h2b-button und die folgende Markierung ansprechen:
<a href="http://test.com" class="intercom-h2b-button">Button-Text</a>
9. Testen Sie Ihre benutzerdefinierten Vorlagen in verschiedenen E-Mail-Clients
Jeder E-Mail-Anbieter rendert E-Mails etwas anders. Unsere Standardvorlagen sind so gestaltet, dass sie mit möglichst vielen E-Mail-Clients gut funktionieren.
Wenn Sie eine benutzerdefinierte Vorlage verwenden, empfehlen wir, die Darstellung Ihrer E-Mail in mehreren verschiedenen E-Mail-Clients zu überprüfen. Dies kann durch die Option „Test-E-Mail senden“ jeder Nachricht erfolgen, um Testsendungen an verschiedene E-Mail-Clients zu senden.
Eine weitere Möglichkeit ist die Verwendung eines Drittanbieter-Tools, um einen umfassenden Überblick darüber zu erhalten, wie Ihre E-Mail in einer Vielzahl von Clients dargestellt wird – Litmus, 250ok und Email on Acid sind nur einige Beispiele für solche Tools.
Einmalige E-Mails in vollem HTML
Wenn Sie eine einmalige Nachricht in HTML senden möchten, anstatt eine wiederverwendbare Vorlage zu erstellen, klicken Sie beim Verfassen einer neuen Nachricht einfach auf </> Zum HTML-Editor wechseln.
FAQs
dir="rtl" wird aus der Vorlage entfernt, ist das beabsichtigt?
Ja, das ist das erwartete Verhalten. Es gibt eine Möglichkeit, rtl in eine benutzerdefinierte Vorlage einzufügen, indem man die CSS-Alternative style="direction: rtl;" verwendet. Diese wird von unseren Vorlagen nicht entfernt.
Ich möchte, dass die Betreffzeile meiner E-Mail mit einem # beginnt, aber dieses wird entfernt – wie kann ich das machen?
Wenn Sie vor dem # einen Backslash \ setzen, wird es korrekt angezeigt. Zum Beispiel wird bei der Betreffzeile #HashtagsAreGreat das # entfernt und es erscheint HashtagsAreGreat. Wenn Sie jedoch \#HashtagsAreGreat senden, wird es als #HashtagsAreGreat angezeigt.
Warum wird ein Bild in der HTML-E-Mail-Vorschau nicht angezeigt?
Wenn Sie Bilder in Ihrer HTML-E-Mail verwenden, sollten Sie https-URLs verwenden, um die Vorschau der Nachricht zu sehen. Wir unterstützen keine Bilder mit http-URL, daher wird das Bild in der Vorschau als defekt angezeigt (wird aber korrekt an den Kunden gesendet). Um dies zu beheben, sollten Sie Ihr Bild auf einer https-URL hosten.
Ich möchte den Namen des Nachrichtenautors und den App-Namen direkt aus einer benutzerdefinierten Vorlage dynamisch laden, ist das möglich?
Das ist tatsächlich möglich. Hier ist eine benutzerdefinierte HTML-Vorlage, die Sie verwenden können.
<table>
<tbody>
<tr>
<td width="40" class="space"> </td>
<td valign="middle" width="50" style="color: #272727;" align="left">
<img src="example-image.com" height="40" width="40" class="avatar" alt="intercomavatar">
</td>
<td class="admin_name" style="color: #999999">
<p> {{ message.author.first_name }} from {{ app.name }} </p>
</td>
</tr>
</tbody>
</table>
Hinweis: Sie sollten das src="example-image.com" des img-Tags durch einen tatsächlichen Link zu einem Bild ersetzen, das Sie verwenden möchten.
Wichtig:
Sie können nicht zum visuellen Editor zurückwechseln oder den Nachrichtentyp auf In-App ändern.
Das Link-Tracking von vorlagenbasierten URLs funktioniert bei einmaligen HTML-E-Mails nicht. Wir empfehlen stattdessen die Verwendung einer benutzerdefinierten E-Mail-Vorlage oder das Erstellen einer neuen Vorlage aus HTML.
Wenn Sie Intercom ein Attribut zur Einbindung in einen Link senden, kümmern wir uns um die Codierung.
Sie können Google Fonts einbinden und verwenden. Wenn Ihr E-Mail-Client dies nicht unterstützt, wird der Text in Ihren E-Mails auf Ihre websafe Schriftart zurückfallen. Wenn Sie Google Fonts verwenden, müssen Sie die '@import'-Methode verwenden, um das Stylesheet in Intercom einzubetten.
Einige E-Mail-Clients, die Webfonts unterstützen:
- Apple Mail
- Lotus Notes 8
- Outlook 2011 für Mac und Outlook 2016
- iOS Mail
- Android Mail App
- Android Mail 2.3, 4.2 und 4.4Es ist nicht möglich, andere extern gehostete Schriftarten einzubinden.
Weitere Details finden Sie unter HTML-E-Mails erstellen.