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

Wenn Sie sich mit HTML auskennen und Ihren eigenen Code schreiben möchten, 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 zum Einfügen von benutzerdefinierten Tags, die die Tag-Auswahl und Optionen für Standardwerte anzeigt

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. Hier wird Englisch als Standardsprache und Deutsch sowie Spanisch als Ü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, und 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 Kopf- und Fußzeilen oder bestimmten 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:

Kopfzeileninhalt (ID: “AAAAA-BBBBB”) mit einem vordefinierten Kopfzeilendesign.
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.

Einen Abmeldelink hinzufügen

Stellen Sie sicher, dass Sie einen Abmeldelink in Ihre E-Mail aufnehmen, um den Empfängern eine einfache Möglichkeit zu geben, sich von zukünftigen Mitteilungen abzumelden, die Vorschriften einzuhalten und ihre Präferenzen bezüglich des Empfangs von E-Mails zu respektieren.

Fügen Sie den Abmeldelink wie folgt zu Ihrer E-Mail hinzu:

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

Der Attributwert %%PW_EMAIL_UNSUBSCRIBE%% wird im Moment des Versands der E-Mail-Nachricht durch den Pushwoosh Abmelde-Link ersetzt. Wenn Empfänger dem Link folgen, melden sie sich von Ihren E-Mails ab und werden in der Abmelderate für diese spezielle E-Mail-Nachricht in der Nachrichten-Chronik erfasst.

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 außerdem ein Label, damit Sie sie in Ihrer E-Mail-Liste leicht 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 vor der Fertigstellung der Kampagne sicherzustellen. 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 nicht abgeschlossen wurde, 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 Beispielwerte zu Testzwecken hinzu.

Zum Beispiel:

Alter (integer): Geben Sie eine Zahl ein, um den Altersplatzhalter darzustellen (z. B. 21).
Vorname (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