How to Integrate Lovable with Constant Contact

To use the Constant Contact API, you need both an API key (also called a client ID) and an Access Token. These come from the Constant Contact developer portal at developer.constantcontact.com. Step 1 — Create an application: go to developer.constantcontact.com and sign in with your Constant Contact account. Navigate to My Applications and click 'New Application'. Give your app a name like 'Lovable Integration'. For the redirect URI, enter any valid URL (e.g., https://localhost:3000) — you won't actually use OAuth redirects for this server-side integration. Click Save. Your application now shows a Client ID (this is your API key) and a Client Secret. Step 2 — Generate an Access Token: on the My Applications page, click 'Token Generator' next to your application. Constant Contact will display a token that grants full access to your account. This is your Access Token — it acts as a long-lived Bearer token for server-side API calls. Copy it now; you may not see it again unless you regenerate it. Step 3 — Find your List ID: in your Constant Contact account, go to Contacts → Lists. Click on the list you want to use. The list ID appears in the page URL as a UUID (e.g., d6b0e4a2-xxxx-xxxx-xxxx-xxxxxxxxxxxx). Copy this UUID — you will store it as a secret in the next step. Have your API key (Client ID), Access Token, and List ID ready before proceeding. The Access Token is the most sensitive value — it grants write access to your entire Constant Contact account.

Store your Constant Contact credentials securely 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 messages. 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. You will add three secrets — click 'Add new secret' for each one: First secret — Name: CONSTANT_CONTACT_ACCESS_TOKEN, Value: the Bearer token you generated in the developer portal. This is used in the Authorization header of every API request as 'Bearer {token}'. Second secret — Name: CONSTANT_CONTACT_API_KEY, Value: your application's Client ID from the developer portal. While the current v3 API primarily uses the Access Token for authentication, storing the API key is a good practice for future use and for identifying which application made the request in Constant Contact's audit logs. Third secret — Name: CONSTANT_CONTACT_LIST_ID, Value: the UUID of your contact list (e.g., d6b0e4a2-xxxx-xxxx-xxxx-xxxxxxxxxxxx). Storing the list ID as a secret means you can change which list contacts are added to without modifying your Edge Function code. After saving all three secrets, your Edge Function will have everything it needs to authenticate and interact with the Constant Contact API.

Create the Edge Function that adds contacts to your Constant Contact account. The Constant Contact v3 API uses a single /contacts endpoint for both creating and updating contacts — if an email already exists, the API returns the existing contact. The function accepts contact data from your Lovable frontend, authenticates using the Bearer token, and calls the API. The v3 API contact creation endpoint is POST https://api.cc.email/v3/contacts and requires the contact object to include the email address in the email_address field (as an array of email objects with an address and permission_to_send value), and optionally first_name, last_name, and phone_numbers. To add the contact to a specific list, include the list_memberships array with the list ID UUID. Important: the Constant Contact v3 API returns 201 Created for new contacts and 200 OK with the existing contact for duplicate email addresses. Your Edge Function should handle both status codes as success responses. A 409 Conflict means the contact already exists with a different status that prevents updates — handle this gracefully. The function below also demonstrates proper CORS header handling, which is required because your Lovable frontend makes cross-origin requests to the Edge Function URL.

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 = '', phone = '' } = await req.json()
15
16    const accessToken = Deno.env.get('CONSTANT_CONTACT_ACCESS_TOKEN')
17    const listId = Deno.env.get('CONSTANT_CONTACT_LIST_ID')
18
19    if (!accessToken || !listId) {
20      throw new Error('Missing secrets: CONSTANT_CONTACT_ACCESS_TOKEN and CONSTANT_CONTACT_LIST_ID are required')
21    }
22
23    if (!email || !email.includes('@')) {
24      return new Response(
25        JSON.stringify({ error: 'A valid email address is required' }),
26        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
27      )
28    }
29
30    const contactPayload: Record<string, unknown> = {
31      email_address: {
32        address: email,
33        permission_to_send: 'implicit',
34      },
35      first_name: firstName,
36      last_name: lastName,
37      list_memberships: [listId],
38    }
39
40    if (phone) {
41      contactPayload.phone_numbers = [
42        { phone_number: phone, kind: 'other' },
43      ]
44    }
45
46    const response = await fetch('https://api.cc.email/v3/contacts', {
47      method: 'POST',
48      headers: {
49        Authorization: `Bearer ${accessToken}`,
50        'Content-Type': 'application/json',
51        Accept: 'application/json',
52      },
53      body: JSON.stringify(contactPayload),
54    })
55
56    const data = await response.json()
57
58    if (!response.ok && response.status !== 409) {
59      throw new Error(
60        `Constant Contact API error ${response.status}: ${JSON.stringify(data)}`
61      )
62    }
63
64    const isExisting = response.status === 200 || response.status === 409
65
66    return new Response(
67      JSON.stringify({
68        success: true,
69        contactId: data.contact_id || null,
70        message: isExisting ? 'Contact already exists and has been updated' : 'Contact added successfully',
71      }),
72      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
73    )
74  } catch (error) {
75    return new Response(
76      JSON.stringify({ error: error.message }),
77      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
78    )
79  }
80})

With the Edge Function deployed, create the user-facing form in your Lovable app. The form collects the contact's information and calls the Edge Function using supabase.functions.invoke(). Constant Contact is most commonly used for newsletter signups, event registrations, and customer opt-in forms, so the form design should match your specific use case. A well-designed signup form for Constant Contact integration includes at minimum an email field, and optionally first name, last name, and a consent checkbox. The consent checkbox is important for compliance — it confirms the user is actively opting in to receive marketing emails. Consider adding explicit language like 'I agree to receive email updates from [Your Business Name]. You can unsubscribe at any time.' The form should handle three states: idle (default), loading (while the Edge Function is running), and success (after the contact is added). The success state should tell the user what to expect — for example, 'You're on the list! Look out for our next newsletter.' If the user is already a contact, show a friendly message acknowledging that rather than an error. For small business use cases, consider adding a checkbox for list selection if you have multiple Constant Contact lists — for example, 'Newsletter updates' and 'Promotional offers' as separate options. This requires passing different list IDs to the Edge Function based on the user's selections.

1import { useState } from 'react'
2import { supabase } from '@/lib/supabase'
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { Checkbox } from '@/components/ui/checkbox'
6import { Label } from '@/components/ui/label'
7import { toast } from '@/components/ui/use-toast'
8
9export const ContactSignup = () => {
10  const [email, setEmail] = useState('')
11  const [firstName, setFirstName] = useState('')
12  const [consent, setConsent] = useState(false)
13  const [loading, setLoading] = useState(false)
14  const [success, setSuccess] = useState(false)
15
16  const handleSubmit = async (e: React.FormEvent) => {
17    e.preventDefault()
18    if (!consent) {
19      toast({ title: 'Please check the consent box to continue', variant: 'destructive' })
20      return
21    }
22    setLoading(true)
23    try {
24      const { data, error } = await supabase.functions.invoke('constant-contact-add-contact', {
25        body: { email, firstName },
26      })
27      if (error) throw error
28      if (data?.message?.includes('already exists')) {
29        toast({ title: 'Great news — you are already subscribed!' })
30      } else {
31        setSuccess(true)
32      }
33    } catch (err) {
34      toast({
35        title: 'Something went wrong',
36        description: 'Please check your email and try again.',
37        variant: 'destructive',
38      })
39    } finally {
40      setLoading(false)
41    }
42  }
43
44  if (success) {
45    return (
46      <div className="text-center py-8 space-y-2">
47        <p className="text-lg font-semibold">You're on the list!</p>
48        <p className="text-muted-foreground">We'll be in touch soon.</p>
49      </div>
50    )
51  }
52
53  return (
54    <form onSubmit={handleSubmit} className="space-y-4 max-w-sm">
55      <div>
56        <Label htmlFor="firstName">First Name</Label>
57        <Input id="firstName" value={firstName} onChange={(e) => setFirstName(e.target.value)} placeholder="Your first name" />
58      </div>
59      <div>
60        <Label htmlFor="email">Email *</Label>
61        <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required />
62      </div>
63      <div className="flex items-start gap-2">
64        <Checkbox id="consent" checked={consent} onCheckedChange={(v) => setConsent(!!v)} />
65        <Label htmlFor="consent" className="text-sm text-muted-foreground leading-tight">
66          I agree to receive email updates. Unsubscribe anytime.
67        </Label>
68      </div>
69      <Button type="submit" disabled={loading} className="w-full">
70        {loading ? 'Signing up...' : 'Join the List'}
71      </Button>
72    </form>
73  )
74}