Technologie

Wie kann ich MailerLite in ein Framer-Projekt integrieren und welche Schritte sind nötig, um ein funktionierendes Newsletter-Formular mit Anmeldung und Bestätigungs-E-Mail zu erstellen?

Melden
  1. Einrichtung und Voraussetzungen
  2. Technische Integration: Formular einbinden
  3. Beispiel für Client → Serverless → MailerLite
  4. Double-Opt-In und Bestätigungs-E-Mail
  5. Fehlerbehandlung und UX
  6. Sicherheit und Datenschutz

Einrichtung und Voraussetzungen

Zuerst benötigst du ein aktives MailerLite-Konto und ein Framer-Projekt. In MailerLite legst du eine Gruppe (Audience) oder ein Formular an, das die Empfängerliste enthält. Besorge dir den API-Schlüssel in MailerLite unter Integrationen → Entwickler API. In Framer brauchst du Zugriff auf den Code-Editor deines Projekts (Custom Code), um HTTP-Anfragen an die MailerLite-API zu senden oder das eingebettete Formular zu nutzen.

Technische Integration: Formular einbinden

Es gibt zwei gängige Wege: MailerLite-Embed oder eigene Integration via API. Das eingebettete Formular ist am einfachsten: MailerLite erzeugt ein Snippet, das du in Framer als HTML-Embed platzierst. Für eine individuelle UI verwendest du Framer-Komponenten und sendest die Anmeldung per Fetch an MailerLite-API. Achte auf CORS-Beschränkungen: Direkte Client-side-Requests an die MailerLite-API sind oft nicht möglich oder sicher; besser ist ein kleiner Serverless-Endpoint (z. B. Vercel, Netlify Functions), der den API-Schlüssel sicher verwahrt.

Beispiel für Client → Serverless → MailerLite

Im Framer-Frontend rufst du deinen Serverless-Endpoint an, der die MailerLite-API kontaktiert. Hier ein vereinfachtes Beispiel für den Serverless-Handler (Node.js), der ein E-Mail-Abonnement erstellt:

export default async function handler(req, res) {

if (req.method !== "POST") return res.status(405).end();

const { email, name } = req.body;

const API_KEY = process.env.MAILERLITE_API_KEY;

try {

const response = await fetch("https://api.mailerlite.com/api/v2/subscribers", {

method: "POST",

headers: {

"Content-Type": "application/json",

"X-MailerLite-ApiKey": API_KEY

},

body: JSON.stringify({ email, name, resubscribe: true })

});

const data = await response.json();

if (!response.ok) return res.status(response.status).json(data);

res.status(200).json(data);

} catch (err) {

res.status(500).json({ error: err.message });

}

}

Im Framer-Frontend sendest du die Nutzerdaten an diesen Endpoint per Fetch.

Double-Opt-In und Bestätigungs-E-Mail

MailerLite unterstützt Double-Opt-In. Entweder aktivierst du Double-Opt-In in MailerLite-Einstellungen für die jeweilige Gruppe oder du nutzt die Formular-Optionen beim Erstellen des Embed-Formulars. Bei eigener API-Integration musst du in MailerLite das Anmeldeverhalten so konfigurieren, dass die Bestätigungs-E-Mail automatisch versendet wird.

Fehlerbehandlung und UX

Gib dem Nutzer klare Rückmeldungen: Ladezustand, Erfolgsmeldung, Fehlerhinweise (z. B. ungültige E-Mail, bereits angemeldet). Schütze dein Formular gegen Spam mit einem Honeypot-Feld oder reCAPTCHA im Frontend und verifiziere die Daten serverseitig.

Sicherheit und Datenschutz

Speichere den API-Schlüssel niemals im Client-Code. Halte dich an DSGVO: informiere über Zweck der Datenerfassung, stelle Datenschutzinformationen und ggf. Checkboxen zur Einwilligung bereit (z. B. Newsletter-Bestimmungen). MailerLite bietet Tools für Zustimmung und Export/Löschung von Daten.

Wenn du möchtest, kann ich dir das genaue Embed-Snippet aus MailerLite erklären, ein Framer-spezifisches Frontend-Beispiel liefern oder ein komplettes Serverless-Deployment-Snippet für Vercel erzeugen. Welche Variante bevorzugst du?

0