Limited offer: $250 off for the first 200 customers!Claim discount

Lead Magnet

Capture email addresses with a two-column section — stores leads in Supabase, adds them to a Resend audience, and sends a delivery email.

What it does

LeadMagnet renders a two-column section: persuasive copy and bullet points on the left, an email input and submit button on the right. When someone submits, the/api/lead route does three things independently — a failure in any one never blocks the others:

  • Saves the email to the leads table in Supabase.
  • Adds the contact to a Resend Audience (optional — requires RESEND_AUDIENCE_ID).
  • Sends a delivery email to the subscriber via Resend (optional — requires RESEND_API_KEY).

Duplicate submissions are handled gracefully — if the email is already in the table, the delivery email is skipped so the subscriber does not receive it twice.

Usage

import LeadMagnet from "@/components/LeadMagnet";

<LeadMagnet />

Prerequisites

The leads table must exist in Supabase before the form can save submissions. If the table is missing, Supabase insertion is silently skipped — no error is shown to the user. See the Database guide for the SQL to create the table (it's a single query).

Customizing the copy

Open src/components/LeadMagnet.tsx. At the top of the file you will find plain string constants you can edit directly:

const badge        = "Stay updated";
const heading      = "Be the first to know.";
const subheading   = "Get product updates and tips — delivered to your inbox.";
const bulletPoints = [
  "Early access to new features",
  "Practical tips to get more from your workflow",
  "No spam. Unsubscribe anytime.",
];
const ctaLabel  = "Subscribe";
const formNote  = "No spam. Unsubscribe anytime.";

Customizing the delivery email

Edit src/emails/LeadMagnetEmail.tsx to change the subject line, body copy, and any download link or resource URL you want to deliver. The email is only sent once per unique address.

Resend Audience (optional)

When RESEND_AUDIENCE_ID is set, every new subscriber is automatically added to that audience in Resend. This lets you send broadcast emails or sequences to your list later — separate from transactional emails.

# .env.local
RESEND_AUDIENCE_ID=aud_xxxxxxxxxxxxxxxx

Find or create an audience in your Resend dashboard under Audiences. Copy the ID from the audience detail page. If this variable is not set, the audience step is silently skipped and everything else still works.

TipThe lead magnet works without Resend configured — emails collected are still saved to Supabase. Wire up the delivery email and audience once you have a resource worth sending.
TipMake the bullet points specific. "Early access to new features" is vague. "Get notified 48 hours before public launch with a discount code" gives the visitor a concrete reason to subscribe.
TipThe form note below the button (formNote) is the last thing a visitor reads before submitting. "No spam. Unsubscribe anytime." removes the final hesitation — keep it short and reassuring.