Der benutzerdefinierte HTML-Block ermöglicht es Ihnen, Ihren eigenen Code in E-Mails im E-Mail-Builder von Omnisend hinzuzufügen. Verwenden Sie es, um Widgets von Drittanbietern einzubetten, benutzerdefinierte Stile anzuwenden oder erweiterte Inhaltselemente wie Countdown-Timer einzufügen.

Zwei Möglichkeiten, benutzerdefiniertes HTML in Omnisend zu verwenden:

Dieser Artikel behandelt den HTML-Block-Workflow für E-Mail-Kampagnen und Die Automatisierung-Workflows.

Überprüfen Sie vor dem Hinzufügen von HTML:

1. Öffnen Sie im E-Mail-Builder das Elemente hinzufügen-Menü und ziehen Sie den HTML-Block in Ihren E-Mail-Inhalt.

2. Klicken Sie auf den HTML-Block, um den HTML-Editor in der rechten Seitenleiste zu öffnen.

3. Fügen Sie Ihren HTML-Code im Editor ein oder schreiben Sie ihn.

4. Klicken Sie auf Speichern.

Der HTML-Block ermöglicht es Ihnen, benutzerdefinierten Code wie Countdown-Timer, Tabellen und Widgets hinzuzufügen. Verwenden Sie Inline-CSS für das Styling und testen Sie Ihre E-Mail, bevor Sie sie senden.

Um sicherzustellen, dass Ihre E-Mails mit den wichtigsten E-Mail-Clients kompatibel sind, unterstützt der HTML-Block nur eine begrenzte Anzahl von HTML-Tags, Attributen und CSS-Stilen.

<a><p><br><span><hr><ul><li><ol><u><strong><em><s><sub><sup><pre><h1><h2><h3><img><table><tr><td>

Vollständige Die Liste mit Attributen anzeigen:

Ihr Code enthält nicht unterstützte Tags oder Kodierungsprobleme.

Zu beheben:

Nicht unterstützte Tags, die Fehler verursachen:
​<iframe><script><div><font><video><audio><object><embed>

Leere Vorschauen bedeuten normalerweise, dass Bild-URLs https:// fehlen oder dass Sie erforderliche Wrapper-Tags entfernt haben.

Um das zu beheben:

Nein. Der E-Mail-Builder von Omnisend ist visuell orientiert und bietet keinen Roh-HTML-Editor für die gesamte E-Mail.

Sie können HTML nur innerhalb einzelner benutzerdefinierter HTML-Blöcke bearbeiten.

Um den vollständigen E-Mail-HTML zu bearbeiten:

E-Mail-Clients wie Gmail, Outlook und Apple Mail überschreiben CSS im Dunkelmodus, unabhängig von !important-Deklarationen.

Empfehlung:
Gestalten Sie Ihre E-Mail so, dass sie sowohl im Licht- als auch im Dunkelmodus gut aussieht. Testen Sie mit Vorschau → Dunkelmodus-Umschalter, bevor Sie senden.

Omnisend hebt nicht die genaue Zeile hervor, die den Fehler verursacht.

Um das zu beheben:

Sie können Countdown-Timer zu E-Mail-Kampagnen oder Automatisierungs-Workflows mit dem benutzerdefinierten HTML-Block hinzufügen.

Wählen Sie Ihr Setup:

Schritt 1: Ziehen Sie die HTML-Block in Ihr E-Mail-Template.

Schritt 2: Erstellen Sie einen Countdown-Timer:

Schritt 3: Fügen Sie den Code in den HTML-Block in Omnisend ein und klicken Sie Speichern.

Um den Timer zu zentrieren:

Um den Timer dynamisch zu machen (von der Versandzeit zählen):

Fügen Sie [[ current_date | date: "%s" | plus: 86400 ]] zur Bild-URL hinzu.

Diese Funktion konvertiert das aktuelle Datum/Uhrzeit in Sekunden und fügt 86400 Sekunden (1 Tag) zur Versandzeit hinzu.

Beispiel:

Sie können 86400 in jede beliebige Anzahl von Sekunden ändern. Zum Beispiel:

Für Die Automatisierung Arbeitsabläufe benötigen Sie einen dynamischen Timer, der das Ablaufdatum jedes Mal berechnet, wenn die E-Mail gesendet wird.

Beispielanwendung: Fügen Sie einen dynamischen Countdown-Timer hinzu, der abläuft, wenn ein Rabattcode abläuft (2 Tage nach dem Versand der E-Mail).

Lassen Sie uns unseren Timer basierend auf einem spezifischen Anwendungsfall hinzufügen: Stellen Sie sich vor, Sie möchten einen dynamischen Timer, der am Ende des Verkaufs abläuft (unter Verwendung eines Rabattartikels).

Schritt 1. Erstellen Sie Ihre Automatisierung in Omnisend → Öffnen Sie den E-Mail-Builder und fügen Sie einen Rabattblock für Ihren Verkauf hinzu. Setzen Sie das Ablaufdatum für Ihren Rabatt, das dasselbe sein wird wie das Ablaufdatum für Ihren Timer.

Schritt 2. Fügen Sie hier einen HTML-Code mit einem Countdown-Timer hinzu, der anzeigt, wann der Rabattcode abläuft. Kopieren Sie die Jahr-Monat-Tag und Zeitzonenoffset HTML von Nifty-Bildern und fügen Sie es in das HTML-Element in Omnisend ein.

Jetzt müssen Sie das Datumsformat auf das Omnisend-Datumsformat ändern. Suchen Sie das Datum in Ihrem Code. Sie werden sehen, dass zwischen jeder Personalisierungsmarkierung ein Bindestrich steht, den Sie durch die dynamischen Datumsmarkierungen von Omnisend ersetzen werden.

Entfernen Sie den Datumsanteil aus dem Code und fügen Sie die Omnisend-Personalisierungstags ein:[[current_date | date:'%Y']]-[[current_date | date:'%m']]-[[current_date | date:'%d']].

Sobald ersetzt, wird das Datum Nullen anzeigen, aber wenn die E-Mail versendet wird, wird hier ein tatsächliches Datum angezeigt, da wir Personalisierungs-Tags hinzugefügt haben.

Schritt 3. Passen Sie die Zeitzone an. In der Personalisierung sehen Sie eine auf Greenwich-Zeit eingestellte Zeitzone. Sie müssen sie auf die Zeitzone Ihres Kontos ändern. Wie im Screenshot unten gezeigt, ändern Sie "T00:00:00-07" in "T00:00:00+2," usw., basierend auf Ihrer Zeitzone.

Schritt 4. Ihr Timer ist auf das heutige Datum eingestellt, aber Sie möchten auch, dass er dynamisch bis zum Ende Ihres Verkaufs zählt (das Ablaufdatum des Rabatts ist auf 2 Tage eingestellt).

Wenn Ihr Rabattcode beispielsweise in 2 Tagen abläuft, muss Ihr Timer dynamisch für 72 laufen (heute wird nicht gezählt, also müssen Sie 24 Stunden zu 2 Tagen hinzufügen).

Gehe dazu zu Niftyimages, kopiere diesen Code, kehre zum HTML-Element in Omnisend zurück und platziere ihn direkt nach der Format-Markierung. Bitte beachten Sie, dass die Anzahl der Stunden je nach Dauer Ihres Verkaufs angepasst werden sollte. Wenn Ihr Rabatt in 10 Tagen abläuft, müssen Sie 264 eingeben (240h+24h).

Hier ist ein Beispiel für den in Omnisend eingefügten Code:

Das ist alles; Sie haben den Timer so eingestellt, dass er bis zum Ende Ihrer Aktion läuft. Bitte denken Sie daran, dass Sie die Automatisierung nur testen können, indem Sie sie selbst auslösen.

Wenn Sie Ihre E-Mail in Canva entworfen haben und sie als vollständiges Template importieren möchten: