Biz SMTP Form Autoresponder — Correo automático tras el envío del formulario
Esta habilidad convierte el formulario de registro en una landing page (nombre/teléfono/correo según el estándar de tráfico VN) en 2 correos automáticos justo después de que el usuario envíe el formulario: (A) un correo de bienvenida para el lead, (B) un correo de notificación para el propietario. Los correos se redactan específicamente para cada oferta basándose en el contexto disponible del pipeline biz-* (no un genérico "Gracias por registrarse, nos pondremos en contacto pronto" — eso es contenido que quema leads).
Filosofía: El auto-responder por correo es un momento dorado. El lead acaba de hacer clic en enviar y está en su pico de intención. El correo que llegue en 30 segundos debe (1) confirmar que el envío fue exitoso, (2) entregar lo prometido en la CTA (lead magnet / reserva / enlace de pago), (3) establecer expectativas claras sobre el siguiente paso. Un buen auto-responder puede convertir el 20-40% de los leads fríos en leads cálidos. Un correo genérico hace que el lead bloquee al remitente o olvide la marca en 24 horas.
Por qué SMTP (sin depender de un proveedor): SMTP es un estándar abierto: el usuario puede elegir el proveedor que mejor se adapte a su presupuesto, región y requisitos de cumplimiento. Gmail SMTP es gratuito para 500/día (suficiente para una landing page con <50 leads/día), Resend SMTP ofrece 3000/mes, SendGrid 100/día para siempre, Brevo (popular en VN) 300/día gratis, y los hosts de VN (Mắt Bão/PA/Inet) suelen incluir SMTP. El código usa
nodemailer: cambiar de proveedor solo requiere modificar 4 variables de entorno, sin tocar el código. Se evita la dependencia de un proveedor.
Salida de la habilidad: parche de código + 2 borradores de correo HTML responsivo + lista de variables de entorno + plan de pruebas. La habilidad NO envía correos de prueba — el usuario debe confirmar los borradores primero, ya que el enlace del lead magnet, la voz de la marca y el tono de urgencia son activos del usuario.
Cuándo usar esta habilidad
- El usuario acaba de implementar una landing page (a través de
/biz-deploy-vercel) y el formulario envía datos a la nada. - El usuario tiene una landing page existente (Next.js, Vite o HTML estático en Vercel) y desea agregar un auto-responder por correo.
- El usuario está creando un nuevo proyecto y desea integrar el correo desde el principio antes de implementar.
- El usuario ya tiene Gmail/Google Workspace y quiere aprovechar el SMTP gratuito en lugar de crear una cuenta en un nuevo proveedor.
- El usuario tiene un host en VN (Mắt Bão, PA, Inet) con un servidor SMTP existente que desea utilizar.
NO use esta habilidad cuando:
- El usuario desea marketing por correo masivo (boletines, campañas de goteo de 7 a 30 días) → Mailchimp/ConvertKit/MailerLite son más adecuados.
- El usuario desea un auto-responder por SMS/Zalo OA → caso de uso diferente.
- El usuario desea integración con CRM (leads en Hubspot/Pipedrive/Notion DB) → otra habilidad.
- El usuario necesita prospección por correo masivo → Instantly/Smartlead, no transaccional.
Flujo de trabajo general (7 fases)
Fase 0: DETECTAR PILA DEL PROYECTO (Next.js App / Pages / Vite / HTML estático)
↓
Fase 1: ELEGIR PROVEEDOR SMTP (Gmail / Resend SMTP / SendGrid / Mailgun / Brevo / Zoho / Personalizado)
↓
Fase 2: RECOPILAR CONTEXTO (offer.json + conversion-copy.md, o leer la app/page.tsx de Next.js, o leer el HTML implementado)
↓
Fase 3: ELEGIR PATRÓN DE CORREO (lead magnet / reserva / pago / nurturing)
↓
Fase 4: REDACTAR 2 CORREOS (auto-responder + notificación al propietario) — mostrar al usuario
↓
Fase 5: REVISIÓN Y EDICIÓN DEL USUARIO — iterar hasta que el usuario apruebe
↓
Fase 6: CONECTAR CÓDIGO (instalar nodemailer + ruta API + enlace al formulario + variables de entorno)
↓
Fase 7: CONFIGURACIÓN DEL PROVEEDOR + PLAN DE PRUEBAS — instrucciones para obtener credenciales SMTP, verificar el dominio (si es necesario), probar en vivo
Cada fase se detiene para que el usuario confirme — especialmente la Fase 1 (elección del proveedor), las Fases 4-5 (contenido del correo) y la Fase 7 (DNS del proveedor), ya que son activos de la marca del usuario. La generación de código en la Fase 6 es más proactiva.
Fase 0 — Detectar la pila del proyecto
Lea el archivo raíz del proyecto para determinar la pila. La pila determina: dónde se coloca la ruta API, la sintaxis de importación de nodemailer, y el tipo de enlace del formulario (fetch o form action).
| Archivo detectado | Pila | Ruta de la API | Enlace del formulario |
|---|---|---|---|
next.config.js/mjs/ts + carpeta app/ | Next.js App Router | app/api/submit/route.ts | componente cliente fetch('/api/submit') |
next.config.js/mjs/ts + carpeta pages/ | Next.js Pages Router | pages/api/submit.ts | componente cliente fetch('/api/submit') |
vite.config.js/ts | Vite (React/Vue/Svelte) | api/submit.js (función de Vercel) | componente cliente fetch('/api/submit') |
package.json sin framework, con index.html | HTML estático | api/submit.js (función de Vercel) | <script> en línea con fetch('/api/submit') |
| Sin proyecto local, solo URL | Página implementada existente | Necesita que el usuario clone el repositorio primero o indique la ruta del repositorio | — |
Lea más para determinar los campos del formulario:
- Busque
<form>en el código → enumere los elementos<input name="...">existentes. - Valores predeterminados esperados (según la memoria del proyecto):
name,phone,email. Algunas páginas agregan:company,message,budget,utm_source. - Si el formulario no existe → la habilidad creará un nuevo formulario con un mínimo de 3 campos (nombre/teléfono/correo) en la Fase 6.
Importante: Si el usuario no tiene un proyecto local (solo la URL implementada), deténgase y pregunte: "¿Tiene un repositorio local para que pueda conectar el código? Necesito editar el código fuente. Si solo tiene la URL, clone el repositorio e indíqueme la ruta." No es posible conectar solo con la URL.
Fase 1 — Elegir proveedor SMTP
Pregunte al usuario que elija uno de los 7 proveedores. Cada proveedor tiene una configuración SMTP diferente (host/puerto/auth). La habilidad completa automáticamente la plantilla de variables de entorno cuando el usuario elige.
| # | Proveedor | Nivel gratuito | Adecuado cuando | Host SMTP | Puerto | Notas |
|---|---|---|---|---|---|---|
| 1 | Gmail / Google Workspace | 500/día | El usuario ya tiene Gmail/Workspace, tráfico bajo | smtp.gmail.com | 587 (STARTTLS) | Obligatorio usar Contraseña de aplicación (2FA), NO usar la contraseña principal |
| 2 | Resend SMTP | 3000/mes | Alta capacidad de entrega + registros detallados, acepta configurar DNS | smtp.resend.com | 587 | Usuario = resend, Contraseña = clave API. Necesita verificar el dominio para enviar desde @marca.vn personalizado |
| 3 | SendGrid SMTP | 100/día para siempre | La pila ya usa SendGrid, necesita webhooks | smtp.sendgrid.net | 587 | Usuario = apikey literal, Contraseña = clave API |
| 4 | Mailgun SMTP | 100/día × 3 meses | Región UE/US, amigable para desarrolladores | smtp.mailgun.org (US) o smtp.eu.mailgun.org (UE) | 587 | Usuario/contraseña de la configuración del dominio de Mailgun |
| 5 | Brevo (Sendinblue) SMTP | 300/día para siempre | Popular en VN, nivel gratuito más amplio, con soporte en VN | smtp-relay.brevo.com | 587 | Usuario = correo de inicio de sesión, Contraseña = clave SMTP (diferente de la clave API) |
| 6 | Zoho Mail SMTP | 5/día gratis, $1/usuario/mes | El usuario ya usa Zoho Workspace | smtp.zoho.com | 587 | Necesita Contraseña de aplicación si 2FA está activado |
| 7 | SMTP personalizado | Depende del host | Hosts de VN (Mắt Bão/PA/Inet/Nhân Hòa) incluyen SMTP, o usar Postfix autoalojado | El usuario proporciona | El usuario proporciona | El usuario pega el host/puerto/usuario/contraseña completos |
Recomendación predeterminada según el tipo de oferta:
- Landing page con <50 leads/día, el usuario tiene Gmail → Gmail SMTP (sin costo, configuración en 5 minutos).
- Landing page con >50 leads/día o que necesita capacidad de entrega profesional → Brevo (gratis 300/día, buena capacidad de entrega en VN) o Resend SMTP (3000/mes, registros detallados).
- El usuario desea ser independiente del proveedor y podría autoalojar más adelante → SMTP personalizado desde el principio.
Formato de la pregunta para el usuario:
¿Qué proveedor SMTP desea usar para enviar los correos automáticos?
1. Gmail / Google Workspace (gratis 500/día, el más fácil si ya tiene Gmail)
2. Resend SMTP (gratis 3000/mes, alta capacidad de entrega, necesita verificar el dominio)
3. SendGrid SMTP (gratis 100/día para siempre, si ya conoce la API)
4. Mailgun SMTP (gratis 100/día × 3 meses)
5. Brevo / Sendinblue SMTP (gratis 300/día, popular en VN)
6. Zoho Mail SMTP (si ya usa Zoho Workspace)
7. SMTP personalizado (el host de VN que ya tiene / autoalojado)
Si no tiene ninguna cuenta, le recomiendo [Gmail si el tráfico es bajo / Brevo si necesita alta capacidad de entrega]. ¿Qué número elige?
Después de que el usuario elija → guárdelo para inyectarlo en la plantilla de variables de entorno en la Fase 6 y proporcionar instrucciones para obtener las credenciales del proveedor correcto en la Fase 7.
⚠️ Importante — seguridad: Las credenciales SMTP (especialmente la Contraseña de aplicación de Gmail) tienen permiso para enviar correos desde la cuenta del usuario. Nunca las codifique en el código fuente. Use siempre variables de entorno. Advierte al usuario que las rote inmediatamente si las confirma accidentalmente.
Fase 2 — Recopilar contexto
Objetivo: comprender la oferta lo suficientemente a fondo como para redactar correos no genéricos. 3 modos de entrada:
Modo A — Con artefactos del pipeline (el más completo)
El usuario acaba de ejecutar /biz-offer-alex-hormozi y/o ui-ux-pro-max → tiene archivos:
output/<slug-del-caso>/offer.json— segmento, resultado soñado, mecanismo, pila de bonificaciones, garantía, precios (FUENTE PRINCIPAL de información)output/<slug-del-caso>/conversion-copy.md— bloque de héroe listo para pegar (titular, subtítulo, redacción de CTA)output/<slug-del-caso>/landing-page/app/page.tsx— página de ventas actual de Next.js ya construida (léala para conocer las secciones y los campos del formulario que se utilizan)
⚠️ Actualización 2026-05-14: El pipeline anterior tenía
layout.json+copy.json(debiz-sales-page-layoutque está DEPRECATED) — el nuevo proceso OMITE esos 2 archivos. Solo necesitaoffer.json+ leer page.tsx para tener suficiente contexto.
Lea las 3 fuentes anteriores. Extraiga para el correo:
- Segmento + resultado soñado → personalice la línea de asunto ("[Nombre], la ruta de 8 semanas para AI Agent está lista" en lugar de "Bienvenido")
- Nombre del mecanismo → refuércelo en el cuerpo ("El sistema PROMPT framework que está a punto de aprender...")
- Pila de bonificaciones → enumérela en el correo (si la oferta es gratuita/de bajo precio con bonificaciones entregables de inmediato)
- Texto de la garantía → cítelo textualmente en el correo para reducir la ansiedad
- Redacción de la CTA → reflejarlo en la CTA final del correo
Modo B — Tiene landing page pero no archivos json
El usuario tiene HTML implementado pero no ejecutó biz-offer/biz-sales-page. La habilidad lee el HTML:
curl -s <URL>o lee el archivoindex.htmllocal- Analiza el h1 del héroe, el subtítulo, el texto del botón de CTA, el bloque de precios, el bloque de garantía
- A partir de eso, infiere el tipo de oferta y el segmento
El Modo B es suficientemente bueno para el 80% de los casos, pero los correos son menos personalizados que en el Modo A. Sugiera al usuario: "Puede ejecutar /biz-offer-alex-hormozi para obtener el archivo offer.json y luego volver aquí; los correos serán mejores. O continuar con el Modo B."
Modo C — Sin nada
El usuario solo tiene el formulario HTML, sin contexto. La habilidad debe hacer 5 preguntas rápidas:
- ¿Qué producto/servicio vende? (1 frase)
- Después de que el usuario complete el formulario, ¿qué desea enviarle? (PDF descargable / enlace de reserva / enlace de pago / solo confirmación y llamada posterior)
- Nombre de la marca + nombre del remitente (que aparecerá en "De:")
- Correo en el que desea recibir notificaciones de nuevos leads
- Dominio que posee para verificar SPF/DKIM (si elige Resend/SendGrid/Mailgun/Brevo — Gmail no necesita)
Fase 3 — Elegir el patrón de correo
Modelo de 2 disparadores (para ofertas con flujo de pago): Para cursos de bajo precio / productos digitales con pago en línea, hay 2 disparadores en diferentes puntos, que envían 2 correos diferentes. No los combine en un solo correo.
El lead completa el formulario en la landing page
↓
[Disparador A — /api/submit]
↓
Correo P3 (RECORDATORIO PREVIO AL PAGO, breve)
↓
El lead completa el pago → webhook del proveedor de pago
↓
[Disparador B — /api/payment-webhook]
↓
Correo P5 (INCORPORACIÓN POSTERIOR A LA COMPRA, completo)
Reglas de contenido:
- P3 (previo al pago): solo el enlace de pago + garantía breve + urgencia. NO enumere todos los entregables/la pila de bonificaciones — el lead aún no los ha "ganado", enumerarlos reduce la urgencia de pago.
- P5 (posterior al pago): ENTREGUE TODO — enlace de acceso, todos los entregables, pila de bonificaciones, enlace del grupo, horario de oficina, 1 pregunta de seguimiento para personalizar. Este es el verdadero momento dorado.
(Lea la memoria feedback_email-autoresponder-2-stage-flow para obtener una justificación detallada).
A partir del contexto de la Fase 2, elija el patrón adecuado. Lea references/email-formulas.md para obtener una plantilla detallada en vietnamita.
| Patrón | Disparador | Cuándo usarlo | Sugerencia de asunto |
|---|---|---|---|
| P1 — Entrega de Lead Magnet | Envío del formulario | Oferta = descarga de PDF/ebook/plantilla/archivo de guión/lista de verificación gratuita | "[Nombre], el documento [X] está listo — ábralo ahora 👇" |
| P2 — Confirmación de Reserva | Envío del formulario | Oferta = reserva de llamada/consulta/demostración/sesión de estrategia gratuita | "[Nombre], confirmamos su registro para la sesión de consultoría — próximos pasos en el interior" |
| P3 — Recordatorio Previo al Pago | Envío del formulario (aún no pagó) | Oferta = producto de bajo precio (199K-3M VND), el correo lleva al pago | "[Nombre], enlace de pago para [Curso X] — precio promocional por 24h ⏰" |
| P4 — Nurturing (Próxima llamada de ventas) | Envío del formulario | Oferta = coaching/agencia de alto precio 5M-50M+ VND, el equipo de ventas llamará en 24h | "[Nombre], [Persona que llama] se comunicará en 24h — lista de verificación de preparación en el interior" |
| P5 — Incorporación Posterior a la Compra | Webhook de pago | El lead acaba de pagar — entregue todo el valor + 1 pregunta de personalización | "🎉 Bienvenido [Nombre] al [Curso X] — desbloquee ahora" |
Reglas para elegir el patrón:
- Oferta = descarga/entrenamiento gratuito → solo P1 (1 disparador, 1 correo).
- Oferta = reserva de llamada gratuita → solo P2 (1 disparador, 1 correo).
- Oferta = bajo precio con pago en línea (Stripe/Momo/ZaloPay/Sepay) → P3 + P5 (2 disparadores, 2 correos).
- Oferta = llamada de ventas de alto precio → solo P4, seguimiento por parte del equipo de ventas (la incorporación posterior al cierre del trato es un proceso diferente).
La habilidad sugiere el patrón adecuado + el motivo, y pregunta al usuario para confirmar. Ejemplo: "Según el archivo offer.json, este es un curso de 1.99M VND con integración de pago. Sugiero configurar 2 correos: P3 (recordatorio de pago al enviar el formulario) + P5 (incorporación después del pago + 1 pregunta de personalización). ¿Está de acuerdo o solo desea 1 correo P3 primero?"
Fase 4 — Redactar 2 correos
Genere 2 correos en vietnamita puro (tratamiento de anh/chị), HTML responsivo para móviles.
Correo A — Auto-responder para el lead
Estructura de 6 bloques (lea references/email-formulas.md para la redacción específica por patrón):
- Línea de asunto — personalizada con
{{name}}, menos de 50 caracteres, con 1 emoji ligero al final si es adecuado para la voz de la marca (✉️ 👇 ✓), evite activadores de spam ("GRATIS", "$$$", "GARANTÍA" en mayúsculas). - Texto de vista previa — 1 frase que se muestra debajo del asunto en la bandeja de entrada, que explica el valor del correo al abrirlo.
- Saludo — "Chào anh/chị {{name}}," — no "Dear", no "Xin chào quý khách".
- Cuerpo principal — según el patrón elegido. Reglas:
- Corto (menos de 200 palabras).
- Tener 1 enlace/botón CTA principal claro.
- Hacer referencia específica al nombre de la oferta/mecanismo del contexto (no "nuestro producto").
- Si es el Patrón P3/P4 → incluir 1 recordatorio de urgencia + 1 tranquilidad (garantía).
- Firma — Nombre del remitente + nombre de la marca + 1 enlace de contacto (Zalo/Teléfono/Sitio web).
- Pie de página — Dirección (requerida por las leyes antispam) + enlace de cancelación de suscripción (necesario para cumplimiento, aunque sea transaccional, es mejor tenerlo).
Correo B — Notificación para el propietario
Estructura (sin diseño complejo, solo texto plano o HTML mínimo):
- Asunto: "🚀 Nuevo lead [Nombre] — [Nombre de la oferta]"
- Cuerpo:
- Información del lead: nombre, teléfono, correo, hora de envío.
- Campos adicionales del formulario (si los hay).
- Enlace directo a la bandeja de entrada del correo para seguimiento.
- (Opcional) Resumen de la oferta: si el correo P3 se envió, qué contiene el enlace de pago.
Fase 5 — Revisión y edición del usuario
Muestre ambos borradores en un formato claro. Pregunte:
Aquí están los 2 borradores:
---
[Correo A] - Auto-responder para el lead:
Asunto: ...
Cuerpo:
...
---
[Correo B] - Notificación para usted:
Asunto: ...
Cuerpo:
...
¿Está de acuerdo con estos borradores?
1. Sí, continuar con la conexión del código.
2. Editar el Correo A (especifique los cambios).
3. Editar el Correo B (especifique los cambios).
4. Editar ambos. Los ajustaré según sus indicaciones.
Itere hasta que el usuario apruebe. No pase a la Fase 6 sin la confirmación del usuario.
Fase 6 — Conectar el código
Instale nodemailer + cree la ruta API + enlace al formulario.
6.1 — Instalar nodemailer
npm install nodemailer
# o
pnpm add nodemailer
# o si es HTML estático, asegúrese de que la función de Vercel tenga la dependencia en package.json de la carpeta api
6.2 — Crear el archivo de configuración SMTP
Cree lib/mail.ts (o el archivo correspondiente según la pila):
import nodemailer from 'nodemailer';
const transporter = nodemailer.createTransport({
host: process.env.SMTP_HOST,
port: Number(process.env.SMTP_PORT || '587'),
secure: process.env.SMTP_SECURE === 'true',
auth: {
user: process.env.SMTP_USER,
pass: process.env.SMTP_PASS,
},
});
export async function sendEmail({
to,
subject,
html,
from,
}: {
to: string;
subject: string;
html: string;
from?: string;
}) {
await transporter.sendMail({
from: from || process.env.SMTP_FROM,
to,
subject,
html,
});
}
6.3 — Crear la ruta API
Next.js App Router (app/api/submit/route.ts):
import { NextRequest, NextResponse } from 'next/server';
import { sendEmail } from '@/lib/mail';
export async function POST(request: NextRequest) {
const body = await request.json();
const { name, phone, email } = body;
// (Redactar el correo A aquí según el patrón elegido + el contexto)
const leadEmailHtml = `...`; // Generado en la Fase 4
// (Redactar el correo B aquí)
const ownerEmailHtml = `...`; // Generado en la Fase 4
try {
await Promise.all([
sendEmail({ to: email, subject: '...', html: leadEmailHtml }),
sendEmail({ to: process.env.OWNER_EMAIL, subject: '...', html: ownerEmailHtml }),
]);
return NextResponse.json({ success: true });
} catch (error) {
console.error('Error al enviar el correo:', error);
return NextResponse.json({ success: false, error: 'Error al enviar el correo' }, { status: 500 });
}
}
6.4 — Enlazar al formulario
Dependiendo de la pila, actualice el componente o el script del formulario para que llame a POST /api/submit con los datos del formulario.
6.5 — Agregar variables de entorno
Cree/actualice el archivo .env.local (o el archivo de variables de entorno correspondiente):
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
[email protected]
SMTP_PASS=xxxx xxxx xxxx xxxx (Contraseña de aplicación)
SMTP_FROM=Tu nombre <[email protected]>
[email protected]
Fase 7 — Configuración del proveedor + plan de pruebas
Proporcione instrucciones para obtener las credenciales correctas del proveedor elegido + verificar el dominio (si es necesario) + probar en vivo.
7.1 — Instrucciones para obtener credenciales por proveedor
| Proveedor | Cómo obtener las credenciales | Verificar dominio |
|---|---|---|
| Gmail | Crear Contraseña de aplicación (myaccount.google.com/apppasswords) | No es necesario (Gmail lo maneja) |
| Resend | Crear clave API en resend.com → SMTP | Agregar registros SPF/DKIM para el dominio de envío |
| SendGrid | Crear clave API en app.sendgrid.com → Settings → API Keys | Agregar registro SPF, (opcional) DKIM |
| Mailgun | Encontrar en Mailgun → Domains → (tu dominio) → SMTP credentials | Agregar registros SPF/DKIM/MX |
| Brevo | SMTP key en brevo.com → SMTP & API → SMTP | Agregar registros SPF/DKIM |
| Zoho | Zoho Mail → Settings → Mail Accounts → SMTP | Agregar registros SPF/DKIM |
| Personalizado | El usuario proporciona host/puerto/usuario/contraseña | Según el host |
7.2 — Plan de pruebas
Pida al usuario que:
- Complete el formulario usted mismo con su propio nombre/teléfono/correo → compruebe que le lleguen ambos correos (el del lead a su correo principal, la notificación al correo del propietario).
- Verifique la carpeta de spam — si el correo cae en spam, verifique los registros SPF/DKIM.
- Pruebe la capacidad de respuesta en dispositivos móviles — abra el correo en el teléfono.
- Pruebe el enlace de cancelación de suscripción (si se implementó).
- Monitoree los registros del servidor durante 24 horas para detectar cualquier error de envío (timeout, rebote).
Apéndice: Referencias para redactar correos
Para obtener redacción detallada (específica para vietnamita) para cada patrón, consulte:
references/email-formulas.md— estructura P1-P5, ejemplos de líneas de asunto, cuerpo y CTA.references/conversion-copy.md(del pipeline biz-offer) — para mantener la voz de la marca.feedback_email-autoresponder-2-stage-flow— justificación del modelo de 2 disparadores.