How to Integrate Bolt.new with ConvertKit

1// lib/convertkit.ts
2const API_BASE = 'https://api.convertkit.com/v3';
3
4export interface ConvertKitSubscriber {
5  id: number;
6  first_name: string;
7  email_address: string;
8  state: 'active' | 'inactive' | 'cancelled' | 'bounced' | 'complained';
9  created_at: string;
10  fields: Record<string, string>;
11}
12
13export interface SubscribeResult {
14  subscription: {
15    id: number;
16    state: string;
17    created_at: string;
18    source: string;
19    referrer: string | null;
20    subscribable_id: number;
21    subscribable_type: string;
22    subscriber: ConvertKitSubscriber;
23  };
24}
25
26export async function subscribeToForm(
27  email: string,
28  firstName: string,
29  formId?: string
30): Promise<SubscribeResult> {
31  const apiKey = process.env.CONVERTKIT_API_KEY;
32  const targetFormId = formId || process.env.CONVERTKIT_FORM_ID;
33  if (!apiKey) throw new Error('CONVERTKIT_API_KEY is not set');
34  if (!targetFormId) throw new Error('No form ID provided');
35
36  const response = await fetch(`${API_BASE}/forms/${targetFormId}/subscribe`, {
37    method: 'POST',
38    headers: { 'Content-Type': 'application/json' },
39    body: JSON.stringify({
40      api_key: apiKey,
41      email,
42      first_name: firstName,
43    }),
44  });
45
46  const data = await response.json();
47  if (!response.ok) throw new Error(data.message || 'ConvertKit subscribe failed');
48  return data;
49}
50
51export async function addTagToSubscriber(
52  email: string,
53  tagId: string
54): Promise<void> {
55  const apiKey = process.env.CONVERTKIT_API_KEY;
56  if (!apiKey) throw new Error('CONVERTKIT_API_KEY is not set');
57
58  const response = await fetch(`${API_BASE}/tags/${tagId}/subscribe`, {
59    method: 'POST',
60    headers: { 'Content-Type': 'application/json' },
61    body: JSON.stringify({ api_key: apiKey, email }),
62  });
63
64  const data = await response.json();
65  if (!response.ok) throw new Error(data.message || 'ConvertKit tag failed');
66}
67
68export async function getSubscriberByEmail(
69  email: string
70): Promise<ConvertKitSubscriber | null> {
71  const apiKey = process.env.CONVERTKIT_API_KEY;
72  if (!apiKey) throw new Error('CONVERTKIT_API_KEY is not set');
73
74  const url = `${API_BASE}/subscribers?api_secret=${apiKey}&email_address=${encodeURIComponent(email)}`;
75  const response = await fetch(url);
76  const data = await response.json();
77
78  if (!response.ok) throw new Error(data.message || 'ConvertKit fetch failed');
79  return data.subscribers?.[0] || null;
80}

1// src/components/ConvertKitForm.tsx
2'use client';
3import { useEffect, useRef } from 'react';
4
5interface ConvertKitFormProps {
6  formId?: string;
7  className?: string;
8  onSuccess?: () => void;
9}
10
11export function ConvertKitForm({ formId, className = '' }: ConvertKitFormProps) {
12  const targetFormId = formId || process.env.NEXT_PUBLIC_CONVERTKIT_FORM_ID;
13  const containerRef = useRef<HTMLDivElement>(null);
14
15  useEffect(() => {
16    if (!targetFormId) {
17      console.warn('ConvertKitForm: No form ID provided');
18      return;
19    }
20
21    const scriptId = `convertkit-form-${targetFormId}`;
22
23    // Remove existing form content before re-rendering
24    if (containerRef.current) {
25      containerRef.current.innerHTML = `<div data-uid="${targetFormId}"></div>`;
26    }
27
28    // Avoid loading the script twice
29    if (document.getElementById(scriptId)) {
30      // Re-trigger form rendering by removing and re-adding the script
31      const existingScript = document.getElementById(scriptId);
32      existingScript?.remove();
33    }
34
35    const script = document.createElement('script');
36    script.id = scriptId;
37    script.src = `https://f.convertkit.com/${targetFormId}/index.js`;
38    script.async = true;
39    document.body.appendChild(script);
40
41    return () => {
42      const scriptEl = document.getElementById(scriptId);
43      scriptEl?.remove();
44    };
45  }, [targetFormId]);
46
47  if (!targetFormId) {
48    return (
49      <div className={`p-4 border border-dashed border-gray-300 rounded text-gray-500 text-sm ${className}`}>
50        Add NEXT_PUBLIC_CONVERTKIT_FORM_ID to your .env file
51      </div>
52    );
53  }
54
55  return (
56    <div className={className} ref={containerRef}>
57      <div data-uid={targetFormId}></div>
58    </div>
59  );
60}

1// app/api/convertkit/subscribe/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { subscribeToForm, addTagToSubscriber } from '@/lib/convertkit';
4
5const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
6
7// Map tag names to ConvertKit tag IDs from environment variables
8function getTagId(tagName: string): string | null {
9  const envKey = `CONVERTKIT_TAG_${tagName.toUpperCase().replace(/-/g, '_')}_ID`;
10  return process.env[envKey] || null;
11}
12
13export async function POST(request: NextRequest) {
14  const body = await request.json();
15  const { email, firstName = '', tag } = body;
16
17  if (!email || !emailRegex.test(email)) {
18    return NextResponse.json({ error: 'Valid email address is required' }, { status: 400 });
19  }
20
21  try {
22    const result = await subscribeToForm(email, firstName);
23    const subscriberId = result.subscription?.subscriber?.id;
24
25    // Add tag if provided
26    if (tag && subscriberId) {
27      const tagId = getTagId(tag);
28      if (tagId) {
29        try {
30          await addTagToSubscriber(email, tagId);
31        } catch (tagError) {
32          // Log but don't fail the subscription for a tag error
33          console.error('ConvertKit tag error:', tagError);
34        }
35      }
36    }
37
38    return NextResponse.json({
39      success: true,
40      subscriberId,
41      state: result.subscription?.state,
42      requiresConfirmation: result.subscription?.state === 'inactive',
43    });
44  } catch (error) {
45    console.error('ConvertKit subscribe error:', error);
46    return NextResponse.json(
47      { error: 'Failed to subscribe. Please try again.' },
48      { status: 500 }
49    );
50  }
51}

1// app/api/convertkit/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4interface ConvertKitWebhookEvent {
5  type: string;
6  initiator: string;
7  subscriber: {
8    id: number;
9    first_name: string;
10    email_address: string;
11    state: string;
12    tags: Array<{ id: number; name: string; created_at: string }>;
13  };
14  tag?: { id: number; name: string };
15}
16
17export async function POST(request: NextRequest) {
18  const body = await request.text();
19
20  let event: ConvertKitWebhookEvent;
21  try {
22    event = JSON.parse(body);
23  } catch {
24    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
25  }
26
27  const { type, subscriber, tag } = event;
28  const email = subscriber?.email_address;
29  const name = subscriber?.first_name;
30
31  switch (type) {
32    case 'subscriber.subscriber_activate':
33      console.log(`ConvertKit: New confirmed subscriber — ${name} <${email}>`);
34      // TODO: Create user record in Supabase, send welcome email, etc.
35      break;
36
37    case 'subscriber.subscriber_unsubscribe':
38      console.log(`ConvertKit: Unsubscribe — ${email}`);
39      // TODO: Update subscription status in your database
40      break;
41
42    case 'subscriber.tag_add':
43      console.log(`ConvertKit: Tag '${tag?.name}' added to ${email}`);
44      // TODO: Trigger relevant action based on tag (e.g., grant course access)
45      break;
46
47    case 'subscriber.tag_remove':
48      console.log(`ConvertKit: Tag '${tag?.name}' removed from ${email}`);
49      break;
50
51    default:
52      console.log(`ConvertKit webhook: unhandled event type '${type}'`);
53  }
54
55  // Always return 200 — ConvertKit retries failed webhooks
56  return NextResponse.json({ received: true });
57}