How to Integrate Bolt.new with Mailchimp

1# .env
2MAILCHIMP_API_KEY=your_api_key_ending_in_-us21
3MAILCHIMP_SERVER_PREFIX=us21
4MAILCHIMP_LIST_ID=your_audience_id

1// lib/mailchimp.ts
2import crypto from 'crypto';
3
4export function getMailchimpBase() {
5  return `https://${process.env.MAILCHIMP_SERVER_PREFIX}.api.mailchimp.com/3.0`;
6}
7
8export function getMailchimpAuth() {
9  return Buffer.from(`anystring:${process.env.MAILCHIMP_API_KEY}`).toString('base64');
10}
11
12export function emailToHash(email: string): string {
13  return crypto.createHash('md5').update(email.toLowerCase().trim()).digest('hex');
14}
15
16export async function mailchimpAPI<T>(
17  endpoint: string,
18  options: RequestInit = {}
19): Promise<T> {
20  const url = `${getMailchimpBase()}${endpoint}`;
21  const response = await fetch(url, {
22    ...options,
23    headers: {
24      Authorization: `Basic ${getMailchimpAuth()}`,
25      'Content-Type': 'application/json',
26      ...options.headers,
27    },
28  });
29
30  const data = await response.json();
31  if (!response.ok) {
32    throw new Error(data.detail || data.title || `Mailchimp API error: ${response.status}`);
33  }
34  return data;
35}
36
37// app/api/mailchimp/subscribe/route.ts
38import { NextResponse } from 'next/server';
39import { mailchimpAPI, emailToHash } from '@/lib/mailchimp';
40
41export async function POST(request: Request) {
42  try {
43    const { email, firstName = '', lastName = '' } = await request.json();
44
45    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
46      return NextResponse.json({ error: 'Valid email is required' }, { status: 400 });
47    }
48
49    const emailHash = emailToHash(email);
50    const listId = process.env.MAILCHIMP_LIST_ID!;
51
52    await mailchimpAPI(`/lists/${listId}/members/${emailHash}`, {
53      method: 'PUT',
54      body: JSON.stringify({
55        email_address: email.toLowerCase().trim(),
56        status_if_new: 'subscribed',
57        status: 'subscribed',
58        merge_fields: {
59          FNAME: firstName,
60          LNAME: lastName,
61        },
62      }),
63    });
64
65    return NextResponse.json({ success: true, message: 'Successfully subscribed!' });
66  } catch (error: unknown) {
67    const e = error as { message: string };
68    return NextResponse.json({ error: e.message }, { status: 500 });
69  }
70}

1// components/NewsletterSignup.tsx
2'use client';
3import { useEffect, useRef } from 'react';
4
5export function NewsletterSignup() {
6  const formRef = useRef<HTMLDivElement>(null);
7
8  useEffect(() => {
9    // Mailchimp's embed script modifies the form after load
10    // Using a ref ensures it runs only on the client
11    const script = document.createElement('script');
12    script.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js';
13    script.async = true;
14    if (formRef.current) {
15      formRef.current.appendChild(script);
16    }
17    return () => {
18      if (formRef.current && script.parentNode === formRef.current) {
19        formRef.current.removeChild(script);
20      }
21    };
22  }, []);
23
24  return (
25    <div ref={formRef} className="max-w-md">
26      {/* Replace ACTION_URL with your Mailchimp form action URL from the embed code */}
27      <form
28        action="https://YOURLIST.us21.list-manage.com/subscribe/post?u=XXXXX&id=YYYYY"
29        method="post"
30        className="flex gap-2"
31      >
32        <input
33          type="email"
34          name="EMAIL"
35          placeholder="Your email address"
36          required
37          className="flex-1 px-3 py-2 border rounded-md text-sm"
38        />
39        {/* Anti-spam honeypot field - do not remove */}
40        <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
41          <input type="text" name="b_XXXXX_YYYYY" tabIndex={-1} defaultValue="" />
42        </div>
43        <button
44          type="submit"
45          className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700"
46        >
47          Subscribe
48        </button>
49      </form>
50      <p className="text-xs text-gray-500 mt-2">
51        We respect your privacy. Unsubscribe at any time.
52      </p>
53    </div>
54  );
55}

1// app/api/mailchimp/campaigns/route.ts
2import { NextResponse } from 'next/server';
3import { mailchimpAPI } from '@/lib/mailchimp';
4
5interface MailchimpCampaign {
6  id: string;
7  subject_line: string;
8  send_time: string;
9  emails_sent: number;
10  report_summary: {
11    open_rate: number;
12    click_rate: number;
13    unsubscribes: number;
14  };
15}
16
17interface CampaignsResponse {
18  campaigns: MailchimpCampaign[];
19}
20
21export async function GET() {
22  try {
23    const data = await mailchimpAPI<CampaignsResponse>(
24      '/campaigns?status=sent&count=10&sort_field=send_time&sort_dir=DESC'
25    );
26
27    const campaigns = data.campaigns.map((c) => ({
28      id: c.id,
29      subject: c.subject_line,
30      sentAt: c.send_time,
31      recipients: c.emails_sent,
32      openRate: ((c.report_summary?.open_rate || 0) * 100).toFixed(1) + '%',
33      clickRate: ((c.report_summary?.click_rate || 0) * 100).toFixed(1) + '%',
34      unsubscribes: c.report_summary?.unsubscribes || 0,
35    }));
36
37    return NextResponse.json(campaigns);
38  } catch (error: unknown) {
39    const e = error as { message: string };
40    return NextResponse.json({ error: e.message }, { status: 500 });
41  }
42}