Biz SMTP Form Autoresponder — Automatische E-Mail nach Lead-Formularausfüllung
Dieser Skill verwandelt das Anmeldeformular auf einer Landingpage (Name/Telefon/E-Mail nach VN-Traffic-Standard) in 2 automatische E-Mails direkt nach dem Absenden durch den Benutzer: (A) eine herzliche Willkommens-E-Mail an den Lead, (B) eine Benachrichtigungs-E-Mail an den Eigentümer. Die E-Mails werden individuell für jedes Angebot basierend auf dem vorhandenen Kontext aus der biz-*-Pipeline entworfen (kein allgemeines "Vielen Dank für Ihre Anmeldung, wir werden uns bald bei Ihnen melden" – das ist Lead-verbrennender Text).
Philosophie: Der E-Mail-Autoresponder ist der goldene Moment. Ein Lead hat gerade auf die Senden-Schaltfläche geklickt = befindet sich auf dem Höhepunkt der Absicht. Die E-Mail muss innerhalb von 30 Sekunden (1) bestätigen, dass das Absenden korrekt war, (2) das im CTA Versprochene liefern (Leadmagnet / Buchung / Zahlungslink), (3) klare Erwartungen für den nächsten Schritt setzen. Eine gute Autoresponder-E-Mail verwandelt 20-40 % der kalten Leads in heiße Leads. Eine generische E-Mail führt dazu, dass der Lead den Absender blockiert oder den Markennamen innerhalb von 24 Stunden vergisst.
Warum SMTP (nicht an einen Anbieter gebunden): SMTP ist ein offener Standard – der Benutzer kann den Anbieter wählen, der am besten zu Budget, Region und Compliance passt. Gmail SMTP ist kostenlos mit 500/Tag (ausreichend für eine Landingpage mit <50 Leads/Tag), Resend SMTP 3000/Monat, SendGrid 100/Tag für immer kostenlos, Brevo (beliebt in VN) 300/Tag kostenlos, VN-Hosting (Mắt Bão/PA/Inet) bietet oft kostenloses SMTP. Der Code verwendet
nodemailer– ein Anbieterwechsel erfordert nur das Ändern von 4 Umgebungsvariablen, keine Codeänderung. Vermeidet Vendor-Lock-in.
Ausgabe des Skills: Code-Patch + 2 responsive HTML-E-Mail-Entwürfe + Liste der Umgebungsvariablen + Testplan. Der Skill sendet KEINE Test-E-Mails selbst – der Benutzer muss die Entwürfe zuerst bestätigen, da Leadmagnet-Links, Markenstimme und Dringlichkeitsformulierungen Eigentum des Benutzers sind.
Wann dieser Skill verwendet werden sollte
- Der Benutzer hat gerade eine Landingpage deployed (über
/biz-deploy-vercel) und das Formular sendet ins Leere. - Der Benutzer hat eine bestehende Landingpage (Next.js, Vite oder statisches HTML auf Vercel) und möchte einen E-Mail-Autoresponder einbinden.
- Der Benutzer baut neu und möchte die E-Mail-Integration von Anfang an vor dem Deployment.
- Der Benutzer hat bereits Gmail/Google Workspace und möchte das kostenlose SMTP nutzen, anstatt einen neuen Anbieteraccount zu erstellen.
- Der Benutzer hat VN-Hosting (Mắt Bão, PA, Inet) mit einem vorhandenen SMTP-Server, den er nutzen möchte.
Verwenden Sie diesen Skill NICHT, wenn:
- Der Benutzer E-Mail-Marketing-Broadcast (Newsletter, Drip-Kampagnen 7-30 Tage) möchte → Mailchimp/ConvertKit/MailerLite sind besser geeignet.
- Der Benutzer SMS/Zalo OA-Autoresponder möchte → anderer Anwendungsfall.
- Der Benutzer CRM-Integration (Leads in Hubspot/Pipedrive/Notion DB) möchte → anderer Skill.
- Der Benutzer Massen-Cold-Email-Outreach benötigt → Instantly/Smartlead, nicht transaktional.
Gesamtworkflow (7 Phasen)
Phase 0: PROJEKTSTACK ERKENNEN (Next.js App / Pages / Vite / statisches HTML)
↓
Phase 1: SMTP-ANBIETER AUSWÄHLEN (Gmail / Resend SMTP / SendGrid / Mailgun / Brevo / Zoho / Benutzerdefiniert)
↓
Phase 2: KONTEXT SAMMELN (offer.json + conversion-copy.md, oder Next.js app/page.tsx lesen, oder deployed HTML lesen)
↓
Phase 3: E-MAIL-MUSTER AUSWÄHLEN (Leadmagnet / Buchung / Zahlung / Nurture)
↓
Phase 4: 2 E-MAILS ENTWERFEN (Autoresponder + Eigentümerbenachrichtigung) — Benutzer anzeigen
↓
Phase 5: BENUTZERÜBERPRÜFUNG & BEARBEITUNG — iterieren, bis der Benutzer zustimmt
↓
Phase 6: CODE VERDRAHTEN (nodemailer installieren + API-Route + Formularbindung + Umgebungsvariablen)
↓
Phase 7: ANBIETER-SETUP + TESTPLAN — Anleitung zum Abrufen der SMTP-Anmeldedaten, Domain-Verifizierung (falls erforderlich), Live-Test
Jede Phase hält an und wartet auf Benutzerbestätigung – insbesondere Phase 1 (Anbieterwahl), Phase 4-5 (E-Mail-Inhalt), Phase 7 (Anbieter-DNS), da dies Markenwerte des Benutzers sind. Die Code-Generierung in Phase 6 erfolgt proaktiver durch den Skill.
Phase 0 — Projektstack erkennen
Lesen Sie die Stammdateien des Projekts, um den Stack zu identifizieren. Der Stack bestimmt: wo die API-Route platziert wird, die Syntax für den nodemailer-Import, die Art der Formularbindung (fetch oder form action).
| Erkennungsdatei | Stack | API-Route-Pfad | Formularbindung |
|---|---|---|---|
next.config.js/mjs/ts + app/-Ordner | Next.js App Router | app/api/submit/route.ts | Client-Komponente fetch('/api/submit') |
next.config.js/mjs/ts + pages/-Ordner | Next.js Pages Router | pages/api/submit.ts | Client-Komponente fetch('/api/submit') |
vite.config.js/ts | Vite (React/Vue/Svelte) | api/submit.js (Vercel-Funktion) | Client-Komponente fetch('/api/submit') |
package.json ohne Framework, mit index.html | Statisches HTML | api/submit.js (Vercel-Funktion) | Inline <script> mit fetch('/api/submit') |
| Kein lokales Projekt, nur URL | Bestehende deployed Seite | Benutzer muss zuerst das Repository klonen oder den Repository-Pfad angeben | — |
Zusätzlich lesen, um Formularfelder zu bestimmen:
- Suchen Sie nach
<form>im Code → listen Sie vorhandene<input name="...">auf - Standarderwartung (laut Projektspeicher):
name,phone,email. Einige Seiten fügen hinzu:company,message,budget,utm_source. - Wenn das Formular noch nicht existiert → der Skill erstellt in Phase 6 ein neues Formular mit mindestens 3 Feldern (Name/Telefon/E-Mail).
Wichtig: Wenn der Benutzer kein lokales Projekt hat (nur eine deployed URL), halten Sie an und fragen Sie: "Haben Sie ein lokales Repository, in das ich den Code einfügen kann? Ich muss die Quelldateien bearbeiten. Wenn Sie nur eine URL haben, klonen Sie bitte das Repository und geben Sie mir den Pfad." Es ist nicht möglich, nur über eine URL einzubinden.
Phase 1 — SMTP-Anbieter auswählen
Fragen Sie den Benutzer, einen der 7 Anbieter auszuwählen. Jeder Anbieter hat unterschiedliche SMTP-Konfigurationen (Host/Port/Auth), der Skill füllt automatisch die Vorlage für die Umgebungsvariablen aus, wenn der Benutzer eine Auswahl trifft.
| # | Anbieter | Kostenloses Kontingent | Geeignet, wenn | SMTP-Host | Port | Hinweise |
|---|---|---|---|---|---|---|
| 1 | Gmail / Google Workspace | 500/Tag | Benutzer hat bereits Gmail/Workspace, geringes Traffic-Aufkommen | smtp.gmail.com | 587 (STARTTLS) | App-Passwort erforderlich (2FA), KEIN Hauptpasswort verwenden |
| 2 | Resend SMTP | 3000/Monat | Hohe Zustellbarkeit + schöne Logs gewünscht, DNS-Setup in Ordnung | smtp.resend.com | 587 | Benutzer = resend, Passwort = API-Key. Domain muss verifiziert werden, um von benutzerdefinierter @brand.vn zu senden |
| 3 | SendGrid SMTP | 100/Tag für immer kostenlos | Stack bereits mit SendGrid vertraut, Webhook benötigt | smtp.sendgrid.net | 587 | Benutzer = apikey literal, Passwort = API-Key |
| 4 | Mailgun SMTP | 100/Tag × 3 Monate | EU/US-Region, entwicklerfreundlich | smtp.mailgun.org (US) oder smtp.eu.mailgun.org (EU) | 587 | Benutzer/Passwort aus den Mailgun-Domain-Einstellungen |
| 5 | Brevo (Sendinblue) SMTP | 300/Tag für immer kostenlos | Beliebt in VN, großzügigstes kostenloses Kontingent, VN-Support vorhanden | smtp-relay.brevo.com | 587 | Benutzer = Login-E-Mail, Passwort = SMTP-Key (anders als API-Key) |
| 6 | Zoho Mail SMTP | 5/Tag kostenlos, 1$/Benutzer/Monat | Benutzer verwendet bereits Zoho Workspace | smtp.zoho.com | 587 | App-Passwort erforderlich, wenn 2FA aktiviert ist |
| 7 | Benutzerdefiniertes SMTP | Abhängig vom Hosting | VN-Hosting (Mắt Bão/PA/Inet/Nhân Hòa) bietet SMTP inklusive, oder selbst gehostetes Postfix | Benutzerangabe | Benutzerangabe | Benutzer gibt vollständigen Host/Port/Benutzer/Passwort an |
Standardempfehlung nach Angebotstyp:
- Landingpage mit <50 Leads/Tag, Benutzer hat Gmail → Gmail SMTP (kostenlos, 5 Minuten Einrichtung).
- Landingpage mit >50 Leads/Tag oder professionelle Zustellbarkeit erforderlich → Brevo (kostenlos 300/Tag, gute Zustellbarkeit für VN) oder Resend SMTP (3000/Monat, schöne Logs).
- Benutzer möchte migrationssicher sein und später selbst hosten können → Benutzerdefiniertes SMTP von Anfang an.
Frageformat für den Benutzer:
Welchen SMTP-Anbieter möchten Sie für den automatischen E-Mail-Versand verwenden?
1. Gmail / Google Workspace (kostenlos 500/Tag, am einfachsten, wenn Sie bereits Gmail haben)
2. Resend SMTP (kostenlos 3000/Monat, hohe Zustellbarkeit, Domain-Verifizierung erforderlich)
3. SendGrid SMTP (kostenlos 100/Tag für immer, wenn Sie die API bereits kennen)
4. Mailgun SMTP (kostenlos 100/Tag × 3 Monate)
5. Brevo / Sendinblue SMTP (kostenlos 300/Tag, beliebt in VN)
6. Zoho Mail SMTP (wenn Sie bereits Zoho Workspace verwenden)
7. Benutzerdefiniertes SMTP (Ihr VN-Hosting bietet es an / selbst gehostet)
Wenn Sie noch keinen Account haben, empfehle ich [Gmail bei geringem Traffic / Brevo bei hoher Zustellbarkeit]. Welche Nummer wählen Sie?
Nach der Auswahl des Benutzers → speichern für die Injektion in die Umgebungsvariablen-Vorlage in Phase 6 + Anleitung zum Abrufen der Anmeldedaten für den richtigen Anbieter in Phase 7.
⚠️ Wichtig — Sicherheit: SMTP-Anmeldedaten (insbesondere Gmail-App-Passwort) berechtigen zum Senden von E-Mails vom Konto des Benutzers. Niemals direkt in den Quellcode einbetten. Immer über Umgebungsvariablen. Warnen Sie den Benutzer, die Anmeldedaten sofort zu rotieren, falls sie versehentlich committet werden.
Phase 2 — Kontext sammeln
Ziel: Das Angebot ausreichend tief verstehen, um nicht-generische E-Mails zu entwerfen. 3 Eingabemodi:
Modus A — Pipeline-Artefakte vorhanden (reichhaltigster)
Der Benutzer hat gerade /biz-offer-alex-hormozi und/oder ui-ux-pro-max ausgeführt → hat Dateien:
output/<case-slug>/offer.json— Segment, Traumziel, Mechanismus, Bonus-Stack, Garantie, Preisgestaltung (PRIMÄRE Quelle der Wahrheit)output/<case-slug>/conversion-copy.md— Hero-Block einfügebereit (Überschrift, Unterüberschrift, CTA-Formulierung)output/<case-slug>/landing-page/app/page.tsx— aktuelle erstellte Next.js-Verkaufsseite (lesen, um die verwendeten Abschnitte + Formularfelder zu kennen)
⚠️ Update 2026-05-14: Die alte Pipeline hatte
layout.json+copy.json(vonbiz-sales-page-layout, DEPRECATED) — der neue Prozess ÜBERSPRINGT diese 2 Dateien. Nuroffer.json+ Lesen von page.tsx reichen als Kontext aus.
Lesen Sie die 3 oben genannten Quellen. Extrahieren Sie für die E-Mails:
- Segment + Traumziel → Betreffzeile personalisieren ("[Name], der 8-wöchige AI Agent Fahrplan ist bereit" statt "Willkommen")
- Mechanismus-Name → im Textkörper verstärken ("Das PROMPT-Framework-System, das Sie lernen werden...")
- Bonus-Stack → in der E-Mail auflisten (wenn das Angebot kostenlos/günstig ist und einen sofortigen Bonus liefert)
- Garantietext → wörtlich in der E-Mail zitieren, um Bedenken zu reduzieren
- CTA-Formulierung → im endgültigen CTA der E-Mail spiegeln
Modus B — Landingpage vorhanden, aber kein JSON
Der Benutzer hat deployed HTML, aber nicht biz-offer/biz-sales-page ausgeführt. Der Skill liest das HTML:
curl -s <URL>oder lokaleindex.html-Datei lesen- Hero h1, Unterüberschrift, CTA-Button-Text, Preisblock, Garantieblock parsen
- Daraus Angebotstyp + Segment ableiten
Modus B ist in 80 % der Fälle ausreichend, aber die E-Mails sind weniger personalisiert als Modus A. Schlagen Sie dem Benutzer vor: "Sie können /biz-offer-alex-hormozi ausführen, um eine offer.json zu erhalten, und dann hierher zurückkommen, die E-Mail wird besser sein. Oder Sie fahren mit Modus B fort."
Modus C — Nichts vorhanden
Der Benutzer hat nur ein HTML-Formular, keinen Kontext. Der Skill muss 5 schnelle Fragen stellen:
- Was ist Ihr Produkt/Ihre Dienstleistung? (1 Satz)
- Was möchten Sie dem Benutzer nach dem Ausfüllen des Formulars senden? (PDF-Download / Buchungslink / Zahlungslink / nur Bestätigung und späterer Anruf)
- Markenname + Name des Absenders (wird im "Von:"-Feld angezeigt)
- Ihre E-Mail-Adresse für Benachrichtigungen über neue Leads
- Die Domain, die Sie besitzen, um SPF/DKIM zu verifizieren (wenn Resend/SendGrid/Mailgun/Brevo ausgewählt wurde – bei Gmail überspringen)
Phase 3 — E-Mail-Muster auswählen
2-Trigger-Modell (für Angebote mit Checkout-Flow): Bei günstigen Kursen / digitalen Produkten mit Online-Zahlung gibt es 2 verschiedene Auslöser an verschiedenen Punkten, die 2 verschiedene E-Mails senden. Fassen Sie sie nicht in einer einzigen E-Mail zusammen.
Lead füllt Formular auf Landingpage aus
↓
[Trigger A — /api/submit]
↓
E-Mail P3 (ZAHLUNGSERINNERUNG, schlank)
↓
Lead schließt Zahlung ab → Zahlungsanbieter-Webhook
↓
[Trigger B — /api/payment-webhook]
↓
E-Mail P5 (ONBOARDING NACH KAUF, vollständig)
Inhaltsregeln:
- P3 (Vor-Zahlung): nur Zahlungslink + kurze Garantie + Dringlichkeit. KEINE vollständige Liste der Leistungen/des Bonus-Stacks – der Lead hat sie noch nicht "verdient", die Auflistung verringert die Dringlichkeit der Zahlung.
- P5 (Nach-Zahlung): ALLES liefern – Zugangslink, vollständige Leistungen, Bonus-Stack, Gruppenlink, Bürozeiten-Plan, 1 Follow-up-Frage zur Personalisierung. Dies ist der wahre goldene Moment.
(Lesen Sie den Speicher feedback_email-autoresponder-2-stage-flow für die detaillierte Begründung.)
Wählen Sie basierend auf dem Kontext aus Phase 2 das passende Muster aus. Lesen Sie references/email-formulas.md für detaillierte Vorlagen auf Vietnamesisch.
| Muster | Auslöser | Wann verwenden | Betreff-Hinweis |
|---|---|---|---|
| P1 — Leadmagnet-Lieferung | Formularabsendung | Angebot = kostenloser PDF-/E-Book-/Vorlagen-/Swipe-Date-/Checklist-Download | "[Name], das Dokument [X] ist bereit — öffnen Sie es jetzt 👇" |
| P2 — Buchungsbestätigung | Formularabsendung | Angebot = Terminbuchung/Call/Beratung/Demo/kostenlose Strategie-Session | "[Name], Ihre Anmeldung zur Beratung wurde erfasst — nächste Schritte im Inneren" |
| P3 — Zahlungserinnerung | Formularabsendung (noch nicht bezahlt) | Angebot = günstiges Produkt (199K-3M VND), E-Mail führt zum Checkout | "[Name], Zahlungslink für [Kurs X] — sichern Sie sich den Sonderpreis für 24h ⏰" |
| P4 — Nurture (Verkaufsgespräch steht bevor) | Formularabsendung | Angebot = High-Ticket-Coaching/Agentur 5M-50M+ VND, Verkaufsteam ruft innerhalb von 24h an | "[Name], [Anrufer] wird sich innerhalb von 24h melden — Vorbereitungs-Checkliste im Inneren" |
| P5 — Onboarding nach Kauf | Zahlungs-Webhook | Lead hat gerade bezahlt — vollen Wert liefern + 1 Personalisierungsfrage | "🎉 Willkommen [Name] in [Kurs X] — jetzt freischalten" |
Regeln für die Musterauswahl:
- Angebot = kostenloser Download/Training → Nur P1 (1 Auslöser, 1 E-Mail).
- Angebot = kostenloser Buchungs-Call → Nur P2 (1 Auslöser, 1 E-Mail).
- Angebot = günstig mit Online-Zahlung (Stripe/Momo/ZaloPay/Sepay) → P3 + P5 (2 Auslöser, 2 E-Mails).
- Angebot = High-Ticket-Verkaufsgespräch → Nur P4, Follow-up durch Verkaufsteam (Onboarding nach Abschluss ist ein separater Prozess).
Der Skill schlägt das passende Muster mit Begründung vor und fragt den Benutzer nach Bestätigung. Beispiel: "Basierend auf der offer.json sehe ich, dass dies ein Kurs für 1,99 Mio. VND mit Zahlungsintegration ist. Ich schlage die Einrichtung von 2 E-Mails vor: P3 (Zahlungserinnerung nach Formularausfüllung) + P5 (Onboarding nach Zahlung + 1 Personalisierungsfrage). Sind Sie einverstanden oder möchten Sie nur eine E-Mail P3 vorab?"
Phase 4 — 2 E-Mails entwerfen
Generieren Sie 2 reine vietnamesische E-Mails (Anrede mit anh/chị), mobile-responsives HTML.
E-Mail A — Autoresponder an den Lead
Struktur in 6 Blöcken (lesen Sie references/email-formulas.md für die spezifische Formulierung pro Muster):
- Betreffzeile — personalisiert mit
{{name}}, kurz unter 50 Zeichen, 1 leichtes Emoji am Ende, wenn es zur Markenstimme passt (✉️ 👇 ✓), Spam-Trigger vermeiden ("FREE", "$$$", "GUARANTEE" in Großbuchstaben). - Vorschautext — 1 Satz, der unter der Betreffzeile im Posteingang angezeigt wird und den Wert der E-Mail beim Öffnen erklärt.
- Begrüßung — "Chào anh/chị {{name}}," — nicht "Dear", nicht "Sehr geehrte Damen und Herren".
- Haupttext — gemäß dem gewählten Muster. Regeln:
- Kurz (unter 200 Wörter).
- 1 primären CTA-Link/Button deutlich sichtbar.
- Konkreten Verweis auf den Angebot-/Mechanismusnamen aus dem Kontext (nicht "unser Produkt").
- Bei Muster P3/P4 → 1 Dringlichkeitserinnerung + 1 Beruhigung (Garantie).
- Signatur — Name des Absenders + Markenname + 1 Kontaktlink (Zalo/Telefon/Website).
- Fußzeile — Adresse (Anti-Spam-Gesetz erforderlich) + Abmeldelink (für Compliance erforderlich, auch bei transaktionalen E-Mails empfehlenswert).
E-Mail B — Benachrichtigung an den Eigentümer
Struktur in 4 Blöcken:
- Betreffzeile — "🆕 Neuer Lead: {{name}} — {{product_name}} — {{timestamp}}". Kurz, scanbar, direkt.
- Lead-Daten: Tabellarisch oder Aufzählung: Name, Telefon, E-Mail, alle zusätzlichen Felder (Unternehmen, Nachricht).
- Wenn Angebot eine Buchung ist: Direkter Kalenderlink (Calendly/Cal.com) zum Annehmen/Ablehnen.
- Admin-Hinweis: "Lead in den nächsten 24h kontaktieren. Diese E-Mail ist nur für Sie."
Keine Verkaufs- oder Marketinginhalte in dieser E-Mail – sie ist rein informativ für den Eigentümer.
Phase 5 — Benutzerüberprüfung & Bearbeitung
Nach der Erstellung der 2 Entwürfe:
- Zeigen Sie beide E-Mails in einer gut lesbaren Form (Vorschau von Betreffzeile + Textkörper) mit einem Hinweis auf den Platzhalter
{{name}}. - Fragen Sie, ob der Benutzer:
- Betreffzeile anpassen möchte (Markenstimme / Schreibstil)
- Bonus-Stack oder Garantietext ändern möchte
- E-Mail-Code (für späteres Einfügen in den Editor) oder alles auf einmal genehmigen möchte
Iterieren Sie, bis klar „Genehmigt" kommt. Fahren Sie nicht mit der Code-Verdrahtung fort, bis der Benutzer die E-Mail-Inhalte genehmigt hat.
Phase 6 — Code verdrahten
Führen Sie basierend auf der Erkennung aus Phase 0 + Anbieterwahl + genehmigten Entwürfen die folgenden Änderungen durch:
1. nodemailer installieren
npm install nodemailer
2. Umgebungsvariablen konfigurieren
Erstellen/Bearbeiten Sie .env.local (für Next.js) oder .env (für Vite):
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
[email protected]
SMTP_PASS=your-app-password
# Nur für Resend: SMTP_USER=resend, SMTP_PASS=re_...
# Nur für SendGrid: SMTP_USER=apikey, SMTP_PASS=SG.xxxxx
# Nur für Brevo: SMTP_USER=login-email, SMTP_PASS=xkeysib-xxx
# Absenderinformationen
FROM_NAME=Ihre Marke
[email protected]
# E-Mail des Eigentümers für Benachrichtigungen
[email protected]
Hinweis: Wenn der Benutzer einen Gmail-App-Passwort verwendet, stellen Sie in Phase 7 eine Anleitung zum Erstellen bereit.
3. API-Route generieren
Erstellen Sie basierend auf dem Stack aus Phase 0 die entsprechende Datei:
// Beispiel: app/api/submit/route.ts (App Router)
import nodemailer from "nodemailer";
const transporter = nodemailer.createTransport({
host: process.env.SMTP_HOST,
port: Number(process.env.SMTP_PORT),
secure: false,
auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS },
});
export async function POST(request: Request) {
const data = await request.json();
const { name, phone, email } = data;
// ... E-Mail-Betreff in den genehmigten Entwurf einfügen
const leadEmailHtml = `...`;
const ownerEmailHtml = `...`;
await transporter.sendMail({
from: `"${process.env.FROM_NAME}" <${process.env.FROM_EMAIL}>`,
to: email,
subject: `[Name], Ihr Link ist bereit 👇`,
html: leadEmailHtml,
});
await transporter.sendMail({
from: process.env.FROM_EMAIL,
to: process.env.OWNER_EMAIL,
subject: `🆕 Neuer Lead: ${name} - ${new Date().toISOString()}`,
html: `<p>Name: ${name}</p><p>Telefon: ${phone}</p><p>E-Mail: ${email}</p>`,
});
return Response.json({ success: true });
}
(Bei Verwendung des 2-Trigger-Modells P3 + P5 eine separate Route /api/payment-webhook generieren, die von Stripe/Momo/ZaloPay aufgerufen wird.)
4. Formular-Code aktualisieren
Fügen Sie onSubmit zum bestehenden <form> hinzu:
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
const response = await fetch("/api/submit", {
method: "POST",
body: JSON.stringify({
name: formData.get("name"),
phone: formData.get("phone"),
email: formData.get("email"),
}),
headers: { "Content-Type": "application/json" },
});
if (response.ok) {
alert("Alles klar! Überprüfen Sie Ihre E-Mail.");
}
};
Phase 7 — Anbieter-Setup & Testplan
Zu diesem Zeitpunkt ist der Code fertig, aber der SMTP-Dienst ist noch nicht einsatzbereit. Der Skill führt den Benutzer durch:
Gmail SMTP
- Gehen Sie zu myaccount.google.com/apppasswords
- Erstellen Sie ein App-Passwort (Auswahl „Andere (benutzerdefinierter Name)")
- Kopieren Sie das 16-stellige App-Passwort in
SMTP_PASS - Hinweis: Wenn 2FA auf dem Konto nicht aktiviert ist, aktivieren Sie es, bevor Sie ein App-Passwort erstellen können
Resend SMTP
- Gehen Sie zu resend.com/domains → Domain hinzufügen
- Fügen Sie die DKIM/SPF-DNS-Einträge hinzu (dem Benutzer das genaue DNS-Eintragsformat anzeigen)
- Warten Sie auf die Verifizierung (5–30 Minuten)
- Kopieren Sie den API-Key in
SMTP_PASSund setzen SieSMTP_USER=resend
Brevo SMTP
- Gehen Sie zu brevo.com → SMTP & API → SMTP-Schlüssel
- Erstellen Sie einen SMTP-Schlüssel (Unterschied zum API-Key beachten)
- Kopieren Sie ihn in
SMTP_PASS,SMTP_USER= die bei Brevo registrierte E-Mail
Benutzerdefiniertes SMTP (Hosting VN)
- Fragen Sie den Benutzer nach dem vom Hosting bereitgestellten SMTP-Server (normalerweise:
mail.domain.comodersmtp.domain.com) - Port: 587 (STARTTLS) oder 465 (SSL) – hängt vom Hosting ab
- Benutzer = E-Mail-Konto des Hostings / Passwort = E-Mail-Passwort
Testplan
Nach Abschluss des Setups:
- Phase 1:
node -e "const nodemailer = require('nodemailer'); ..."ausführen, um die SMTP-Verbindung zu testen - Phase 2: E-Mail an den Lead senden (die Seite öffnen, Formular mit gültiger E-Mail ausfüllen) → prüfen, ob die E-Mail im Spam-/Hauptposteingang ankommt
- Phase 3: E-Mail an den Eigentümer senden → prüfen, ob sie ankommt
- Phase 4: Wenn möglich, die gesamte Pipeline testen: Formular ausfüllen → E-Mail abrufen → Link in der E-Mail bestätigen → Seite wird erfolgreich geöffnet
- Hinweis: Bei der ersten Einrichtung können E-Mails im Spam landen, was normal ist. Warm-up des SMTP-Servers durch vorheriges Senden einiger manueller E-Mails.
⚠️ Fehlerbehebung: Wenn die E-Mail nicht ankommt, überprüfen Sie:
- Sieht die
.env-Datei korrekt aus? (env var nicht in Anführungszeichen setzen, keine Leerzeichen nach=)- Stimmen Host und Port mit den SMTP-Einstellungen überein?
- Ist der SMTP-Port in der Firewall des Hostings geöffnet? (wichtig bei benutzerdefiniertem SMTP)
- SendGrid/Brevo: Haben Sie den SMTP-Key anstelle des API-Keys verwendet?
Referenzen & Dateien
| Name | Typ | Verwendung |
|---|---|---|
references/email-formulas.md | Referenz | E-Mail-Vorlagen für jedes Muster auf Vietnamesisch |
references/email-autoresponder-2-stage-flow.md | Referenz | Erklärung des 2-Trigger-Modells P3 + P5 |
Änderungsprotokoll
- 2026-05-14: Pipeline-Aktualisierung.
biz-sales-page-layoutDEPRECATED. Überspringen Sie layout.json und copy.json. Verwenden Sie nur offer.json + page.tsx lesen. - 2026-05-10: Erstversion: 7 Phasen, SMTP-Unterstützung für 7 Anbieter, nodemailer-Integration.