How to Integrate Bolt.new with Campaign Monitor

Campaign Monitor uses HTTP Basic authentication with the API key as the username and any non-empty string as the password — the convention is to use 'x' as the password, but Campaign Monitor accepts any value. The authentication is encoded as Base64 of 'API_KEY:x' and sent in the Authorization header. To get your API key, log into Campaign Monitor and click your account name or avatar in the top-right corner. Select 'Account Settings' from the dropdown. Navigate to the 'API keys' section. If no API key exists, click 'Generate API key.' Copy the key — it is a 40-character hexadecimal string. In Node.js, construct the auth header as: Buffer.from(`${apiKey}:x`).toString('base64'). The full Authorization header is: Authorization: Basic {base64string}. This pattern is simpler than Insightly's API (which uses an empty password) because Campaign Monitor explicitly accepts 'x' as the placeholder password. You also need your Campaign Monitor Client ID for endpoints that manage campaigns. Find it in Account Settings → Clients, or look at the URL when you are viewing a client in the Campaign Monitor UI — the numeric-looking ID in the URL path is the client ID. This is different from your API key and specific to the client (brand) you are managing. For subscriber list management, each list has its own ID. Find it in Campaign Monitor by navigating to a list and looking at the URL, or via the API: GET /clients/{clientId}/lists.json returns all lists with their IDs and names. Store the API key as CAMPAIGN_MONITOR_API_KEY in .env (server-side, no NEXT_PUBLIC_ prefix). Store the client ID as CAMPAIGN_MONITOR_CLIENT_ID and your primary list ID as CAMPAIGN_MONITOR_LIST_ID. All three are needed for the common operations covered in this guide.

1# .env
2# Campaign Monitor API key — server-side only, never NEXT_PUBLIC_
3# Get from Campaign Monitor: account avatar → Account Settings → API keys
4CAMPAIGN_MONITOR_API_KEY=your_40_char_hex_key_here
5
6# Campaign Monitor Client ID — numeric-looking string for the brand/client
7# Find in Account Settings → Clients, or in the URL when viewing a client
8CAMPAIGN_MONITOR_CLIENT_ID=your_client_id_here
9
10# Subscriber list ID for signup forms
11# Find in Campaign Monitor → Lists → click a list → copy ID from URL
12CAMPAIGN_MONITOR_LIST_ID=your_list_id_here

Create the Campaign Monitor API service module and Next.js API routes for subscriber management. Campaign Monitor's API base URL is https://api.createsend.com/api/v3.3/ for the current version. All endpoints follow RESTful conventions with JSON responses. The primary subscriber endpoints are: POST /subscribers/{listId}.json (add or re-subscribe a subscriber — specify Resubscribe: true to re-add previously unsubscribed contacts), GET /subscribers/{listId}.json?email={email} (find a specific subscriber by email), PUT /subscribers/{listId}.json (update a subscriber's details), POST /subscribers/{listId}/unsubscribe.json (unsubscribe a contact), and GET /lists/{listId}/active.json (paginated list of active subscribers). When adding a subscriber, the required fields are EmailAddress and Name. Optional fields include Resubscribe (boolean — whether to re-add unsubscribed contacts), RestartSubscriptionBasedAutoresponders (boolean — whether to trigger welcome automation), and CustomFields (array of {Key, Value} objects for custom subscriber data you have defined in the list). Campaign Monitor returns HTTP 200 for successful subscriber operations regardless of whether the subscriber was created or updated — there is no 201 Created vs 200 OK distinction. A 400 response indicates validation errors with a descriptive error Code and Message in the response body. Common 400 codes: 1 (invalid email address), 203 (list is at capacity), 210 (email in suppression list). Build the service module with typed helper functions and verify the subscriber endpoint in Bolt's preview. Outbound calls to api.createsend.com work in the WebContainer since they use standard HTTPS.

1// lib/campaign-monitor.ts
2const CM_BASE = 'https://api.createsend.com/api/v3.3';
3
4function getCMAuth(): string {
5  const key = process.env.CAMPAIGN_MONITOR_API_KEY;
6  if (!key) throw new Error('CAMPAIGN_MONITOR_API_KEY not configured');
7  // Campaign Monitor Basic auth: Base64 of 'api_key:x'
8  return Buffer.from(`${key}:x`).toString('base64');
9}
10
11async function cmFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
12  const res = await fetch(`${CM_BASE}${endpoint}`, {
13    ...options,
14    headers: {
15      Authorization: `Basic ${getCMAuth()}`,
16      'Content-Type': 'application/json',
17      ...options.headers,
18    },
19  });
20
21  if (!res.ok) {
22    const body = await res.json().catch(() => ({ Message: res.statusText }));
23    throw Object.assign(new Error(body.Message ?? 'Campaign Monitor API error'), {
24      status: res.status,
25      code: body.Code,
26      body,
27    });
28  }
29
30  return res.json();
31}
32
33export interface CMCustomField {
34  Key: string;
35  Value: string;
36}
37
38export async function addSubscriber(
39  listId: string,
40  email: string,
41  name: string,
42  customFields: CMCustomField[] = [],
43  resubscribe = true
44) {
45  return cmFetch<string>(`/subscribers/${listId}.json`, {
46    method: 'POST',
47    body: JSON.stringify({
48      EmailAddress: email,
49      Name: name,
50      CustomFields: customFields,
51      Resubscribe: resubscribe,
52      RestartSubscriptionBasedAutoresponders: resubscribe,
53    }),
54  });
55}
56
57export async function getLists(clientId?: string) {
58  const id = clientId ?? process.env.CAMPAIGN_MONITOR_CLIENT_ID;
59  if (!id) throw new Error('CAMPAIGN_MONITOR_CLIENT_ID not configured');
60  return cmFetch<Array<{ ListID: string; Name: string }>>(`/clients/${id}/lists.json`);
61}
62
63export async function getActiveSubscribers(listId: string, page = 1, pageSize = 100) {
64  return cmFetch(`/lists/${listId}/active.json?page=${page}&pagesize=${pageSize}`);
65}
66
67export async function getCampaigns(clientId?: string) {
68  const id = clientId ?? process.env.CAMPAIGN_MONITOR_CLIENT_ID;
69  if (!id) throw new Error('CAMPAIGN_MONITOR_CLIENT_ID not configured');
70  return cmFetch<Array<{ CampaignID: string; Name: string; Subject: string; SentDate: string }>(
71    `/clients/${id}/campaigns.json`
72  );
73}

A campaign analytics dashboard that surfaces Campaign Monitor email performance metrics for teams reviewing results without needing direct Campaign Monitor access. Campaign Monitor provides detailed analytics through its reporting API endpoints. Fetch campaigns via GET /clients/{clientId}/campaigns.json, which returns sent campaigns with basic metadata: CampaignID, Name, Subject, SentDate, TotalRecipients, and a WebVersionURL. For each campaign, fetch detailed stats via GET /campaigns/{campaignId}/summary.json, which returns comprehensive analytics: Bounces, Clicks, Opens, Recipients, SpamComplaints, TotalOpened, UniqueOpened, Unsubscribes, WebVersionURL, and WorldviewURL. The most important metrics for the dashboard are: unique open rate (UniqueOpened / Recipients), click-to-open rate (Clicks / UniqueOpened), and unsubscribe rate (Unsubscribes / Recipients). Campaign Monitor returns absolute numbers rather than percentages — calculate rates in your API route or React component. For the Recharts visualization, a horizontal bar chart comparing open rates across recent campaigns works well — horizontal bars accommodate longer campaign names better than vertical bars. Color-code bars above 25% as green (above average for email), 15-24% as yellow (average), and below 15% as red (below average). These benchmarks vary by industry but provide useful relative context. For click tracking data, Campaign Monitor also provides link performance through GET /campaigns/{campaignId}/clicks.json, which shows each link clicked and the unique/total click counts. This is useful for identifying which content resonates with subscribers and can be displayed in a detail view for individual campaigns.

1// app/api/campaign-monitor/campaigns/[id]/summary/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET(
5  _request: Request,
6  { params }: { params: { id: string } }
7) {
8  const apiKey = process.env.CAMPAIGN_MONITOR_API_KEY;
9  if (!apiKey) {
10    return NextResponse.json({ error: 'CAMPAIGN_MONITOR_API_KEY not configured' }, { status: 500 });
11  }
12
13  const auth = Buffer.from(`${apiKey}:x`).toString('base64');
14  const res = await fetch(
15    `https://api.createsend.com/api/v3.3/campaigns/${params.id}/summary.json`,
16    { headers: { Authorization: `Basic ${auth}` } }
17  );
18
19  if (!res.ok) {
20    return NextResponse.json({ error: 'Failed to fetch campaign summary' }, { status: res.status });
21  }
22
23  const data = await res.json();
24  const recipients = data.Recipients ?? 1; // avoid division by zero
25
26  return NextResponse.json({
27    campaignId: params.id,
28    recipients: data.Recipients,
29    uniqueOpened: data.UniqueOpened,
30    totalOpened: data.TotalOpened,
31    clicks: data.Clicks,
32    bounces: data.Bounces,
33    unsubscribes: data.Unsubscribes,
34    spamComplaints: data.SpamComplaints,
35    // Calculated rates as percentages
36    uniqueOpenRate: ((data.UniqueOpened / recipients) * 100).toFixed(1),
37    clickRate: ((data.Clicks / recipients) * 100).toFixed(1),
38    bounceRate: ((data.Bounces / recipients) * 100).toFixed(1),
39    clickToOpenRate: data.UniqueOpened > 0
40      ? ((data.Clicks / data.UniqueOpened) * 100).toFixed(1)
41      : '0.0',
42  });
43}

Complete the integration with subscriber list management features: viewing active subscribers, searching for specific subscribers, updating custom field data, and managing unsubscribes. This is useful for content teams who manage subscriber lists without needing full Campaign Monitor account access. Campaign Monitor's subscriber list endpoints return paginated results. The active subscribers endpoint (GET /lists/{listId}/active.json) supports pagination with page and pagesize parameters, returning results with a TotalNumberOfRecords field and a Results array. The maximum page size is 1000 subscribers per request. Subscriber records include EmailAddress, Name, Date (subscription date), State (Active, Unsubscribed, Bounced, Deleted), and CustomFields (an array of {Key, Value} objects). Custom fields you define in the Campaign Monitor list settings appear in every subscriber record. For unsubscribing a contact: POST /subscribers/{listId}/unsubscribe.json with { 'EmailAddress': email }. For updating subscriber details: PUT /subscribers/{listId}.json with the same payload format as add subscriber (the API uses the email to find the existing record and update it). Building a subscriber search UI requires fetching by email — Campaign Monitor does not have a global search endpoint, so you search within a specific list using GET /subscribers/{listId}.json?email={email}. For multi-list search, make parallel requests to each list and aggregate results.

1// app/api/campaign-monitor/subscribers/route.ts
2import { NextResponse } from 'next/server';
3import { getActiveSubscribers } from '@/lib/campaign-monitor';
4
5export async function GET(request: Request) {
6  const { searchParams } = new URL(request.url);
7  const listId = searchParams.get('listId') ?? process.env.CAMPAIGN_MONITOR_LIST_ID;
8  const email = searchParams.get('email');
9  const page = parseInt(searchParams.get('page') ?? '1');
10
11  if (!listId) {
12    return NextResponse.json({ error: 'listId required' }, { status: 400 });
13  }
14
15  const apiKey = process.env.CAMPAIGN_MONITOR_API_KEY!;
16  const auth = Buffer.from(`${apiKey}:x`).toString('base64');
17
18  try {
19    if (email) {
20      // Search for specific subscriber by email
21      const res = await fetch(
22        `https://api.createsend.com/api/v3.3/subscribers/${listId}.json?email=${encodeURIComponent(email)}`,
23        { headers: { Authorization: `Basic ${auth}` } }
24      );
25      if (!res.ok) return NextResponse.json({ subscriber: null });
26      return NextResponse.json({ subscriber: await res.json() });
27    }
28
29    // Get paginated active subscribers
30    const data = await getActiveSubscribers(listId, page);
31    return NextResponse.json(data);
32  } catch (error) {
33    const message = error instanceof Error ? error.message : 'Unknown error';
34    return NextResponse.json({ error: message }, { status: 500 });
35  }
36}