How to Integrate Lovable with Campaign Monitor

Gather the two key values you need from Campaign Monitor before building the integration: the API key and the subscriber list ID. To get your API key: log in to Campaign Monitor and click your account name in the top-right corner. Go to Account Settings, then look for the 'API keys' section (sometimes listed under 'Developer' or 'Integrations' depending on your plan level). Click 'Generate API key' or copy an existing key. Campaign Monitor API keys are long alphanumeric strings. This key goes in the HTTP Basic auth username field — the password can be literally any string (Campaign Monitor ignores it). To find your list ID: in Campaign Monitor, navigate to Lists & subscribers. Click on the list you want to use. Look at the browser URL when you are on the list overview page — the list ID is the long alphanumeric string in the URL path. It looks like a 30-40 character string mixing letters and numbers. Copy this entire string — it is your list ID. Optionally, if you have custom fields on your list (or want to add them): go to your list → Settings → Custom fields. Note the exact names of any custom fields you have configured. Custom field names are case-sensitive in the Campaign Monitor API, and using the wrong case in your API calls results in the custom field being silently ignored. Have both your API key and list ID ready before moving to the next step.

Store your Campaign Monitor credentials in Lovable's Cloud Secrets panel. Navigate to your Lovable project and click the '+' icon at the top of the editor to open the Cloud panel. Click the 'Secrets' tab and add the following secrets. First secret — Name: CAMPAIGN_MONITOR_API_KEY, Value: your full Campaign Monitor API key. Campaign Monitor uses HTTP Basic auth where the API key is the username and any non-empty string is the password. The Edge Function constructs the auth header by base64-encoding 'api-key:x' where 'api-key' is replaced with your actual key and 'x' is an arbitrary password string. Second secret — Name: CAMPAIGN_MONITOR_LIST_ID, Value: the full list ID copied from the Campaign Monitor list URL. This is a long alphanumeric string — make sure to include the complete value. After saving both secrets, the Edge Function will have everything it needs to authenticate and add subscribers to your Campaign Monitor list. The HTTP Basic auth pattern for Campaign Monitor is unusual — unlike most APIs, the password portion of the Basic auth credentials is completely ignored. Only the API key (in the username position) matters for authentication.

Create the Edge Function that manages subscribers in Campaign Monitor. The Campaign Monitor API v3.3 uses a REST-style endpoint where the list ID is embedded in the URL path: POST https://api.createsend.com/api/v3.3/subscribers/{listID}.json. The subscriber payload for new signups includes: EmailAddress (required), Name (optional), CustomFields (optional array of { Key, Value } objects), and Resubscribe (boolean — when true, if the email is unsubscribed in Campaign Monitor, the API will resubscribe them). Setting Resubscribe to true is the appropriate default for opt-in forms where the user has explicitly chosen to sign up again. The API uses HTTP Basic auth with the base64-encoded combination of your API key and a placeholder password. In Deno, the btoa() function handles the base64 encoding. The Authorization header format is 'Basic base64(api_key:x)'. Campaign Monitor returns 201 Created for successful new subscriber additions, and 200 for resubscriptions or existing subscriber updates. The response body for successful requests is just a string with the subscriber's email address. Error responses return JSON with Code and Message fields. The function below handles subscriber creation with optional custom fields and graceful handling of the 'already subscribed' case.

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, name = '', customFields = [] } = await req.json()
15
16    const apiKey = Deno.env.get('CAMPAIGN_MONITOR_API_KEY')
17    const listId = Deno.env.get('CAMPAIGN_MONITOR_LIST_ID')
18
19    if (!apiKey || !listId) {
20      throw new Error('Missing required secrets: CAMPAIGN_MONITOR_API_KEY and CAMPAIGN_MONITOR_LIST_ID')
21    }
22    if (!email || !email.includes('@')) {
23      return new Response(
24        JSON.stringify({ error: 'A valid email address is required' }),
25        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
26      )
27    }
28
29    // Campaign Monitor uses HTTP Basic auth: base64(apiKey:x)
30    const authHeader = 'Basic ' + btoa(`${apiKey}:x`)
31
32    const payload: Record<string, unknown> = {
33      EmailAddress: email,
34      Name: name,
35      Resubscribe: true,
36      ConsentToTrack: 'Yes',
37    }
38
39    if (customFields.length > 0) {
40      payload.CustomFields = customFields
41    }
42
43    const response = await fetch(
44      `https://api.createsend.com/api/v3.3/subscribers/${listId}.json`,
45      {
46        method: 'POST',
47        headers: {
48          Authorization: authHeader,
49          'Content-Type': 'application/json',
50        },
51        body: JSON.stringify(payload),
52      }
53    )
54
55    if (!response.ok) {
56      const errorData = await response.json()
57      throw new Error(`Campaign Monitor API error ${response.status}: ${errorData.Message || JSON.stringify(errorData)}`)
58    }
59
60    return new Response(
61      JSON.stringify({ success: true, message: 'Subscriber added successfully' }),
62      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
63    )
64  } catch (error) {
65    return new Response(
66      JSON.stringify({ error: error.message }),
67      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
68    )
69  }
70})

With the Edge Function deployed, build the subscriber signup form in your Lovable app and connect it to the Edge Function using supabase.functions.invoke(). Campaign Monitor is frequently used by brands and agencies where form aesthetics matter as much as functionality. Your Lovable signup form should reflect the same design quality that Campaign Monitor brings to email — use shadcn/ui components, Tailwind spacing, and a minimal, on-brand layout. The form should feel like a natural extension of the email campaigns subscribers will receive. Beyond the basic email and name fields, consider adding a campaign source indicator. When you know where a subscriber came from — a specific landing page, a blog post, a referral source — you can pass this as a custom field to Campaign Monitor and use it for segmentation in future campaigns. The custom field name must exactly match a field configured in your Campaign Monitor list settings. After submission, show a clear success state that sets expectations: tell subscribers what they will receive and when. For a design-focused brand, this confirmation message is also an opportunity to reinforce your brand voice and values — keep it on-brand rather than a generic 'You are subscribed!' message.

1import { useState } from 'react'
2import { supabase } from '@/lib/supabase'
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { Label } from '@/components/ui/label'
6import { toast } from '@/components/ui/use-toast'
7
8export const CMSignupForm = () => {
9  const [email, setEmail] = useState('')
10  const [name, setName] = useState('')
11  const [loading, setLoading] = useState(false)
12  const [subscribed, setSubscribed] = useState(false)
13
14  const handleSubmit = async (e: React.FormEvent) => {
15    e.preventDefault()
16    setLoading(true)
17    try {
18      const { error } = await supabase.functions.invoke('campaign-monitor-subscribe', {
19        body: {
20          email,
21          name,
22          customFields: [{ Key: 'SignupSource', Value: 'homepage' }],
23        },
24      })
25      if (error) throw error
26      setSubscribed(true)
27    } catch (err) {
28      toast({
29        title: 'Something went wrong',
30        description: 'Please try again or contact us directly.',
31        variant: 'destructive',
32      })
33    } finally {
34      setLoading(false)
35    }
36  }
37
38  if (subscribed) {
39    return (
40      <div className="py-8 text-center space-y-2">
41        <p className="font-semibold text-lg">You're on the list.</p>
42        <p className="text-muted-foreground text-sm">Expect beautiful things in your inbox soon.</p>
43      </div>
44    )
45  }
46
47  return (
48    <form onSubmit={handleSubmit} className="space-y-4 max-w-sm">
49      <div>
50        <Label htmlFor="name">Name</Label>
51        <Input id="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
52      </div>
53      <div>
54        <Label htmlFor="email">Email *</Label>
55        <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required />
56      </div>
57      <Button type="submit" disabled={loading} className="w-full">
58        {loading ? 'Subscribing...' : 'Subscribe'}
59      </Button>
60    </form>
61  )
62}