How to Integrate Campaign Monitor with V0

Open V0 at v0.dev and describe the email capture form or subscriber management interface you want to build. Campaign Monitor integrations typically start with a subscriber form — the entry point that adds new contacts to your lists. Be specific with V0 about what data fields you want to collect beyond just the email address. Campaign Monitor supports custom fields on subscribers, so if you want to segment by company size, role, or signup source, those fields should be part of the form and sent along with the subscription request. Tell V0 the API route path (/api/campaign-monitor/subscribe), what the request body should look like, and how success and error states should appear to the user. V0 generates clean React components with Tailwind CSS and shadcn/ui form primitives — the form validation, loading states, and toast notifications are all generated automatically when you describe them. After generating the component, use V0's Git panel to push it to your connected GitHub repository, which triggers an automatic Vercel preview deployment so you can see it live immediately.

Create the Next.js API route that receives subscription requests from your form and calls the Campaign Monitor API to add the subscriber. Campaign Monitor's API uses HTTP Basic Authentication — your API key is the username and any string (conventionally 'x') is the password. To construct the Basic Auth header, combine them as 'apikey:x', encode in Base64, and prefix with 'Basic '. The subscriber creation endpoint is POST https://api.createsend.com/api/v3.3/subscribers/{listId}.json and expects a JSON body with EmailAddress, Name, CustomFields array, and a Resubscribe boolean. Set Resubscribe: true to re-subscribe users who have previously unsubscribed — otherwise the API returns a success response but does not add them back. Campaign Monitor custom fields are passed as an array of objects with Key and Value properties matching the field keys you defined in the list settings. The API returns HTTP 201 on successful creation, HTTP 400 for validation errors, and the error body contains a Code integer and Message string that explain the problem. Common error codes include 205 (subscriber already active on list), which you may want to handle gracefully rather than as an error. Create the file at app/api/campaign-monitor/subscribe/route.ts in your Next.js project.

1// app/api/campaign-monitor/subscribe/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const CM_API_BASE = 'https://api.createsend.com/api/v3.3';
5
6function getBasicAuthHeader(apiKey: string): string {
7  const credentials = Buffer.from(`${apiKey}:x`).toString('base64');
8  return `Basic ${credentials}`;
9}
10
11interface SubscribeRequest {
12  email: string;
13  firstName?: string;
14  companySize?: string;
15  source?: string;
16}
17
18export async function POST(request: NextRequest) {
19  const apiKey = process.env.CAMPAIGN_MONITOR_API_KEY;
20  const listId = process.env.CAMPAIGN_MONITOR_LIST_ID;
21
22  if (!apiKey || !listId) {
23    return NextResponse.json(
24      { error: 'Campaign Monitor is not configured' },
25      { status: 500 }
26    );
27  }
28
29  let body: SubscribeRequest;
30  try {
31    body = await request.json();
32  } catch {
33    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
34  }
35
36  const { email, firstName, companySize, source } = body;
37
38  if (!email) {
39    return NextResponse.json({ error: 'Email is required' }, { status: 400 });
40  }
41
42  const customFields: Array<{ Key: string; Value: string }> = [];
43  if (companySize) customFields.push({ Key: 'CompanySize', Value: companySize });
44  if (source) customFields.push({ Key: 'SignupSource', Value: source });
45
46  const payload = {
47    EmailAddress: email,
48    Name: firstName || '',
49    CustomFields: customFields,
50    Resubscribe: true,
51    ConsentToTrack: 'Yes',
52  };
53
54  try {
55    const response = await fetch(
56      `${CM_API_BASE}/subscribers/${listId}.json`,
57      {
58        method: 'POST',
59        headers: {
60          Authorization: getBasicAuthHeader(apiKey),
61          'Content-Type': 'application/json',
62        },
63        body: JSON.stringify(payload),
64      }
65    );
66
67    if (response.status === 201) {
68      const subscriberId = await response.json();
69      return NextResponse.json({ success: true, subscriberId });
70    }
71
72    const errorData = await response.json();
73    // Code 205 = subscriber already active — treat as success
74    if (errorData.Code === 205) {
75      return NextResponse.json({ success: true, alreadySubscribed: true });
76    }
77
78    return NextResponse.json(
79      { error: errorData.Message || 'Failed to subscribe' },
80      { status: 400 }
81    );
82  } catch (error) {
83    const message = error instanceof Error ? error.message : 'Unknown error';
84    console.error('Campaign Monitor API error:', message);
85    return NextResponse.json(
86      { error: 'Failed to subscribe. Please try again.' },
87      { status: 500 }
88    );
89  }
90}

Before deploying to Vercel, test the integration locally using your .env.local file, then configure the production environment variables. Create or open your .env.local file in the project root (never commit this file — it should already be in .gitignore) and add CAMPAIGN_MONITOR_API_KEY set to your API key from Campaign Monitor's Account Settings → API Keys section, and CAMPAIGN_MONITOR_LIST_ID set to the List ID of the subscriber list you want to add contacts to. To find your List ID, go to Campaign Monitor → Lists & Subscribers → select your list → click Settings — the List ID is shown at the bottom of the settings page in the API section. Run npm run dev locally and test the signup form — submitting with a valid email should add a contact to your Campaign Monitor list. Check the Campaign Monitor interface to confirm the subscriber appeared. If you plan to use custom fields like CompanySize or SignupSource, ensure those custom fields are created in Campaign Monitor first under your list's Custom Fields settings, using the exact Key names referenced in your API route code. Once local testing confirms the integration works, push to GitHub. Open the Vercel Dashboard, navigate to your project, go to Settings → Environment Variables, and add both variables for Production, Preview, and Development scopes. After saving, trigger a redeployment from the Deployments tab.

With environment variables set in Vercel and your code pushed to GitHub, your Vercel deployment automatically rebuilds. After the deployment completes — typically within 60 to 90 seconds — open your deployed URL and test the signup form with a real email address. The subscriber should appear in your Campaign Monitor list within a few seconds. Campaign Monitor's API is synchronous, so if the request succeeds, the subscriber is immediately available in the list. To test error handling, try submitting with an invalid email format (the API returns a validation error) and with an email that is already subscribed (your route should return the alreadySubscribed: true response). For agencies managing multiple client lists, you can extend the integration to accept a listId parameter in the request body and look up the corresponding environment variable — this lets a single API route handle subscriptions across multiple Campaign Monitor lists. For complex integrations with journey automation, segment management, or campaign analytics, RapidDev's team can help configure multi-list architectures and webhook-based event tracking that respond to subscriber lifecycle events like email opens and clicks.