# Web Email Capture > Email capture and newsletter integration patterns — opt-in forms, Resend transactional email, Beehiiv/Mailchimp newsletter sync, drip sequence wiring, and conversion-optimized signup flows. - Skill: `dinaf2026-web/web-email-capture` (Agent Skill) - Install (CLI): `npx skillmds@latest add dinaf2026-web/web-email-capture` - Raw SKILL.md: https://api.skillmd.com/api/skills/dinaf2026-web/web-email-capture/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Integrations & APIs - Author: dinaf2026-web (https://skillmd.com/u/dinaf2026-web) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/dinaf2026-web/web-email-capture --- # web-email-capture Email capture and newsletter integration for Next.js 14 App Router. Covers Resend transactional email, Beehiiv/Mailchimp sync, double opt-in, drip sequences, popup capture, and conversion analytics. --- ## 1. When to Use Which | Need | Tool | Why | |------|------|-----| | Transactional email (welcome, receipts, password reset) | **Resend** | Developer-first, React Email templates, reliable delivery | | Newsletter + paid subscriptions | **Beehiiv** | Built-in monetization, referral program, analytics | | Marketing automation + CRM | **Mailchimp** | Audience segmentation, A/B testing, large ecosystem | | Creator-focused sequences + commerce | **ConvertKit** | Tag-based automation, creator tools, Stripe integration | | Simple drip with code control | **Resend Broadcasts** | No extra vendor, full control, cheap | **Decision rule:** - Start with Resend for all transactional. - Add Beehiiv if you want a hosted newsletter with growth tools. - Add Mailchimp only if you need heavy segmentation or existing list. - Use ConvertKit if you sell digital products to your list. - Never use two newsletter platforms simultaneously — sync is fragile. --- ## 2. Resend Setup ```bash npm install resend ``` ```ts // lib/resend.ts import { Resend } from 'resend' if (!process.env.RESEND_API_KEY) { throw new Error('RESEND_API_KEY is required') } export const resend = new Resend(process.env.RESEND_API_KEY) ``` ```ts // .env.local RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxx RESEND_FROM_EMAIL=hello@yourdomain.com RESEND_FROM_NAME=Your Brand ``` **Domain verification** — add these DNS records in your registrar: ``` Type Name Value TXT resend._domainkey.yourdomain (Resend provides this in dashboard) MX send.yourdomain feedback-smtp.us-east-1.amazonses.com TXT @ v=spf1 include:amazonses.com ~all ``` Verify ownership via the Resend dashboard under Domains. Transactional email requires a verified domain — never send from a free Gmail/Yahoo address. --- ## 3. Welcome Email Template ```bash npm install @react-email/components @react-email/render ``` ```tsx // emails/WelcomeEmail.tsx import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, Section, Text, } from '@react-email/components' interface WelcomeEmailProps { firstName: string confirmUrl?: string unsubscribeUrl: string } export function WelcomeEmail({ firstName, confirmUrl, unsubscribeUrl, }: WelcomeEmailProps) { return ( Welcome — confirm your email to get started

Welcome, {firstName} Thanks for joining. You are one step away — confirm your email address so we can send you the good stuff. {confirmUrl && (

)} Button not working?{' '} Copy this link

You received this because you signed up at yourdomain.com.{' '} Unsubscribe ) } // Inline styles — required for email clients. No Tailwind here. const body: React.CSSProperties = { backgroundColor: '#f6f9fc', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', margin: 0, padding: 0, } const container: React.CSSProperties = { backgroundColor: '#ffffff', border: '1px solid #e6ebf1', borderRadius: '8px', margin: '40px auto', maxWidth: '560px', padding: '40px', } const logoSection: React.CSSProperties = { marginBottom: '32px', } const h1: React.CSSProperties = { color: '#1a1a1a', fontSize: '24px', fontWeight: '700', lineHeight: '1.3', margin: '0 0 16px', } const text: React.CSSProperties = { color: '#374151', fontSize: '16px', lineHeight: '1.6', margin: '0 0 24px', } const mutedText: React.CSSProperties = { ...text, color: '#6b7280', fontSize: '14px', } const buttonSection: React.CSSProperties = { margin: '0 0 24px', textAlign: 'center', } const button: React.CSSProperties = { backgroundColor: '#2563eb', borderRadius: '6px', color: '#ffffff', display: 'inline-block', fontSize: '16px', fontWeight: '600', padding: '12px 28px', textDecoration: 'none', } const hr: React.CSSProperties = { borderColor: '#e6ebf1', margin: '32px 0', } const footer: React.CSSProperties = { color: '#9ca3af', fontSize: '12px', lineHeight: '1.5', } const link: React.CSSProperties = { color: '#2563eb', } ``` ```ts // lib/send-welcome.ts import { render } from '@react-email/render' import { resend } from './resend' import { WelcomeEmail } from '@/emails/WelcomeEmail' export async function sendWelcomeEmail({ to, firstName, confirmToken, }: { to: string firstName: string confirmToken: string }) { const confirmUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/confirm?token=${confirmToken}` const unsubscribeUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/unsubscribe?email=${encodeURIComponent(to)}` const html = await render( WelcomeEmail({ firstName, confirmUrl, unsubscribeUrl }) as React.ReactElement ) const { data, error } = await resend.emails.send({ from: `${process.env.RESEND_FROM_NAME} <${process.env.RESEND_FROM_EMAIL}>`, to, subject: 'Confirm your email', html, headers: { 'List-Unsubscribe': `<${unsubscribeUrl}>`, 'List-Unsubscribe-Post': 'List-Unsubscribe=One-Click', }, }) if (error) { throw new Error(`Resend error: ${error.message}`) } return data } ``` --- ## 4. Opt-In Form (Server Action + Double Opt-In) ```ts // lib/db/subscribers.ts // Assumes Prisma — adapt to your ORM/DB import { prisma } from '@/lib/prisma' import crypto from 'crypto' export async function createPendingSubscriber({ email, firstName, source, }: { email: string firstName: string source: string }) { const token = crypto.randomBytes(32).toString('hex') const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000) // 24h const subscriber = await prisma.subscriber.upsert({ where: { email }, update: { confirmToken: token, confirmTokenExpiresAt: expiresAt, status: 'PENDING', firstName, }, create: { email, firstName, confirmToken: token, confirmTokenExpiresAt: expiresAt, status: 'PENDING', source, }, }) return { subscriber, token } } export async function confirmSubscriber(token: string) { const subscriber = await prisma.subscriber.findFirst({ where: { confirmToken: token, confirmTokenExpiresAt: { gt: new Date() }, status: 'PENDING', }, }) if (!subscriber) { return null } return prisma.subscriber.update({ where: { id: subscriber.id }, data: { status: 'ACTIVE', confirmedAt: new Date(), confirmToken: null, confirmTokenExpiresAt: null, }, }) } ``` ```ts // app/actions/subscribe.ts 'use server' import { z } from 'zod' import { createPendingSubscriber } from '@/lib/db/subscribers' import { sendWelcomeEmail } from '@/lib/send-welcome' const schema = z.object({ email: z.string().email('Enter a valid email address'), firstName: z.string().min(1, 'First name is required').max(50), source: z.string().optional().default('unknown'), }) type SubscribeState = { success: boolean error?: string fieldErrors?: Record } export async function subscribeAction( _prev: SubscribeState, formData: FormData ): Promise { const raw = { email: formData.get('email'), firstName: formData.get('firstName'), source: formData.get('source'), } const parsed = schema.safeParse(raw) if (!parsed.success) { return { success: false, fieldErrors: parsed.error.flatten().fieldErrors, } } const { email, firstName, source } = parsed.data try { const { token } = await createPendingSubscriber({ email, firstName, source }) await sendWelcomeEmail({ to: email, firstName, confirmToken: token }) return { success: true } } catch (err) { console.error('Subscribe error:', err) return { success: false, error: 'Something went wrong. Please try again.' } } } ``` ```tsx // components/SubscribeForm.tsx 'use client' import { useActionState } from 'react' import { subscribeAction } from '@/app/actions/subscribe' const initialState = { success: false } interface SubscribeFormProps { source?: string className?: string } export function SubscribeForm({ source = 'inline', className }: SubscribeFormProps) { const [state, action, isPending] = useActionState(subscribeAction, initialState) if (state.success) { return (

Check your inbox — confirm your email to complete signup.

) } return ( ) } ``` ```ts // app/confirm/route.ts — double opt-in confirmation endpoint import { type NextRequest, NextResponse } from 'next/server' import { confirmSubscriber } from '@/lib/db/subscribers' export async function GET(request: NextRequest) { const token = request.nextUrl.searchParams.get('token') if (!token) { return NextResponse.redirect(new URL('/confirmed?error=missing', request.url)) } const subscriber = await confirmSubscriber(token) if (!subscriber) { return NextResponse.redirect(new URL('/confirmed?error=invalid', request.url)) } // Optionally sync to Beehiiv/Mailchimp here after confirmation await syncToNewsletter(subscriber.email, subscriber.firstName ?? '') return NextResponse.redirect(new URL('/confirmed', request.url)) } async function syncToNewsletter(email: string, firstName: string) { // Call Beehiiv or Mailchimp sync — see sections 5 and 6 } ``` --- ## 5. Beehiiv Integration ```ts // lib/beehiiv.ts const BEEHIIV_API_KEY = process.env.BEEHIIV_API_KEY const BEEHIIV_PUBLICATION_ID = process.env.BEEHIIV_PUBLICATION_ID if (!BEEHIIV_API_KEY || !BEEHIIV_PUBLICATION_ID) { throw new Error('BEEHIIV_API_KEY and BEEHIIV_PUBLICATION_ID are required') } const BASE_URL = `https://api.beehiiv.com/v2/publications/${BEEHIIV_PUBLICATION_ID}` interface BeehiivSubscribeOptions { email: string firstName?: string tags?: string[] utmSource?: string utmMedium?: string utmCampaign?: string referringSite?: string } export async function beehiivSubscribe({ email, firstName, tags = [], utmSource, utmMedium, utmCampaign, referringSite, }: BeehiivSubscribeOptions) { const body: Record = { email, reactivate_existing: false, send_welcome_email: false, // We send our own via Resend double_opt_override: 'disabled', // We handle double opt-in ourselves } if (firstName) { body.custom_fields = [{ name: 'First Name', value: firstName }] } if (tags.length > 0) { body.tags = tags } if (utmSource) { body.utm_source = utmSource body.utm_medium = utmMedium body.utm_campaign = utmCampaign body.referring_site = referringSite } const response = await fetch(`${BASE_URL}/subscriptions`, { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', Authorization: `Bearer ${BEEHIIV_API_KEY}`, }, body: JSON.stringify(body), }) if (!response.ok) { const text = await response.text() throw new Error(`Beehiiv subscribe failed ${response.status}: ${text}`) } return response.json() } export async function beehiivAddTags(email: string, tags: string[]) { // First look up subscriber ID const searchRes = await fetch( `${BASE_URL}/subscriptions?email=${encodeURIComponent(email)}&limit=1`, { headers: { Authorization: `Bearer ${BEEHIIV_API_KEY}`, Accept: 'application/json', }, } ) if (!searchRes.ok) return const { data } = await searchRes.json() const subscriber = data?.[0] if (!subscriber) return await fetch(`${BASE_URL}/subscriptions/${subscriber.id}`, { method: 'PATCH', headers: { Accept: 'application/json', 'Content-Type': 'application/json', Authorization: `Bearer ${BEEHIIV_API_KEY}`, }, body: JSON.stringify({ tags }), }) } ``` **Embed vs custom form:** ```tsx // Option A: Beehiiv embed (fast, no backend needed) export function BeehiivEmbed() { return (