How to Integrate Lovable with ConvertKit (Kit)

Log in to your ConvertKit account at app.kit.com (or app.convertkit.com — both work). Click your profile name or account icon in the top right corner, then select 'Settings' from the dropdown menu. In the Settings page, look for the 'Developer' or 'API' section in the left sidebar. On the API page, you will see your API Key displayed — this is a single key used for all API authentication. ConvertKit also shows an API Secret on this page which is required for older v3 API calls that use query parameter authentication; for the newer v4 API, only the API Key is needed as a Bearer token. Copy your API Key. Unlike some platforms, ConvertKit's API Key does not expire unless you manually regenerate it, making it a stable credential. You should also note down the IDs of any ConvertKit forms, tags, or sequences you plan to use — find form IDs in Grow → Landing Pages & Forms → click a form → the ID appears in the URL. Find tag IDs in Subscribers → Tags → click a tag.

Open your Lovable project and click the '+' icon next to the Preview panel to open the Cloud tab. Navigate to the Secrets section in the Cloud panel sidebar. Click 'Add Secret' and enter CONVERTKIT_API_KEY as the secret name, then paste your ConvertKit API Key as the value. This secret is immediately encrypted and accessible only from your Edge Functions via Deno.env.get('CONVERTKIT_API_KEY'). The ConvertKit API Key has full read and write access to your subscriber database — it can create subscribers, update profiles, delete subscribers, and send broadcasts. Never paste it in a Lovable chat message (free plan chat history is publicly visible) or in any React component code. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys daily and uses SOC 2 Type II certified secrets management to protect credentials stored in Cloud Secrets. From this point forward, all ConvertKit API operations must go through your Edge Function, never directly from the browser.

Ask Lovable to create a Supabase Edge Function that handles ConvertKit API operations using the v4 API at https://api.kit.com/v4/. ConvertKit v4 API uses Bearer token authentication — the Authorization header should be 'Bearer YOUR_API_KEY'. The Edge Function should support three primary operations: 'subscribe' to create or update a subscriber and optionally add them to a form or sequence, 'add_tag' to assign a tag to an existing subscriber by their email, and 'get_subscriber' to look up a subscriber's current profile and tags. The v4 API endpoint for creating subscribers is POST /subscribers with a JSON body containing email, first_name, and optionally fields for custom attributes. To add a tag, first find the subscriber's ID via GET /subscribers?email_address={email}, then POST to /tags/{tag_id}/subscribers with the subscriber ID. Handle CORS correctly with the OPTIONS preflight response and include proper error responses when ConvertKit returns non-200 status codes.

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
8const CK_API = "https://api.kit.com/v4";
9
10serve(async (req) => {
11  if (req.method === "OPTIONS") {
12    return new Response("ok", { headers: corsHeaders });
13  }
14
15  try {
16    const apiKey = Deno.env.get("CONVERTKIT_API_KEY")!;
17    const authHeaders = {
18      "Authorization": `Bearer ${apiKey}`,
19      "Content-Type": "application/json",
20    };
21
22    const { operation, email, firstName, tagId, formId, fields } = await req.json();
23
24    if (operation === "subscribe") {
25      const body: Record<string, unknown> = { email_address: email };
26      if (firstName) body.first_name = firstName;
27      if (fields) body.fields = fields;
28
29      const res = await fetch(`${CK_API}/subscribers`, {
30        method: "POST",
31        headers: authHeaders,
32        body: JSON.stringify(body),
33      });
34      const data = await res.json();
35
36      // Optionally subscribe to a form
37      if (formId && data.subscriber?.id) {
38        await fetch(`${CK_API}/forms/${formId}/subscribers`, {
39          method: "POST",
40          headers: authHeaders,
41          body: JSON.stringify({ id: data.subscriber.id }),
42        });
43      }
44
45      return new Response(JSON.stringify(data), {
46        status: res.status,
47        headers: { ...corsHeaders, "Content-Type": "application/json" },
48      });
49    }
50
51    if (operation === "add_tag") {
52      // Find subscriber by email first
53      const searchRes = await fetch(
54        `${CK_API}/subscribers?email_address=${encodeURIComponent(email)}`,
55        { headers: authHeaders }
56      );
57      const searchData = await searchRes.json();
58      const subscriberId = searchData.subscribers?.[0]?.id;
59
60      if (!subscriberId) {
61        return new Response(
62          JSON.stringify({ error: "Subscriber not found" }),
63          { status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
64        );
65      }
66
67      const tagRes = await fetch(`${CK_API}/tags/${tagId}/subscribers`, {
68        method: "POST",
69        headers: authHeaders,
70        body: JSON.stringify({ id: subscriberId }),
71      });
72      const tagData = await tagRes.json();
73
74      return new Response(JSON.stringify(tagData), {
75        headers: { ...corsHeaders, "Content-Type": "application/json" },
76      });
77    }
78
79    if (operation === "get_subscriber") {
80      const res = await fetch(
81        `${CK_API}/subscribers?email_address=${encodeURIComponent(email)}`,
82        { headers: authHeaders }
83      );
84      const data = await res.json();
85      return new Response(JSON.stringify(data.subscribers?.[0] || null), {
86        headers: { ...corsHeaders, "Content-Type": "application/json" },
87      });
88    }
89
90    return new Response(
91      JSON.stringify({ error: "Unknown operation" }),
92      { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
93    );
94  } catch (error) {
95    return new Response(
96      JSON.stringify({ error: error.message }),
97      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
98    );
99  }
100});

Ask Lovable to create a reusable ConvertKitSignup React component that captures subscriber information and calls the Edge Function to add them to ConvertKit. The component should include fields for email (required) and optionally first name for personalized emails, a consent checkbox for GDPR compliance in European markets, loading state during form submission, a clear success message explaining what happens next (confirmation email if double opt-in is enabled in ConvertKit), and error handling with user-friendly messages. When the form submits, call the convertkit-api Edge Function with operation: 'subscribe', the user's email, firstName, and your ConvertKit form ID. ConvertKit form IDs can be found in your ConvertKit dashboard under Grow → Landing Pages & Forms — click a form and look at the URL. Including the form ID triggers ConvertKit's form-based opt-in confirmation and starts any automation sequences connected to that form. The component can be embedded anywhere in your Lovable app: blog post footers, dedicated landing pages, checkout confirmation pages, or as a modal triggered by user actions.

Tags are the foundation of ConvertKit's segmentation and automation system. By assigning tags to subscribers based on their behavior in your Lovable app — downloading a resource, purchasing a product, completing a quiz, visiting a specific page — you can trigger highly targeted automation sequences automatically. After a user action in your app that should trigger a ConvertKit automation, call the Edge Function with operation: 'add_tag' and the relevant tag ID. First create the tag in ConvertKit under Subscribers → Tags → Add Tag, give it a descriptive name like 'Purchased: Design Course', and note the tag ID from the URL. Then configure a ConvertKit automation that triggers When a subscriber is tagged with this tag and sends the appropriate email sequence. In your Lovable app, after the triggering action (Stripe payment success, content download, form completion), call the Edge Function to assign the tag. The automation fires immediately. For subscriber access control — checking if a user has a specific tag to gate content — use the get_subscriber operation to fetch their current tags and check for the required tag ID in the response's tags array.