Newsletter in Wordpress einbinden

Newsletter in WordPress: ActiveCampaign, Gutenberg & ThriveThemes

aktualisiert am April 1, 2021

Da ich öfter die Frage bekomme, "wie das nun geht mit dem Newsletter in WordPress", möchte ich dir in diesem kurzen Tutorial konkret zeigen, wie du dein Newsletter - Formular in deine WordPress - Webseite einbinden kannst.

Das ist kein Hexenwerk und geht ganz einfach über 2 Methoden:

  • 1. per HTML - Code
    Funktioniert ganz einfach über den WordPress - Editor bzw. über Custom HTML - Elemente in Pagebuildern. Hier designst du dein Formular direkt im Newsletter - Tool und bindest dieses Formular per Code in deine Webseite ein.
  • 2. via API Verbindung
    Hier designst du dein Formular in einem Pagebuilder oder einem List Building Plugin, da du dadurch gestalterisch nicht so eingeschränkt bist und die Formulare frei nach deinen Vorlieben konfigurieren kannst. In diesem Tutorial zeige ich dir die Einbindung konkret am Beispiel von ThriveThemes bzw. Thrive Leads.

Ich persönlich schätze das Email - Marketing Tool ActiveCampaign*, mit dem ich meine Abonnenten verwalte und über das ich meine Newsletter versende. Entsprechend ist das auch das Tool, das ich in diesem Artikel bespreche.

Prinzipiell funktionieren aber alle Newsletter - Tools ähnlich, weswegen dir diese Anleitung auch helfen kann, wenn du andere Tools verwendest.

Newsletter - Tool vorbereiten

Damit du umgangssprachlich deinen Newsletter in WordPress einbinden kannst, brauchst du in deinem Newsletter - Tool erst einmal 2 Dinge:

  • 1. eine Liste
    Auf dieser sammelst du alle deine Abonnenten
  • 2. ein Formular
    Über dieses Formular können sich deine Abonnenten für deinen Newsletter anmelden, indem sie ihre Daten, wie Namen, Emailadresse, etc. angeben

Wie das genau bei ActiveCampaign abläuft, habe ich dir in diesem Artikel erklärt.

Falls du einen anderen Service verwendest, musst du leider selbst herausfinden, wie das funktioniert. Normalerweise klickst du aber bei allen Tools einfach unter "Listen" und "Formulare" jeweils nur auf "Neu erstellen" und ab dann sollte es selbsterklärend sein.

Newsletter - Formular via Code einbinden

Im Fall von ActiveCampaign bekommst du 2 Einbettungs - Codes, die du für deine Webseite verwenden kannst:

1. Einfach einbetten:

Dieser Code verwendet Javascript. Alle Änderungen, die du am Formular in der ActiveCampaign-Anwendung vornimmst, werden sofort auf deiner Website angezeigt. 

2. Komplett einbetten:

Dieser Code verwendet sowohl CSS als auch HTML und ist also eine Art statisches Formular. Alle Änderungen, die du in ActiveCampaign am Formular vornimmst, werden nicht im Formular auf deiner Webseite angezeigt. Sobald du etwas änderst, musst du den Formularcode erneut in deine Webseite einfügen, um diese Änderungen auch zu sehen. Alternativ kannst du Änderungen auch direkt im eingefügten Formularcode vornehmen.

Einbettungscode

Schnapp dir einfach einen dieser Codes und wechsle dann von ActiveCampaign zurück zu WordPress.

Wenn du den Gutenberg Editor nutzt

Falls du den Gutenberg Editor benutzt, fügst du jetzt in beliebige Seite/ beliebigen Beitrag an gewünschter Stelle den "Individuelles HTML" - Block ein.

HTML Block einfügen WordPress

Anschließend kannst du den Formularcode aus ActiveCampaign einfach per "cmd + C" (Mac) oder "Strg + C" (Windows) in diesen Block einfügen.

HTML Code Activecampaign einfügen

Speichere ab und sieh dir deine Seite/ deinen Beitrag an. Du wirst feststellen, daß dein Formular genau so eingefügt wurde, wie du es in ActiveCampaign designt hast.

ActiveCampaign Newsletter in WordPress eingefügt

Wenn du einen Pagebuilder nutzt

Wenn du einen Pagebuilder wie Thrive Architect, Elementor, etc. benutzt, dann fügst du deinen Formularcode auf ganz ähnliche Weise ein.

In diesem Fall benutze ich Thrive Architect mit seinem Drag & Drop Frontend - Editor. Das schöne an diesem Pagebuilder ist, daß du sofort alle Änderungen siehst, die du auf der Seite vornimmst, da du die passenden Elemente einfach auf deiner Webseite "ablegst".

Falls du mehr über Thrive Architect erfahren möchtest und darüber, wie einfach du damit Webseiten erstellen kannst, dann lies dir einfach diesen Artikel von mir durch.

Ziehe also in Thrive Architect das Custom HTML Element aus deinem Elemente - Menü an beliebige Stelle in deinen Editor.

Thrive Architect Custom HTML

Sobald du das Element abgelegt hast, öffnet sich automatisch ein Pop - Up, in das du deinen Code einfügen kannst.

Newsletter Formular per Thrive Architect einfügen

Klicke abschließend auf "Save" und dein Formular ist erfolgreich eingebunden.

Wie du siehst, war es auch gar nicht mal so schwer. Was mich daran jedoch stört, ist daß man designtechnisch mit den Möglichkeiten des jeweiligen Newsletter - Tools auskommen muß. Und je nachdem welches Tool man benutzt, kann das eine ganz schöne Fummelei werden, ein schönes Design auf die Beine zu stellen.

Ganz anders sieht die Sache aus, wenn du dein Newsletter - Tool per API - Verbindung mit deiner Webseite verknüpfst.

Newsletter - Tool per API einbinden

Eben durch diese API - Verbindung kann deine Webseite - wie bereits erwähnt - mit deinem Newsletter - Tool kommunizieren und Daten austauschen.

Dadurch muss auch das Design deines Formulars nicht von ActiveCampaign übernommen werden, sondern du kannst das wie hier in meinem Fall dem Pagebuilder Thrive Architect oder dem List Building Plugin Thrive Leads überlassen. 

Sobald sich dann jemand in dein Formular einträgt, werden die Daten einfach an ActiveCampaign übergeben und deine Abonnenten landen auch auf deiner Liste.

Thrive Leads Pop-Up

Beispiel eines Formulars im Pop - Up aus Thrive Leads

Wenn du herausfinden möchtest, wie Thrive Leads auch dir bei deiner Newsletter - Abonnenten - Gewinnung helfen kann, dann schau dir doch mal meinen Artikel dazu an.

Schritt 1: API - Verbindung mit ThriveThemes einrichten

Gehe über das WordPress - Menü zu deinem Thrive Dashboard (1) und klicke beim Punkt API - Connections auf den Button "Manage Connections" (2).

Thrive Dashboard

Im darauffolgenden Fenster siehst du deine bestehenden API - Verbindungen und kannst über das "+" Symbol im gestrichelten Rahmen eine neue API - Verbindung erstellen.

Wähle aus der Dropdown - Liste einfach deinen Newsletter - Dienst aus, in meinem Fall hier also ActiveCampaign.

Auswahl ActiveCampaign

Im nächsten Fenster wirst du dann nach der API - URL und dem geheimen API - Schlüssel gefragt.

ACtive Campaign API

Diese Daten findest du in ActiveCampaign zugegebenermaßen ein wenig versteckt, indem du auf das Zahnradsymbol (1) und anschließend auf Entwickler (2) klickst.

ActiveCampaign API Daten

API - Verbindungsdaten aus ActiveCampaign

Kopiere dir diese Daten, gib sie im Thrive Dashboard ein und klicke anschließend auf "Connect".

Wenn alles geklappt hat, erscheint ActiveCampaign nun unter deinen aktiven API - Verbindungen. 

aktive API Verbindung

Deine aktiven API - Verbindungen

Schritt 1 ist damit erledigt und deine Webseite kann nun mit ActiveCampaign kommunizieren. Was dir jetzt noch fehlt, ist ein passendes Formular, in das sich deine Webseitenbesucher eintragen können.

Schritt 2: Formular mit ActiveCampaign verbinden

Je nachdem welche Tools von Thrive Themes du benutzt, kannst du verschiedene Formulare einbinden.

Nutzt du Thrive Architect, dann kannst du mit einem ganz einfachen Formular starten, das du natürlich komplett gestalten und designen kannst.

Formular Thrive Architect

Einfaches Lead Generation Formular

Nutzt du Thrive Leads, dann kannst du bereits mit gestylten Vorlagen beginnen, die du lediglich nur noch anpassen brauchst.

Formular Thrive Leads

Formular erstellt mit Thrive Leads

Unabhängig davon, wie dein Design letztendlich aussieht, musst du das Formular nun so einrichten, daß die eingegebenen Daten auch an ActiveCampaign übergeben werden.

Klicke also im Bearbeitungseditor von Thrive Architect oder Thrive Leads auf dein Formular (Lead Generation Element) (1). Dadurch öffnen sich in der linken Spalten die Bearbeitungsoptionen für dieses Element.

Hier klickst du nun auf den blauen Button "Add Connection" (2)

lead generation Formular verbinden

Im Eingabefenster (3) musst du nun folgende Daten ergänzen:

  • Connection
    Hier wählst du eine API - Verbindung aus (hier ActiveCampaign)
  • Mailing List
    Wähle hier die Liste aus, die du bei ActiveCampaign angelegt hast und auf die deine Abonnenten aufgenommen werden sollen
  • Form
    Hier siehst du alle deine Formulare, die du in ActiveCampaign erstellst hast. Wähle hier das richtige Formular aus

Klicke abschließend auf "Apply" und du hast dein Formular erfolgreich mit ActiveCampaign verbunden.

Fazit

Je nachdem welche Plugins du eventuell verwendest, kann die Einbindung deines Newsletter - Formulars manchmal ein wenig anders ablaufen.

Die hier gezeigten Methoden funktionieren aber in den allermeisten Fällen und sind zudem einfach umzusetzen.

Mit einem Stern (*) gekennzeichnete Empfehlungen sind sogenannte Affiliate-Links. Wenn du über so einen Link ein Produkt kaufst, bekomme ich von deinem Einkauf eine kleine Provision. Für dich verändert sich der Preis nicht.

Wichtig: Ich empfehle nur Produkte, die ich selber einsetze/ selber benutzt habe

Mit ActiveCampaign deinen Newsletter im Griff 2021
>