Abonnement-Widgets

Inhaltsübersicht

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!

Abonnement-Widgets

Widget erstellen

Rufen Sie die Seite Kontakte auf und klicken Sie auf den Link „Widget zum Abonnement“.

Abonnement-Widgets

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“.

Abonnement-Widgets

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?

Abonnement-Widgets

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.

Abonnement-Widgets

[oben]

Widget-Parameter

Abonnement-Widgets

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.

[oben]

Felder und Nachrichten
Widget-Felder

Abonnement-Widgets

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“.

Abonnement-Widgets

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.

Abonnement-Widgets

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.

Abonnement-Widgets

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.

Abonnement-Widgets

[oben]

Benachrichtigungen

Abonnement-Widgets

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.

Abonnement-Widgets

[oben]

Widget-Design

Subscription Widget

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:

Subscription Widget


TEXT: Markieren Sie einen beliebigen Text, um sein Format zu verändern.

Subscription Widget

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.

Subscription Widget

Subscription Widget


LAYOUT: Wählen Sie für Ihr Widget zwischen Hoch- und Querformat.

Subscription Widget

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.

[oben]

Schaltfläche

Subscription Widget

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

Subscription Widget

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:

Subscription Widget

Und für das Eingebaute Widget gilt:

Subscription Widget

[oben]

Bestätigungsmail

Subscription Widget

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

Subscription Widget

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’.

[oben]

Expertenmodus (erweiterter HTML-Modus)

Der Expertenmodus ist nur für Benutzer gedacht, die über das erforderliche Fachwissen im Umgang mit HTML-Code verfügen.

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:

Subscription Widget

Um den Expertenmodus aufzurufen, klicken Sie in der Design-Menüleiste auf die Schaltfläche „< / >“:

Subscription Widget

Bitte beachten Sie, dass es nach dem Wechsel in den Expertenmodus nicht möglich ist, zur Drag-and-Drop-Oberfläche zurückzukehren.

[oben]

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.

Subscription Widget

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.

Subscription Widget

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.

Subscription Widget

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:

Subscription Widget

Ä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:

Subscription Widget

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“:

Subscription Widget

Die sich daraus im Widget ergebende Drop-Down-Liste:

Subscription Widget

Denken Sie daran, Ihr neues Widget in einem nicht auf die Produktion bezogenen Bereich zu testen, bevor Sie ihn in Ihre Website einbinden.

[oben]

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:

Abonnement-Widget

Fügen Sie Ihrem Widget zunächst die „Boolean“-Felder hinzu.

Abonnement-Widget

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.

Abonnement-Widget

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.

Abonnement-Widget

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:

Abonnement-Widget

Ersetzen Sie anschließend die „Feld-ID“ mit der id des “input” -Tags:

Abonnement-Widget

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:

Abonnement-Widget

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:

Abonnement-Widget

Die sich daraus im Widget ergebenden Kontrollkästchen:

Abonnement-Widget

Denken Sie daran, Ihr neues Widget in einem nicht auf die Produktion bezogenen Bereich zu testen, bevor Sie ihn in Ihre Website einbinden.

[oben]

Widget-Zusammenfassung

Subscription Widget

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.

Subscription Widget

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.

Subscription Widget

Herzlichen Glückwunsch! Sie haben Ihr erstes Widget erstellt!

Subscription Widget

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.

[oben]

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

Subscription Widget

Geben Sie den Seitennamen ein und fügen Sie den Code des Abonnement-Widgets im ‚Text‘-Feld ein.

Subscription Widget

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.

Subscription Widget

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.

Subscription Widget

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.

Subscription Widget

Fügen Sie den HTML-Code des Abonnement-Widgets in den Bereich ‚Inhalt‘ ein. Klicken Sie dann ‚Speichern‘.

Subscription Widget

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.

Subscription Widget

Widget-Code anzeigen

Fahren Sie mit dem Mauszeiger über Verwalten und klicken Sie anschließend auf das Symbol .

Subscription Widget

Widget bearbeiten

Um ein bestehendes Widget zu bearbeiten, fahren Sie mit dem Mauszeiger über Verwalten und klicken Sie anschließend auf das Bleistiftsymbol.

Subscription Widget

[oben]

Widget kopieren

Fahren Sie auf der Seite Widgetverwaltung mit dem Mauszeiger über Verwalten und klicken Sie anschließend auf das +-Symbol.

Subscription Widget

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.

Subscription Widget

Um mehrere Widgets gleichzeitig zu entfernen, setzen Sie bei jedem Widget ein Häkchen und klicken Sie anschließend auf den Papierkorb.

Subscription Widget

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.

[oben]

Sollten Sie Fragen zur Verwendung des Widget haben, eröffnen Sie bitte ein Ticket bei unserem Supportteam!

Wir wünschen zahlreiche neue Abonnenten!

Wollen Sie Mailjet jetzt testen?
Ein Konto erstellen - unverbindlich & ohne versteckten Kosten