Inhaltsübersicht
- Wie müssen Sie vorgehen?
- Widget erstellen
- Widget-Voransicht
- Widget-Code anzeigen
- Widget bearbeiten
- Widget kopieren
- Widget entfernen
- Problemlösung
- Ähnliche Themen
Wie müssen Sie vorgehen?
Das Abonnement-Widget von Mailjet besteht aus einem Anmeldeformular, einer Bestätigungsmail und einer Bestätigungsseite. Wenn sich jemand über Ihre Website anmeldet, erhält er eine Bestätigungsmail mit Link zur Bestätigungsseite. Sobald er seine Anmeldung bestätigt hat, wird die E-Mail-Adresse (zusammen mit allen weiteren im Anmeldeformular erfassten Daten) zu Ihrer Kontaktliste hinzugefügt.
Das Beste daran? Alles, was Sie tun müssen, ist, das Formular, die E-Mail und die Seite im Widget Builder zu gestalten und an Ihre Bedürfnisse anzupassen. Mailjet generiert dann den Code für das Anmeldeformular und kümmert sich um den weiteren Ablauf.
Läuft Ihre Website über WordPress? Dann sollten Sie Mailjet’s WordPress Plugin ausprobieren! Dieses ermöglicht es Ihnen, ein Anmeldeformular anzulegen, Ihre Kontakte zu verwalten, E-Mails zu erstellen und Statistiken in Echtzeit zu verfolgen - alles direkt von Ihrer Wordpress Platform!
Widget erstellen
Rufen Sie die Seite Kontakte auf und klicken Sie auf den Link „Widget zum Abonnement“.
Sie werden auf die Seite „Verwalten Sie Ihre Abonnement-Widgets“ weitergeleitet, auf der alle von Ihnen erstellen Widgets aufgelistet sind.
Klicken Sie nun auf die Schaltfläche „Neues Widget gestalten“.
Zunächst müssen Sie sich entscheiden, welche Art von Widget Sie anlegen möchten:
Möchten Sie ein in Ihre Website eingebautes Anmeldeformular oder wäre es Ihnen ein Anmeldeformular in Form eines Pop-in Widget lieber, das sich öffnet, sobald eine Schaltfläche oder ein Link angeklickt wird?
Für dieses Beispiel entscheiden wir uns für das „Pop-in“ Widget.
Die Seite zur Erstellung von Widgets setzt sich aus drei Bereichen zusammen:
- Einstellungen für Ihr Widget;
- Felder, die Ihre Kunden bei der Anmeldung ausfüllen müssen;
- und der Widget-Design-Editor.
Widget-Parameter
In diesem Bereich geben Sie Folgendes ein:
- Widget-Name
Geben Sie einen Namen für Ihr Widget ein (es handelt sich um einen internen Namen, den nur Sie sehen). - Kontaktliste
Wählen Sie die Kontaktliste, zu der neu angemeldete Kunden hinzugefügt werden. - Sprache
Sie können Ihr Widget in einer anderen Sprache anzeigen. - Erstellung einer Pop-in-Taste (Standardeinstellung)
Verwenden Sie den Widget-Designer, um die Anmeldeschaltfläche anzupassen und den HTML-Code automatisch zu generieren. Wenn Sie das Häkchen entfernen, müssen Sie den HTML-Code für das Pop-in-Widget selbst erstellen. - Bestätigungsseite
Sobald sich jemand anmeldet, erhält er eine Bestätigungsmail mit einem Link zur Validierung (Bestätigung) seiner Anmeldung. Standardmäßig verweist der Link auf die Bestätigungsseite bei Mailjet die Sie mit dem Widget-Editor konfigurieren können. Wenn Sie Ihre eigene Bestätigungsseite auf Ihrer Website verwenden möchten, klicken Sie auf „Externe Bestätigungsseite verwenden“ und geben Sie anschließend die entsprechende URL an.
Felder und Nachrichten
Widget-Felder
Die Widget-Felder sind mit Ihren Kundenkontakteigenschaften verbunden. Sie können bis zu 10 Felder in Ihr Anmeldeformular einbinden, um weitere Informationen wie Name, Ort oder Geschlecht Ihres Kunden zu erfassen.
Um Ihre aktuellen Kontakteigenschaften anzusehen, rufen Sie die Seite „Kontakte“ auf und klicken Sie auf „Kontakteigenschaften“.
Feldnamen hinzufügen
Wählen Sie das gewünschte Kontaktfeld aus dem Drop-Down-Menü und klicken Sie auf „Feld hinzufügen“.
Angezeigtes Label
Das Text-Label, das auf dem Anmeldeformular angezeigt wird.
Ein Pflichtfeld erstellen
Klicken Sie einfach auf den Regler „Zwingend“. Bitte beachten Sie, dass es sich bei dem Standardfeld „E-Mail-Adresse“ um ein Pflichtfeld handelt.
Festlegung der Reihenfolge der Felder
Die Reihenfolge der Felder legt fest, wie sie auf dem Anmeldeformular erscheinen. Sie können ein Feld verschieben, indem Sie auf das Symbol mit den drei Balken klicken und es an die gewünschte Stelle ziehen.
Feld entfernen
Um das Feld aus dem Anmeldeformular zu entfernen, klicken Sie einfach auf das „X“.
DSGVO: Holen Sie die ausdrückliche Zustimmung Ihrer Abonnenten ein
Wenn ein Benutzer Ihren Newsletter abonniert, werden die Einwilligungsinformationen zu seinem Kontaktprofil hinzugefügt. Dazu gehören der Widget-Name und der Text der Einwilligungs-Checkbox.
Benachrichtigungen
Sobald eine Person auf die Abonnement-Schaltfläche in Ihrem Anmeldeformular klickt, können persönliche Benachrichtigungsmeldungen für die folgenden Szenarien angezeigt werden:
- Abonnement erfolgreich - Wird angezeigt, wenn eine Person das Anmeldeformular auf Ihrer Website erfolgreich übermittelt hat. Bitte beachten Sie, dass die Person noch den Link in der Bestätigungs-E-Mail anklicken muss, um Ihrer Kontaktliste hinzugefügt zu werden.
- Abonnement fehlgeschlagen - Wird angezeigt, wenn eine Person bereits in Ihrer Kontaktliste vertreten ist.
- IP auf der Blacklist - Mailjet hat die Anzahl der Abonnenten pro IP-Adresse begrenzt, um Spam in Ihrer List zu verhindern. Diese Meldung wird angezeigt, sobald diese Begrenzung erreicht wurde.
Um eine Meldung zu aktivieren, klicken Sie einfach auf das Kontrollkästchen und fügen Sie anschließend Ihre benutzerdefinierte Meldung hinzu.
Widget-Design
Kommen wir zum spaßigen Teil – der Gestaltung Ihres Widget! Mit unserem leicht zu bedienenden Drag-and-Drop-Editor können Sie die folgenden Elemente ganz einfach anpassen:
TEXT: Markieren Sie einen beliebigen Text, um sein Format zu verändern.
FARBE: Wählen Sie eine Farbe aus der Menüleiste und ziehen Sie sie auf ein Element. Mit '+’ können Sie neue Farben zur Menüleiste hinzufügen.
LAYOUT: Wählen Sie für Ihr Widget zwischen Hoch- und Querformat.
EXPERTENMODUS: Verwenden Sie für die Gestaltung Ihres Widget statt der Drag-and-Drop-Oberfläche HTML. Bitte beachten Sie, dass Sie einen Wechsel in den Expertenmodus nicht mehr rückgängig machen können.
Schaltfläche
Die Option Schaltfläche ist nur für Pop-in-Widgets verfügbar. Die Schaltfläche erscheint auf Ihrer Website. Wenn sie angeklickt wird, öffnet sich das Anmeldeformular.
Sie können:
- den Schaltflächentext bearbeiten und formatieren
- die Hintergrundfarbe wählen
- wählen, wie abgerundet (Radius) die Ecken der Schaltfläche sein sollen (0 = rechteckig)
Formular
Passen Sie das Anmeldeformular an das Design Ihrer Website an. Sie können die Farben der einzelnen Teile (Text, Schaltfläche, Hintergrund) und die Schriftart festlegen.
Sie können das Layout für Ihr Pop-in-Widget anpassen:
Und für das Eingebaute Widget gilt:
Bestätigungsmail
Sie können auch die E-Mail anpassen, die Kunden erhalten, die sich gerade angemeldet haben und mit denen sie gebeten werden, ihre Anmeldung für den Newsletter zu bestätigen. Die E-Mail enthält eine Schaltfläche mit dem Link, über den der Empfänger zur Bestätigungsseite gelangt.
Sie können sowohl die Überschrift als auch den E-Mail-Text verändern. Denken Sie daran, dass die Nachricht ausschließlich dazu dient, die Anmeldung zu bestätigen: Sie sollte kurz und prägnant formuliert sein.
Bestätigungsseite
Die Bestätigungsmail, die neue Abonnenten erhalten, enthält einen Link zur Bestätigungsseite. Wenn Sie sich bei den Widget-Einstellungen für „Interne Bestätigungsseite benutzen“ entschieden haben, können Sie im Drag-and-Drop-Editor die folgenden Elemente anpassen:
- Farbe von Überschrift, Hintergrund und Text
- Bearbeiten Sie die Überschrift und den Text, um den neuen Abonnenten darüber zu informieren, dass seine Bestätigung erfolgreich war.
Wenn Sie alle Bereiche angepasst haben, klicken Sie auf ‘Weiter’.
Expertenmodus (erweiterter HTML-Modus)
Der Expertenmodus wird nur für Benutzer mit fortgeschrittenen HTML-Kenntnissen empfohlen, da keine Unterstützung für die Fehlerbehebung von benutzerdefiniertem Code bereitgestellt wird. Alle Probleme im Zusammenhang mit dem Mailjet-System werden jedoch von unserem Support-Team behandelt.
Im Expertenmodus können Sie den HTML-Code des Widgets aufrufen und bearbeiten sowie erweiterte Formularelemente, wie zum Beispiel Drop-Down-Listen, Optionsschaltflächen und Kontrollkästchen, hinzufügen. Der Expertenmodus verfügt über keine Drag-and-Drop-Oberfläche – der Widget-Designer besteht vielmehr aus HTML-Fenstern:
Um den Expertenmodus aufzurufen, klicken Sie in der Design-Menüleiste auf die Schaltfläche „< / >“:
Bitte beachten Sie, dass es nach dem Wechsel in den Expertenmodus nicht möglich ist, zur Drag-and-Drop-Oberfläche zurückzukehren.
Eine Drop-Down-Liste erstellen
Diese erweiterte Funktion ist für Benutzer gedacht, die über das erforderliche Fachwissen im Umgang mit HTML-Code verfügen.
Über den Expertenmodus können Sie Ihrem Widget eine Drop-Down-Liste und HTML-Code hinzufügen.
Fügen Sie zunächst ein Feld des Typs „String“ hinzu, das als Drop-Down-Liste verwendet wird.
Anschließend können Sie mithilfe des Widget-Designers all Ihre Widget-Komponenten (Schaltflächen, Formular, Bestätigungs-E-Mail und Seite) gestalten und anpassen.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Expertenmodus.
Bitte beachten Sie, dass Sie nach dem Wechsel zum Expertenmodus nicht zur Drag-and-Drop-Oberfläche zurückkehren können.
Sobald Sie auf die angezeigte Bestätigungsnachricht klicken, befinden Sie sich im Expertenmodus.
Suchen Sie im HTML-Code-Fenster nun die Kontakteigenschaft, die als Drop-Down-Liste verwendet wird, da einige Änderungen am Code vorgenommen werden müssen:
Ändern Sie zunächst den “input”-Tag auf “select”:
<input id="w-preview-fields-content-cell-field-103" type="text" ... wird umgeschrieben in: <select id="w-preview-fields-content-cell-field-103" type="text" ...
Fügen Sie anschließend den folgenden Code hinzu, um die Auswahloptionen in der Liste zu erstellen:
Eine kurze Erklärung des obenstehenden Codes:
- Mit jeder “option” -Zeile wird ein Eintrag in der Drop-Down-Liste erstellt.
- Zwischen den “option” -Tags wird der eigentliche Text in der Drop-Down-Liste angezeigt.
- Bei der ersten Option – „Drop-Down-Überschrift“ – handelt es sich um eine inaktive Auswahl, die den Kunden mit Informationen über die Liste versorgt.
- (optional) Der Parameter „Wert“ wird an den Mailjet-Server übertragen, wenn der Abonnent diese Option auswählt.
Bitte ändern Sie nicht die Werte id oder name im “select”-Tag oder irgendeinem anderen Tag des HTML-Codes. Werden Änderungen an diesen Werten vorgenommen, wird Ihr Widget daran gehindert, die Abonnenteninformationen an Mailjet weiterzuleiten. Die CSS-Abschnitte des Codes können hingegen nach Belieben verändert werden.
Beispiel-Code für eine Drop-Down-Liste zu „Altersklassen“:
Die sich daraus im Widget ergebende Drop-Down-Liste:
Denken Sie daran, Ihr neues Widget in einem nicht auf die Produktion bezogenen Bereich zu testen, bevor Sie ihn in Ihre Website einbinden.
Ein Kontrollkästchen erstellen
Diese erweiterte Funktion ist für Benutzer gedacht, die über das erforderliche Fachwissen im Umgang mit HTML-Code verfügen.
Über den Expertenmodus können Sie Ihrem Widget Kontrollkästchen hinzufügen. Für jedes Kontrollkästchen, das Sie Ihrem Widget hinzufügen, müssen Sie eine Kontakteigenschaft des Typs „Boolean“ hinzufügen.
In diesem Beispiel erstellen wir ein Widget mit 2 Kontrollkästchen, um die Auswahl von Newsletter-Themen zu ermöglichen:
Fügen Sie Ihrem Widget zunächst die „Boolean“-Felder hinzu.
Anschließend können Sie mithilfe des Widget-Designers all Ihre Widget-Komponenten (Schaltflächen, Formular, Bestätigungs-E-Mail und Seite) gestalten und anpassen. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Expertenmodus.
Bitte beachten Sie, dass Sie nach dem Wechsel zum Expertenmodus nicht zur Drag-and-Drop-Oberfläche zurückkehren können.
Sobald Sie auf die angezeigte Bestätigungsnachricht klicken, befinden Sie sich im Expertenmodus.
Suchen Sie im HTML-Code-Fenster die Boolean-Felder, die als Kontrollkästchen verwendet werden, und nehmen Sie die folgenden Änderungen vor:
Ändern Sie zunächst den “input”-Tag auf “checkbox”:
<input id="w-preview-fields-content-cell-field-21595" type="text" ... wird umgeschrieben in: <input id="w-preview-fields-content-cell-field-21595" type="checkbox" value=”true” ...
Um ein Text-Label direkt neben einem Kontrollkästchen hinzuzufügen, fügen Sie den folgenden “label” -Tag direkt nach dem “input” -Tag ein:
Ersetzen Sie anschließend die „Feld-ID“ mit der id des “input” -Tags:
Bearbeiten Sie das „Stil“-Attribut für den “input”-Tag, um das Erscheinungsbild des Kontrollkästchens zu verändern. In diesem Beispiel wurde das „Stil“-Attribut vollständig entfernt, damit das Kontrollkästchen wieder in der standardmäßigen (kleinen) Form angezeigt wird:
Bitte ändern Sie nicht die Werte id oder name im “select”-Tag oder irgendeinem anderen Tag des HTML-Codes. Werden Änderungen an diesen Werten vorgenommen, wird Ihr Widget daran gehindert, die Abonnenteninformationen an Mailjet weiterzuleiten. Die CSS-Abschnitte des Codes können hingegen nach Belieben verändert werden.
Beispiel-Code für zwei Kontrollkästchen:
Die sich daraus im Widget ergebenden Kontrollkästchen:
Denken Sie daran, Ihr neues Widget in einem nicht auf die Produktion bezogenen Bereich zu testen, bevor Sie ihn in Ihre Website einbinden.
Widget-Zusammenfassung
Im Bereich „Widget-Zusammenfassung“ können Sie oben Ihre Widget-Einstellungen (Name, Kontaktliste, Sprache) noch einmal prüfen. Um sie noch einmal zu ändern, klicken Sie einfach auf die Schaltfläche „Parameter bearbeiten“.
Unter Confirmation Email Info müssen Sie den Namen des Absenders und den E-Mail-Betreff angeben. Der Betreff sollte deutlich machen, dass es sich um eine Bestätigungsmail handelt.
Sie können sich auch eine Voransicht der Bestätigungsseite und der Bestätigungsmail in separaten Browserfenstern anzeigen lassen.
Wenn Sie fertig sind, klicken Sie auf „Widget speichern“ rechts unten.
Herzlichen Glückwunsch! Sie haben Ihr erstes Widget erstellt!
Der letzte Schritt besteht darin, den im obersten Fenster angezeigten HTML-Code in Ihre Website einzubinden. Der Code enthält die Anmeldeschaltfläche, die das Pop-in-Widget öffnet. Sie müssen ihn lediglich in Ihre Website kopieren!
Bitte beachten Sie: Das Pop-in-Widget kann auch über einen Hyperlink, ein Bild oder jedes javascriptfähige HTML-Element ausgelöst werden. Das zweite, kleinere Fenster zeigt ein Beispiel für einen Hyperlink-Code.
Einfügen in WordPress
Sie können das Abonnement-Widget entweder direkt als HTML-Code in einen Beitrag oder eine Seite einfügen oder aber das WordPress-Widget benutzen.
In diesem Beispiel erstellen wir eine neue Seite und fügen das Anmeldeformular hinzu.
Wählen Sie im Menü Seiten → Einfügen
Geben Sie den Seitennamen ein und fügen Sie den Code des Abonnement-Widgets im ‚Text‘-Feld ein.
Klicken Sie ‚Veröffentlichen‘ und Sie sind fertig - Ihr Abonnement-Widget erscheint auf der neuen Seite.
Sie können Ihr Anmeldeformular mit den ‚Wordpress-Widgets‘ auch zur Seitenleiste Ihrer Website hinzufügen.
Wählen Sie im Hauptmenü Design → Widgets.
Auf der Widgets-Seite finden Sie links eine Liste aller verfügbaren Widgets (Archive, Kalender, Individuelles Menü, Text usw.). Die Abschnitte rechts sind die möglichen Widget-Positionen. Jedes WordPress-Thema hat eine andere Anzahl von möglichen Widget-Positionen, und in diesem Thema gibt es nur 2: Den Haupt-Widgetbereich und den Zweiten Widgetbereich.
Sie müssen das ‚Text‘-Widget hinzufügen, um Ihr Anmeldeformular auf der Seite zu zeigen. Klicken Sie auf ‚Text‘ und wählen Sie die gewünschte Position aus.
Fügen Sie den HTML-Code des Abonnement-Widgets in den Bereich ‚Inhalt‘ ein. Klicken Sie dann ‚Speichern‘.
Und das war es - gehen Sie einfach auf Ihre Website, um sich Ihr Abonnement-Widget anzusehen!
Widget-Voransicht
Um sich Ihr Anmeldeformular anzusehen, fahren Sie mit dem Mauszeiger über 'Verwalten' und klicken Sie anschließend auf das Augensymbol.
Widget-Code anzeigen
Fahren Sie mit dem Mauszeiger über Verwalten und klicken Sie anschließend auf das Symbol .
Widget bearbeiten
Um ein bestehendes Widget zu bearbeiten, fahren Sie mit dem Mauszeiger über Verwalten und klicken Sie anschließend auf das Bleistiftsymbol.
Widget kopieren
Fahren Sie auf der Seite Widgetverwaltung mit dem Mauszeiger über Verwalten und klicken Sie anschließend auf das +-Symbol.
Sie können das kopierte Widget dann ganz normal bearbeiten.
Widget entfernen
Um ein einzelnes Widget zu entfernen, fahren Sie mit dem Mauszeiger über Verwalten und klicken Sie anschließend auf den Papierkorb.
Um mehrere Widgets gleichzeitig zu entfernen, setzen Sie bei jedem Widget ein Häkchen und klicken Sie anschließend auf den Papierkorb.
Problemlösung
Wenn Sie ein Widget auf Ihrer Website eingebaut haben und es plötzlich nicht mehr funktioniert, gehen Sie sicher, dass die mit dem Widget verbundene Kontaktliste nicht verändert oder gelöscht wurde.
Sollten Sie Fragen zur Verwendung des Widget haben, eröffnen Sie bitte ein Ticket bei unserem Supportteam!
Wir wünschen zahlreiche neue Abonnenten!