E-Mail-Inhalte mit dem HTML-Code-Editor erstellen

Wenn Sie sich mit HTML auskennen und lieber Ihren eigenen Code schreiben, können Sie E-Mails mit dem Pushwoosh HTML-Code-Editor erstellen.

E-Mail-Inhalte erstellen

Um mit der Erstellung von E-Mail-Inhalten zu beginnen, fügen Sie Ihren HTML-Code in den HTML-Tab ein. Der Editor bietet Echtzeit-Vorschauen der E-Mail, während Sie daran arbeiten.

Alternativ können Sie eine HTML-Datei hochladen, indem Sie auf HTML-Datei hochladen im unteren Bereich klicken.

Um Ihren E-Mails eine persönliche Note zu verleihen, verwenden Sie benutzerdefinierte Tags. Gehen Sie dazu wie folgt vor:

Klicken Sie auf das Tag-Symbol am unteren Rand des Editors.
Wählen Sie das gewünschte Tag und seinen Modifikator aus und geben Sie bei Bedarf einen Standardwert an.
Klicken Sie auf Einfügen, um das benutzerdefinierte Tag in Ihren E-Mail-Inhalt aufzunehmen.

Oberfläche zur Einfügung benutzerdefinierter Tags, die die Tag-Auswahl und Optionen für Standardwerte zeigt

Um ein Emoji in Ihre E-Mail einzufügen, klicken Sie auf das Emoji-Symbol am unteren Rand des Editors.

Lokalisierung verwenden

Die Lokalisierung ermöglicht es Ihnen, personalisierte Erlebnisse für Benutzer in verschiedenen Sprachen bereitzustellen.

Im HTML-Code-Editor können Sie die Lokalisierung verwenden, indem Sie eine Standardsprache definieren und mehrere Sprachoptionen hinzufügen. Sie können beispielsweise eine Standardnachricht auf Englisch festlegen und dann Übersetzungen auf Deutsch und Spanisch hinzufügen. Dadurch wird sichergestellt, dass sich Ihr E-Mail-Inhalt an die Spracheinstellungen jedes Benutzers anpasst.

Unten sehen Sie ein Beispiel, wie Sie Ihre Lokalisierungsdaten strukturieren können. Hierbei wird Englisch als Standardsprache sowie deutsche und spanische Übersetzungen verwendet.

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

Sobald Ihre Lokalisierungsdaten strukturiert und im Lokalisierungs-Tab des Editors hinzugefügt wurden, integrieren Sie sie mithilfe von Platzhaltern in Ihren HTML-Inhalt. Die Platzhalter fügen dynamisch lokalisierten Text in Ihren Inhalt ein, basierend auf der Spracheinstellung des Benutzers. So implementieren Sie es in Ihrem HTML:

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

Stellen Sie sich folgendes Szenario vor: Sie werben für einen zeitlich begrenzten Rabatt auf Kaffeemischungen. Durch die Verwendung der oben genannten Lokalisierungsstruktur können Sie Ihre Werbebotschaft effektiv an Benutzer kommunizieren, die verschiedene Sprachen sprechen. Ihr HTML-Code für die Aktion könnte so aussehen:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>

  </div>
</body>
</html>

Mit dieser Einrichtung sehen Benutzer, deren Sprache Deutsch ist, die E-Mail auf Deutsch. Benutzer, die sich für den Empfang von E-Mails auf Englisch entschieden haben, sehen sie auf Englisch. Diejenigen, die sich für den Empfang auf Spanisch entschieden haben, erhalten sie auf Spanisch. Dadurch wird sichergestellt, dass alle Empfänger Ihre Nachricht in ihrer bevorzugten Sprache erhalten.

E-Mail-Inhaltsblöcke einfügen und kombinieren

Pushwoosh ermöglicht es Ihnen, E-Mail-Inhalte zu kombinieren, indem Sie einen E-Mail-Inhalt in einen anderen einfügen. Dies erleichtert die Wiederverwendung von Elementen wie Kopfzeilen, Fußzeilen oder spezifischen Inhaltsblöcken in verschiedenen E-Mails.

Wenn Sie beispielsweise E-Mail-Inhalt A (eine Kopfzeile) und E-Mail-Inhalt B (einen Newsletter) haben, können Sie E-Mail-Inhalt A in E-Mail-Inhalt B einfügen, ohne den Inhalt jedes Mal manuell kopieren zu müssen.

Syntax

Um einen Inhalt in einen anderen einzufügen, verwenden Sie die folgende Syntax:

{% email_content "AAAAA-BBBBB" %}

Wobei “AAAAA-BBBBB” die ID des E-Mail-Inhalts ist, den Sie einfügen möchten. Sie finden die ID unter dem Inhaltsnamen in Ihrer Liste der E-Mail-Inhalte.

Anzeige der E-Mail-Inhalts-ID mit Inhaltsnamen und eindeutiger Kennung

Beispiel

Angenommen, Sie haben zwei Inhalte:

Kopfzeilen-Inhalt (ID: “AAAAA-BBBBB”) mit einem vordefinierten Kopfzeilen-Design.
Newsletter-Inhalt, in den Sie die Kopfzeile einfügen möchten.

Um die Kopfzeile in den Newsletter einzufügen, verwenden Sie Folgendes:

{% email_content "AAAAA-BBBBB" %}

Dies ermöglicht es Ihnen, eine vordefinierte Kopfzeile einfach in mehreren E-Mail-Kampagnen wiederzuverwenden. Das spart Zeit und sorgt für Konsistenz in Ihren E-Mails.

Abmeldelink hinzufügen

Fügen Sie einen Abmeldelink in Ihre E-Mail ein, damit sich Empfänger gemäß den Vorschriften und ihren Präferenzen abmelden können. Pushwoosh stellt drei Variablen zur Verfügung, die Sie in Ihrem HTML verwenden können.

Abmeldelink

Fügen Sie diesen Link hinzu, damit sich Benutzer von der erhaltenen Nachricht abmelden können:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Abmelden </a>

Die Variable wird durch die Pushwoosh-Abmelde-URL ersetzt, wenn Sie die E-Mail senden.

Wenn das Abonnement-Präferenz-Center aktiviert ist, werden Empfänger nur von der Kategorie abgemeldet, die dieser E-Mail zugewiesen ist (z. B. Newsletter). Es erscheint ein Bestätigungsbildschirm, auf dem sie sich für diese Kategorie erneut anmelden oder die Präferenzen verwalten können, um alle E-Mail-Kategorien anzupassen. Erfahren Sie mehr
Wenn das Abonnement-Präferenz-Center nicht aktiviert ist, melden sich Empfänger von allen Marketing-E-Mails ab.

Klicks werden in der Abmelderate für diese Nachricht in der Nachrichten-Historie gezählt.

Von allen Kategorien abmelden

Fügen Sie einen Link hinzu, der den Benutzer von allen E-Mail-Kategorien auf einmal abmeldet:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Von allen E-Mails abmelden </a>

Link zum Präferenz-Center

Fügen Sie einen direkten Link zum Präferenz-Center hinzu, wo Benutzer verwalten können, welche Kategorien sie erhalten:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Präferenzen verwalten </a>

Erfahren Sie, wie das Präferenz-Center funktioniert

Der folgende Screenshot zeigt eine Fußzeile, die alle drei Link-Typen verwendet.

Beispiel für eine E-Mail-Fußzeile mit allen drei Abmeldelinks: Abmelden, Präferenzen verwalten, Von allen E-Mails abmelden

E-Mail-Inhalt speichern

Nachdem Sie die Erstellung Ihrer E-Mail abgeschlossen haben, klicken Sie auf die Schaltfläche Speichern oben im Editor.

Dialog zum Speichern von E-Mail-Inhalten mit Namens- und Label-Feldern

Geben Sie Ihrer E-Mail in dem neuen Fenster, das erscheint, einen eindeutigen Namen, der mit Ihrer Betreffzeile identisch sein kann. Erstellen Sie auch ein Label, damit Sie sie leicht in Ihrer E-Mail-Liste finden können.

Wenn Sie noch keine Absenderdetails eingerichtet haben, stellen Sie sicher, dass Sie dies ebenfalls tun. Klicken Sie dann auf Speichern.

Jetzt, da Ihr E-Mail-Inhalt fertig ist, kann er in E-Mail-Kampagnen verwendet werden. Erfahren Sie mehr

Eine Test-E-Mail senden

Bevor Sie Ihre E-Mail-Kampagne versenden, können Sie eine Test-E-Mail senden, um eine Vorschau zu erhalten, wie der Inhalt in den Posteingängen der Empfänger aussehen wird. Dies ermöglicht es Ihnen, das Layout, den Inhalt und alle personalisierten Elemente zu überprüfen, um die Genauigkeit sicherzustellen, bevor Sie die Kampagne abschließen. Passen Sie den Inhalt bei Bedarf basierend auf den Testergebnissen an.

Um eine Test-E-Mail zu senden, klicken Sie im E-Mail-Editor auf Test-E-Mail.

Schaltfläche 'Test-E-Mail' in der Benutzeroberfläche des E-Mail-Editors

In dem sich öffnenden Fenster:

Geben Sie im Feld E-Mail-Adresse die E-Mail-Adresse ein, an die Sie die Test-E-Mail erhalten möchten.

Wenn KYC noch nicht abgeschlossen ist, müssen Sie eine verifizierte E-Mail-Adresse aus der Liste der Testadressen auswählen, anstatt eine E-Mail-Adresse einzugeben.

Dropdown-Menü zur Auswahl einer verifizierten Test-E-Mail-Adresse

Wenn Ihre E-Mail dynamische Inhalte enthält (Platzhalter für personalisierte Daten), fügen Sie zu Testzwecken Beispielwerte hinzu.

Zum Beispiel:

Age (integer): Geben Sie eine Zahl ein, um den Altersplatzhalter darzustellen (z. B. 21).
FirstName (string): Geben Sie einen Beispiel-Vornamen ein (z. B. David).

Diese Werte ersetzen die tatsächlichen Empfängerdaten in der Test-E-Mail, sodass Sie überprüfen können, wie der dynamische Inhalt angezeigt wird.

Sobald Sie die erforderlichen Details ausgefüllt haben, klicken Sie auf Test-E-Mail senden, um die Testnachricht an die angegebene E-Mail-Adresse zu senden.

Bestätigungsdialog zum Senden einer Test-E-Mail mit Feldern für Beispieldaten