How to Integrate Bolt.new with Constant Contact

Before writing any code, you need to register a developer application in Constant Contact's developer portal. This creates the OAuth credentials (client ID and secret) your Bolt.new app will use to authenticate with the Constant Contact API. Go to developer.constantcontact.com and sign in with your Constant Contact account. Click 'My Applications' and then 'New Application.' Give your app a name (for example, 'My Bolt Marketing App') and a brief description. The most important field is the Redirect URI — this is where Constant Contact will redirect the user after they authorize your app. Since Bolt's WebContainer runs in a browser sandbox without a stable public URL, you must use your deployed site's URL here: for example, https://your-app.netlify.app/api/auth/callback/constant-contact. You cannot use localhost or the Bolt preview URL as a redirect URI. After creating the app, Constant Contact shows you an API Key (this is your client ID) and a Client Secret. Copy both values. The client ID is safe to use in slightly more visible places, but the client secret must be kept server-side only and stored in .env as CONSTANT_CONTACT_CLIENT_SECRET. Constant Contact's OAuth 2.0 flow works like standard OAuth: your app redirects the user to Constant Contact's authorization URL, the user logs in and grants permission, Constant Contact redirects back to your redirect URI with an authorization code, and your app exchanges the code for an access token. The access token is then used as a Bearer token in all API calls. Access tokens have a long expiration, and Constant Contact also provides a refresh token for obtaining new access tokens without re-authorizing. For Bolt.new integrations where you are the only user (a backend integration for your own account), you can also use the Constant Contact Authorization Code Flow manually: open the authorization URL in a browser, authorize, capture the code from the redirect URL, and exchange it for an access token in a one-time script. This avoids building a full OAuth UI in your app.

1# .env
2# Constant Contact developer app credentials
3# Get from developer.constantcontact.com → My Applications
4CONSTANT_CONTACT_CLIENT_ID=your_client_id_here
5CONSTANT_CONTACT_CLIENT_SECRET=your_client_secret_here
6
7# Access token obtained after completing OAuth flow
8# Required for all API calls — server-side only, never NEXT_PUBLIC_
9CONSTANT_CONTACT_ACCESS_TOKEN=your_access_token_here
10
11# Constant Contact list ID to add new subscribers to
12# Find in Constant Contact → Contacts → Lists → click a list → copy ID from URL
13CONSTANT_CONTACT_LIST_ID=your_list_id_here

With credentials in place, scaffold the Constant Contact API service layer. Create a utility module at lib/constant-contact.ts that handles authentication headers and wraps the most commonly used v3 API endpoints. Then create Next.js API routes that the React frontend calls to add subscribers and manage contact lists. The Constant Contact v3 API base URL is https://api.cc.email/v3. Authentication uses a Bearer token in the Authorization header — the access token you obtained via OAuth. The primary endpoints for subscriber management are: GET /contact_lists (retrieve all lists with their IDs and names), POST /contacts (create or update a contact, optionally adding them to lists), GET /contacts (search contacts by email), and GET /contact_lists/{list_id}/contacts (list members of a specific list). The POST /contacts endpoint supports an important feature called 'create_or_update' via the update_source field. Setting update_source to 'Account' with an existing email address will update the contact rather than returning a duplicate error — critical for form-based subscriber capture where the same user might submit multiple times. Paste the Bolt prompt below to generate the API service and subscriber route. After generation, verify that lib/constant-contact.ts reads CONSTANT_CONTACT_ACCESS_TOKEN from process.env and that no token value appears in any client-side file. The subscriber form component should call /api/constant-contact/subscribe rather than calling the Constant Contact API directly — direct client-side calls expose your access token in browser network requests. One important note about the WebContainer development environment: outbound HTTP calls to api.cc.email work fine in Bolt's preview. You can test the subscriber capture form in development and see contacts appear in your Constant Contact account in real time. The OAuth callback flow, however, requires the deployed site.

1// lib/constant-contact.ts
2const CC_BASE = 'https://api.cc.email/v3';
3
4async function ccFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
5  const token = process.env.CONSTANT_CONTACT_ACCESS_TOKEN;
6  if (!token) throw new Error('CONSTANT_CONTACT_ACCESS_TOKEN not configured');
7
8  const res = await fetch(`${CC_BASE}${endpoint}`, {
9    ...options,
10    headers: {
11      Authorization: `Bearer ${token}`,
12      'Content-Type': 'application/json',
13      ...options.headers,
14    },
15  });
16
17  if (!res.ok) {
18    const error = await res.json().catch(() => ({ message: res.statusText }));
19    throw Object.assign(new Error(error.error_message ?? 'Constant Contact API error'), {
20      status: res.status,
21      body: error,
22    });
23  }
24
25  return res.json();
26}
27
28export interface CCContactPayload {
29  email_address: { address: string; permission_to_send: string };
30  first_name?: string;
31  last_name?: string;
32  list_memberships?: string[];
33  update_source?: string;
34}
35
36export async function addSubscriber(
37  email: string,
38  firstName: string,
39  lastName: string,
40  listId?: string
41) {
42  const payload: CCContactPayload = {
43    email_address: { address: email, permission_to_send: 'implicit' },
44    first_name: firstName,
45    last_name: lastName,
46    update_source: 'Account',
47  };
48
49  const targetList = listId ?? process.env.CONSTANT_CONTACT_LIST_ID;
50  if (targetList) {
51    payload.list_memberships = [targetList];
52  }
53
54  return ccFetch('/contacts', { method: 'POST', body: JSON.stringify(payload) });
55}
56
57export async function getLists() {
58  return ccFetch('/contact_lists?include_count=true&status=ACTIVE');
59}
60
61export async function getCampaigns(limit = 10) {
62  return ccFetch(`/emails?limit=${limit}&status=SENT`);
63}

For applications where users will authenticate with their own Constant Contact accounts (rather than using your own token), you need a full OAuth 2.0 implementation with an authorization callback route. This step is also required if you need to refresh expired access tokens programmatically. The OAuth flow has four steps. First, your app constructs an authorization URL: https://authz.constantcontact.com/oauth2/default/v1/authorize?response_type=code&client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&scope=contact_data+campaign_data. The scope parameter controls what permissions you're requesting — contact_data gives access to contacts and lists, campaign_data gives access to campaigns and analytics. Second, the user is redirected to this URL and logs into their Constant Contact account. Third, after authorization, Constant Contact redirects back to your redirect URI with a code query parameter (for example: https://your-app.netlify.app/api/auth/callback/constant-contact?code=ABC123). Fourth, your callback route makes a server-side POST request to Constant Contact's token endpoint to exchange the code for access and refresh tokens. This callback must be handled by a real server — it cannot work in Bolt's WebContainer preview because the preview URL is a dynamic StackBlitz-generated URL that changes between sessions and cannot be registered as a stable redirect URI in the developer portal. Deploy to Netlify or Bolt Cloud first, register the production URL as your redirect URI, and test the OAuth flow on the deployed site. For single-user integrations (connecting your own Constant Contact account to your Bolt app), the simpler approach is to complete the OAuth flow once in a browser, capture the access token, store it in your hosting environment variables, and skip building the callback route entirely. The Constant Contact Developer Portal provides an OAuth Playground for exactly this purpose.

1// app/api/auth/callback/constant-contact/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET(request: Request) {
5  const { searchParams } = new URL(request.url);
6  const code = searchParams.get('code');
7
8  if (!code) {
9    return NextResponse.json({ error: 'Missing authorization code' }, { status: 400 });
10  }
11
12  const clientId = process.env.CONSTANT_CONTACT_CLIENT_ID!;
13  const clientSecret = process.env.CONSTANT_CONTACT_CLIENT_SECRET!;
14  const redirectUri = `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback/constant-contact`;
15
16  // Exchange code for tokens
17  const tokenRes = await fetch(
18    'https://authz.constantcontact.com/oauth2/default/v1/token',
19    {
20      method: 'POST',
21      headers: {
22        Authorization: `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString('base64')}`,
23        'Content-Type': 'application/x-www-form-urlencoded',
24      },
25      body: new URLSearchParams({
26        grant_type: 'authorization_code',
27        code,
28        redirect_uri: redirectUri,
29      }),
30    }
31  );
32
33  if (!tokenRes.ok) {
34    const err = await tokenRes.json();
35    return NextResponse.json({ error: err }, { status: 400 });
36  }
37
38  const tokens = await tokenRes.json();
39  // In production: store tokens in your database or session
40  // For development: log the access token to manually add to .env
41  console.log('Access token:', tokens.access_token);
42
43  return NextResponse.redirect(new URL('/dashboard', request.url));
44}

One of the most valuable things you can build with the Constant Contact API is a campaign performance dashboard that surfaces email analytics without requiring access to the Constant Contact platform. This is useful for clients, team members who need read-only access, or integrating email analytics alongside other business metrics in a unified dashboard. The Constant Contact v3 API provides campaign data through several endpoints. GET /emails returns a paginated list of email campaigns with basic metadata: campaign name, subject line, status (SENT, SCHEDULED, DRAFT), sent date, and unique counts for opens and clicks at the summary level. For deeper analytics on a specific campaign, GET /reports/summary_reports?campaign_ids={id} returns detailed metrics including opens, clicks, bounces, unsubscribes, and forwarding data. Build the dashboard in two layers: a campaign list view showing all sent campaigns with top-line metrics, and a detail view that shows the full analytics report for a selected campaign. The list view should be sortable by sent date, open rate, and click rate to help identify top-performing and underperforming campaigns. For displaying analytics data, Recharts is the recommended charting library for Bolt-generated Next.js apps. A bar chart comparing open rates across recent campaigns provides immediate visual context. Color-code open rate bars above 25% as green (industry average) and below as orange or red — this immediately highlights campaigns that need attention. API responses are paginated — Constant Contact returns up to 500 campaigns per page with a cursor-based next link for additional pages. For most small business accounts, the first page covers all recent campaigns. Handle the pagination cursor in the API route so the React component can request additional pages if needed.

1// app/api/constant-contact/campaigns/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET(request: Request) {
5  const token = process.env.CONSTANT_CONTACT_ACCESS_TOKEN;
6  if (!token) {
7    return NextResponse.json({ error: 'Constant Contact not configured' }, { status: 500 });
8  }
9
10  const { searchParams } = new URL(request.url);
11  const limit = searchParams.get('limit') ?? '25';
12
13  const res = await fetch(
14    `https://api.cc.email/v3/emails?status=SENT&limit=${limit}`,
15    { headers: { Authorization: `Bearer ${token}` } }
16  );
17
18  if (!res.ok) {
19    return NextResponse.json({ error: 'Failed to fetch campaigns' }, { status: res.status });
20  }
21
22  const data = await res.json();
23
24  const campaigns = (data.campaigns ?? []).map((c: Record<string, unknown>) => ({
25    id: c.campaign_id,
26    name: c.name,
27    subject: (c.campaign_activities as Array<{ subject?: string }>)?.[0]?.subject ?? '',
28    status: c.current_status,
29    sentAt: c.updated_at,
30  }));
31
32  return NextResponse.json({ campaigns, next: data._links?.next?.href ?? null });
33}