How to Integrate Lovable with Mailchimp

Before adding secrets to Lovable, you need to gather three pieces of information from your Mailchimp account: the API key, the server prefix (data center code), and the audience list ID. To get your API key: in Mailchimp, click your profile icon in the top-right corner, then go to Account → Extras → API keys. Click 'Create A Key'. Give it a name like 'Lovable Integration' and click Generate Key. Mailchimp shows the key once — it looks like xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-us14 where the part after the hyphen is your server prefix. Copy the full key. Your server prefix is the data center code at the end of your API key after the last hyphen. Common values are us1, us2, us10, us14, us17, etc. If your key ends in -us14, your server prefix is us14. This determines which API endpoint you will use: https://us14.api.mailchimp.com/3.0/. Using the wrong prefix is one of the most common Mailchimp API errors. To find your audience list ID: in Mailchimp, go to Audience → All contacts → Settings → Audience name and defaults (or Audience → Manage Audience → Settings). Scroll down to find 'Audience ID' — it is a string like abc123def. Copy this value. If you have multiple audiences, make sure you are in the right one. Keep all three values — API key, server prefix, and audience list ID — ready to paste into Lovable's Secrets panel in the next step.

Now store your Mailchimp credentials in Lovable's Cloud Secrets panel. These values will be accessed by your Edge Function via Deno.env.get() and must never appear in your frontend code or chat history. In your Lovable project, click the '+' icon at the top of the editor (next to the Preview label) to open the Cloud panel. Click the 'Secrets' tab. Add the following three secrets one at a time by clicking 'Add new secret' for each: First secret — Name: MAILCHIMP_API_KEY, Value: your full Mailchimp API key including the server suffix (e.g., xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-us14). This is used for API authentication via HTTP Basic auth (the username is any string, the password is the API key). Second secret — Name: MAILCHIMP_SERVER_PREFIX, Value: just the data center code extracted from your API key (e.g., us14 without the hyphen). This is used to construct the base URL. Third secret — Name: MAILCHIMP_LIST_ID, Value: your audience list ID from Mailchimp settings (e.g., abc123def). Storing this as a secret lets you change audiences without code changes. With all three secrets saved, your Edge Function will have everything it needs to authenticate and target the correct Mailchimp audience.

Create the Edge Function that adds subscribers to your Mailchimp audience. The function will accept subscriber data from your frontend, authenticate to Mailchimp using HTTP Basic auth (Mailchimp's API uses username:api_key format with base64 encoding), and call the Mailchimp Marketing API's members endpoint. One critical detail: Mailchimp uses MD5 hashes of lowercase email addresses as subscriber IDs in the API. To check if a subscriber already exists or to update an existing subscriber, you would hash their email. For adding new subscribers, you use the POST /lists/{list_id}/members endpoint directly. The status field controls double opt-in behavior. Use 'pending' for the double opt-in flow (Mailchimp sends a confirmation email before adding the subscriber). Use 'subscribed' to add the subscriber directly without confirmation (appropriate when users have already confirmed their email elsewhere, like via Supabase Auth). The status_if_new field on PATCH requests lets you update existing subscribers without changing their opt-in status. The function below also demonstrates how to pass merge fields (Mailchimp's term for custom subscriber data like first name, last name, or any custom fields you have set up in your audience), and how to assign tags to the new subscriber for segmentation.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const corsHeaders = {
4  'Access-Control-Allow-Origin': '*',
5  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
6}
7
8serve(async (req) => {
9  if (req.method === 'OPTIONS') {
10    return new Response('ok', { headers: corsHeaders })
11  }
12
13  try {
14    const { email, firstName = '', lastName = '', tags = [], status = 'pending' } = await req.json()
15
16    const apiKey = Deno.env.get('MAILCHIMP_API_KEY')
17    const serverPrefix = Deno.env.get('MAILCHIMP_SERVER_PREFIX')
18    const listId = Deno.env.get('MAILCHIMP_LIST_ID')
19
20    if (!apiKey || !serverPrefix || !listId) {
21      throw new Error('Missing Mailchimp secrets: MAILCHIMP_API_KEY, MAILCHIMP_SERVER_PREFIX, MAILCHIMP_LIST_ID')
22    }
23
24    if (!email || !email.includes('@')) {
25      return new Response(
26        JSON.stringify({ error: 'Valid email address is required' }),
27        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
28      )
29    }
30
31    const baseUrl = `https://${serverPrefix}.api.mailchimp.com/3.0`
32    const authHeader = 'Basic ' + btoa(`anystring:${apiKey}`)
33
34    const memberData: Record<string, unknown> = {
35      email_address: email,
36      status,
37      merge_fields: {
38        FNAME: firstName,
39        LNAME: lastName,
40      },
41    }
42
43    if (tags.length > 0) {
44      memberData.tags = tags
45    }
46
47    const response = await fetch(`${baseUrl}/lists/${listId}/members`, {
48      method: 'POST',
49      headers: {
50        Authorization: authHeader,
51        'Content-Type': 'application/json',
52      },
53      body: JSON.stringify(memberData),
54    })
55
56    const data = await response.json()
57
58    // Handle 'Member Exists' gracefully
59    if (!response.ok) {
60      if (data.title === 'Member Exists') {
61        return new Response(
62          JSON.stringify({ success: true, message: 'Already subscribed' }),
63          { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
64        )
65      }
66      throw new Error(`Mailchimp API error: ${data.title || data.detail || response.status}`)
67    }
68
69    return new Response(
70      JSON.stringify({ success: true, id: data.id, status: data.status }),
71      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
72    )
73  } catch (error) {
74    return new Response(
75      JSON.stringify({ error: error.message }),
76      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
77    )
78  }
79})

With the Edge Function deployed, create the user-facing signup form in your Lovable app. The form collects the subscriber's information and calls the Edge Function via supabase.functions.invoke(). A good newsletter signup form includes at minimum an email field, and optionally first name, last name, and any custom segments (e.g., a checkbox for the type of content they want). The form should handle three states: idle (default), loading (while the Edge Function runs), and success (after successful subscription). If the subscriber is already in your list, show a friendly message rather than an error. Consider whether to use double opt-in (status: 'pending') or single opt-in (status: 'subscribed'). Double opt-in is better for list quality and compliance with GDPR and CAN-SPAM — Mailchimp sends a confirmation email, and only confirmed subscribers enter your active list. Single opt-in gives higher signup conversion but may include more invalid or mistyped addresses. For most cases, double opt-in with a clear 'Check your email to confirm' message is the right default. After the form successfully calls the Edge Function, show a clear success state explaining what happens next — for double opt-in, tell users to check their inbox for a confirmation email from Mailchimp.

1import { useState } from 'react'
2import { supabase } from '@/lib/supabase'
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { toast } from '@/components/ui/use-toast'
6
7export const NewsletterSignup = () => {
8  const [email, setEmail] = useState('')
9  const [loading, setLoading] = useState(false)
10  const [subscribed, setSubscribed] = useState(false)
11
12  const handleSubmit = async (e: React.FormEvent) => {
13    e.preventDefault()
14    setLoading(true)
15
16    try {
17      const { data, error } = await supabase.functions.invoke('mailchimp-subscribe', {
18        body: { email, status: 'pending' },
19      })
20
21      if (error) throw error
22
23      if (data?.message === 'Already subscribed') {
24        toast({ title: 'You are already on the list!', description: 'Check your inbox for our latest emails.' })
25      } else {
26        setSubscribed(true)
27      }
28    } catch (err) {
29      toast({
30        title: 'Subscription failed',
31        description: 'Please check your email address and try again.',
32        variant: 'destructive',
33      })
34    } finally {
35      setLoading(false)
36    }
37  }
38
39  if (subscribed) {
40    return (
41      <div className="text-center py-8">
42        <p className="text-lg font-medium">Thanks for subscribing!</p>
43        <p className="text-muted-foreground mt-2">Check your email to confirm your subscription.</p>
44      </div>
45    )
46  }
47
48  return (
49    <form onSubmit={handleSubmit} className="flex gap-2 max-w-md mx-auto">
50      <Input
51        type="email"
52        placeholder="Enter your email"
53        value={email}
54        onChange={(e) => setEmail(e.target.value)}
55        required
56      />
57      <Button type="submit" disabled={loading}>
58        {loading ? 'Subscribing...' : 'Subscribe'}
59      </Button>
60    </form>
61  )
62}