How to Integrate Lovable with Klaviyo

Log in to your Klaviyo account and navigate to Settings → API Keys (found under the account name dropdown in the bottom left of the sidebar, or via Settings → Account → API Keys). You will see two types of keys on this page. The Public API Key (labeled 'Public API Key' or 'Site ID') is a short alphanumeric string — this key is designed to be used in client-side JavaScript and can safely appear in your React component code. It is used for event tracking with Klaviyo's identify and track calls. The Private API Keys section lets you generate server-side keys — click 'Create Private API Key'. Give it a name like 'Lovable Integration' and select the access scopes your integration needs: for list subscription management select Lists - Read Access and Profiles - Write Access; for event tracking you need Events - Write Access; for full profile management select all of the above. Click 'Create'. The Private API Key is shown once — copy it immediately. If you plan to use Klaviyo for SMS in addition to email, note that SMS subscription management uses the same API endpoints but requires Klaviyo SMS to be enabled on your account.

In your Lovable project, open the Cloud tab by clicking '+' next to Preview, then go to the Secrets section. Add one secret: KLAVIYO_PRIVATE_KEY with your Private API Key value. This key must stay server-side — it has access to read and write customer profiles, which is sensitive data. For the Public API Key, you can add it as a Lovable environment variable (which is safe for browser exposure since it is a public key by design) or hardcode it in your React component — either is acceptable. Add VITE_KLAVIYO_PUBLIC_KEY as an environment variable in your project settings (not in Cloud Secrets) with your Public API Key. The VITE_ prefix makes it available in React components as import.meta.env.VITE_KLAVIYO_PUBLIC_KEY. Alternatively, add it directly to the Klaviyo tracking component since it is intentionally public. Lovable's security system correctly identifies KLAVIYO_PRIVATE_KEY as a sensitive credential and stores it with encryption — approximately 1,200 API keys per day are prevented from being hardcoded in application code by Lovable's security layer.

Ask Lovable to create a Supabase Edge Function for Klaviyo operations that require the Private API Key — specifically, profile creation and updates, list subscription management, and event tracking with server-side context. Klaviyo's current API (v3/beta as of 2024) uses JSON:API format at https://a.klaviyo.com/api/. The Authorization header should be 'Klaviyo-API-Key YOUR_PRIVATE_KEY'. Key endpoints include /api/profiles/ for creating or updating profiles, /api/lists/{list_id}/relationships/profiles/ for subscribing profiles to lists, and /api/events/ for server-side event tracking. The Edge Function should accept an 'operation' parameter to route between these endpoints: subscribe (add email to list), update_profile (set custom properties), and track_event (server-side event). Build the appropriate JSON:API request body for each operation and POST to the correct Klaviyo endpoint. Include proper CORS headers and error handling for Klaviyo's error response format.

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 KLAVIYO_API = "https://a.klaviyo.com/api";
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("KLAVIYO_PRIVATE_KEY")!;
17    const headers = {
18      "Authorization": `Klaviyo-API-Key ${apiKey}`,
19      "Content-Type": "application/json",
20      "revision": "2024-10-15",
21    };
22
23    const { operation, email, firstName, lastName, properties, listId, eventName } =
24      await req.json();
25
26    if (operation === "subscribe") {
27      // Create or update profile
28      const profileRes = await fetch(`${KLAVIYO_API}/profiles/`, {
29        method: "POST",
30        headers,
31        body: JSON.stringify({
32          data: {
33            type: "profile",
34            attributes: {
35              email,
36              first_name: firstName || "",
37              last_name: lastName || "",
38              properties: properties || {},
39            },
40          },
41        }),
42      });
43      const profileData = await profileRes.json();
44      const profileId = profileData.data?.id;
45
46      if (listId && profileId) {
47        await fetch(`${KLAVIYO_API}/lists/${listId}/relationships/profiles/`, {
48          method: "POST",
49          headers,
50          body: JSON.stringify({
51            data: [{ type: "profile", id: profileId }],
52          }),
53        });
54      }
55
56      return new Response(JSON.stringify({ success: true, profileId }), {
57        headers: { ...corsHeaders, "Content-Type": "application/json" },
58      });
59    }
60
61    if (operation === "track_event") {
62      const eventRes = await fetch(`${KLAVIYO_API}/events/`, {
63        method: "POST",
64        headers,
65        body: JSON.stringify({
66          data: {
67            type: "event",
68            attributes: {
69              metric: { data: { type: "metric", attributes: { name: eventName } } },
70              profile: { data: { type: "profile", attributes: { email } } },
71              properties: properties || {},
72            },
73          },
74        }),
75      });
76      const ok = eventRes.status === 202;
77      return new Response(JSON.stringify({ success: ok }), {
78        headers: { ...corsHeaders, "Content-Type": "application/json" },
79      });
80    }
81
82    return new Response(JSON.stringify({ error: "Unknown operation" }), {
83      status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" },
84    });
85  } catch (error) {
86    return new Response(
87      JSON.stringify({ error: error.message }),
88      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
89    );
90  }
91});

Ask Lovable to create a reusable EmailSignup React component that captures name and email, calls the klaviyo-api Edge Function to subscribe the user to your Klaviyo list, and shows appropriate success and error states. The component should use Lovable's built-in shadcn/ui Input and Button components for consistent styling. Add client-side validation to ensure the email is properly formatted before submitting. After successful subscription, show a success message explaining that Klaviyo will send a confirmation email if double opt-in is enabled (which is the default and required in many countries). You will need your Klaviyo List ID — find this in Klaviyo by going to Lists → click your list → the list ID appears in the URL and on the list settings page. The List ID is a string like 'abc123' and should be passed as listId in the Edge Function request body. For GDPR compliance, include a clear consent checkbox explaining what the subscriber is signing up for before allowing form submission.

For tracking behavioral events like product views, add-to-cart, and checkout starts, use Klaviyo's client-side track API directly from your React components — this is one of the rare cases where calling an external API directly from the frontend is the correct approach, because Klaviyo's Public API Key is designed for this use. Klaviyo's track endpoint is https://a.klaviyo.com/api/track (legacy v1) or the newer identify and track pattern. For client-side tracking, send a POST to the track endpoint with your Public API Key and event data. Identify the user first by calling the identify endpoint with their email when they log in or submit a form, then subsequent track calls will be attributed to that profile. For the most reliable tracking, identify the user as early as possible (login, signup, email form submit) and then track behavioral events on key pages. Ask Lovable to create a useKlaviyo custom React hook that wraps the identify and track calls with your Public API Key, making it easy to add tracking to any component with one line of code.