I have five guides and one in-depth blog post on this site that come with free skill files or template packs. The files are delivered through Kit (ConvertKit) with double opt-in. The issue: if you put Kit in front of the article body, you only capture readers who click the confirmation link in their inbox. Everyone else bounces with no record in your list.
So I went with a two-tier setup. A lightweight email capture wraps the whole article. The Kit form sits inline where the template pack is pitched. Every visitor's email lands in Supabase, and the subset who want the files goes through Kit's double opt-in for a warmer-lead segment.
The two components
The site already had two gate components I'd written for different purposes:
| Component | Where the email goes | Behavior |
|---|---|---|
EmailGate | Supabase email_subscribers table, plus a tag in Kit | Single step. Type email, hit unlock, content reveals. |
KitFormGate | Kit (ConvertKit) | Double opt-in. User confirms via the email link, then the gated content unlocks. |
Before this change, three of the five guides used KitEmbed inline (the form on its own, no gating). The content-engine guide had KitFormGate wrapping the entire article, which is what triggered the rethink. That guide was getting Kit signups but losing every reader who skipped the confirmation step.
The new pattern
Every guide and the content-engine blog post now wraps the body in EmailGate. The Kit form embed sits inline at the section that offers the template pack.
<EmailGate slug="content-engine-guide" preview="...">
[hero, intro, table of contents]
### Step 2: Download the Template Pack
[explanation of what's in the pack]
<KitEmbed formId="aa7ced5820" />
[rest of the guide]
</EmailGate>
The flow for a new reader:
- Land on the guide.
- Hit the EmailGate. Type email. Article unlocks.
- Keep reading. At Step 2, the Kit form for the template pack shows up.
- Submit the form. Get the confirmation email from Kit. Click the link. Files arrive.
Step 2 captures the email in Supabase. Steps 3 and 4 add the warmer-lead signal in Kit.
What this looks like across the site
| Page | Outer gate | Inline form |
|---|---|---|
| guide: content-engine | EmailGate | KitEmbed at Step 2 |
| blog: content-engine | EmailGate | KitEmbed at Step 2 |
| guide: daily-ai-briefing | EmailGate | KitEmbed at "Get the skill file" |
| guide: second-brain | EmailGate | KitEmbed at "Get the kit" |
| guide: living-presentations | EmailGate | KitEmbed (twice: intro + install step) |
| guide: become-the-ai-person | EmailGate | None (no template pack) |
Per-slug unlock state
EmailGate writes unlocked:${slug} to localStorage. The unlock is scoped to that single guide. A reader who gives their email on the content-engine guide and then visits the second-brain guide hits the form again.
I considered making the unlock global (one email submission unlocks every guide) and kept it per-slug. Per-slug captures give you topic attribution. You can see which guide pulled someone into the list, which tells you what to write next.
The long-term answer is real auth. Magic-link login with Supabase Auth, an auth.users row backing each subscriber, and EmailGate checks session.user before rendering. Logged-in readers skip every gate across every guide and across devices. Not building that today, but it's the way off localStorage.
The separation worth making
Most email-capture setups treat capture and qualification as one event. Someone gives you their email, that's the lead, that's the segment. One-step gates give you volume with no signal on intent. Double opt-in gives you clean intent and loses everyone who didn't confirm.
Splitting the two solves it. The cheap step (Supabase capture) gets you in to read. The expensive step (Kit confirmation) gets you the template pack. Both run on the same page. Neither blocks the other.
You end up with two segments instead of one. The wider list is everyone who entered an email to read. The Kit subscribers are the subset who also confirmed for the files. The second list is smaller and warmer, and you can run different sequences against each. Lead volume and lead quality stop being a tradeoff.
Vercel Analytics, while I was in there
The Vercel project was nagging me to install @vercel/analytics. One import in src/app/layout.tsx, one <Analytics /> component before </body>. No visual change to the site. The Visitors and Page Views counters on the Vercel dashboard start moving on the next deploy.