How to Integrate Klaviyo with V0

Open your V0 project and prompt V0 to create the email marketing touchpoints. For a basic subscription form, describe the fields (email, first name), the submit button behavior, success and error states. For a checkout integration, describe where the marketing opt-in checkbox appears in the purchase flow and how it should interact with the order form submission. Klaviyo works best when it receives rich data — not just an email address, but first name, last name, phone number, location, and any custom properties relevant to your business. Ask V0 to include optional fields for the data Klaviyo can use for personalization. A first name field alone enables 'Hi {first_name}' personalization in welcome emails. For event tracking (purchases, product views), the UI action that triggers the event is usually an existing component — a checkout button, a product card view, a cart update. Ask V0 to add an API call to /api/klaviyo/event after the primary action (order creation) completes, so the event fires in the same user session. V0 will generate the useEffect or onSuccess callback that fires the Klaviyo event tracking call.

Create app/api/klaviyo/route.ts. This route handles POST requests from your subscription form. It calls two Klaviyo API endpoints: first the Profiles API to create or update the customer profile, then the List Subscriptions API to subscribe the profile to a marketing list. The Klaviyo API v2 (2022) uses a resource-based REST structure. To create a profile: POST to https://a.klaviyo.com/api/profiles/ with a JSON body containing a data object with type 'profile' and attributes (email, first_name, last_name, phone_number, and any custom properties). Klaviyo automatically deduplicates profiles by email — if a profile with that email already exists, the API returns the existing profile ID. To add the profile to a list: POST to https://a.klaviyo.com/api/lists/{LIST_ID}/relationships/profiles/ with the profile ID returned from the profile creation call. This triggers Klaviyo's list subscription confirmation flow if double opt-in is enabled for that list. The Authorization header uses your private API key in the format: Klaviyo-API-Key {YOUR_PRIVATE_KEY}. The revision header specifies the API version.

1import { NextRequest, NextResponse } from 'next/server';
2
3const KLAVIYO_API_BASE = 'https://a.klaviyo.com/api';
4const KLAVIYO_REVISION = '2024-02-15';
5
6export async function POST(request: NextRequest) {
7  const body = await request.json();
8  const { email, firstName, lastName, properties } = body;
9
10  if (!email) {
11    return NextResponse.json({ error: 'Email is required' }, { status: 400 });
12  }
13
14  const privateKey = process.env.KLAVIYO_PRIVATE_KEY;
15  const listId = process.env.KLAVIYO_LIST_ID;
16
17  if (!privateKey || !listId) {
18    return NextResponse.json(
19      { error: 'Klaviyo credentials not configured' },
20      { status: 500 }
21    );
22  }
23
24  const headers = {
25    Authorization: `Klaviyo-API-Key ${privateKey}`,
26    'Content-Type': 'application/json',
27    revision: KLAVIYO_REVISION,
28  };
29
30  try {
31    // Step 1: Create or update the profile
32    const profileRes = await fetch(`${KLAVIYO_API_BASE}/profiles/`, {
33      method: 'POST',
34      headers,
35      body: JSON.stringify({
36        data: {
37          type: 'profile',
38          attributes: {
39            email,
40            first_name: firstName || '',
41            last_name: lastName || '',
42            properties: properties || {},
43          },
44        },
45      }),
46    });
47
48    let profileId: string;
49    if (profileRes.status === 409) {
50      // Profile already exists — get ID from the conflict response
51      const conflictData = await profileRes.json();
52      profileId = conflictData.errors[0].meta.duplicate_profile_id;
53    } else if (profileRes.ok) {
54      const profileData = await profileRes.json();
55      profileId = profileData.data.id;
56    } else {
57      return NextResponse.json(
58        { error: 'Failed to create Klaviyo profile' },
59        { status: 500 }
60      );
61    }
62
63    // Step 2: Subscribe to list
64    const subscribeRes = await fetch(
65      `${KLAVIYO_API_BASE}/lists/${listId}/relationships/profiles/`,
66      {
67        method: 'POST',
68        headers,
69        body: JSON.stringify({
70          data: [{ type: 'profile', id: profileId }],
71        }),
72      }
73    );
74
75    if (!subscribeRes.ok && subscribeRes.status !== 204) {
76      return NextResponse.json(
77        { error: 'Failed to subscribe to list' },
78        { status: 500 }
79      );
80    }
81
82    return NextResponse.json({ success: true, profileId });
83  } catch (error) {
84    console.error('Klaviyo API error:', error);
85    return NextResponse.json(
86      { error: 'Failed to process subscription' },
87      { status: 500 }
88    );
89  }
90}

Create app/api/klaviyo/events/route.ts for tracking custom events. The Klaviyo Events API records customer behavior — purchases, product views, cart additions, form submissions — that power Klaviyo's automation flows and segmentation. To track an event, POST to https://a.klaviyo.com/api/events/ with a data object containing the event type, metric name (e.g., 'Placed Order', 'Viewed Product', 'Added to Cart'), profile attributes identifying the customer (email is required), and properties describing the event (order total, product name, product ID, etc.). For e-commerce events, Klaviyo has recommended naming conventions: 'Placed Order', 'Ordered Product', 'Viewed Product', 'Added to Cart', 'Checkout Started'. Using these standard names enables Klaviyo's pre-built flow templates to work automatically with your data. The 'Placed Order' event should include a value property (the order total) for revenue attribution — this is how Klaviyo tracks which emails drive actual revenue. Event tracking is fire-and-forget: your API route sends the event to Klaviyo and returns success without waiting for Klaviyo to process the automation trigger. The event appears in the customer's Klaviyo profile history and triggers any matching flows within seconds.

1import { NextRequest, NextResponse } from 'next/server';
2
3const KLAVIYO_API_BASE = 'https://a.klaviyo.com/api';
4const KLAVIYO_REVISION = '2024-02-15';
5
6export async function POST(request: NextRequest) {
7  const body = await request.json();
8  const { email, eventName, properties, value } = body;
9
10  if (!email || !eventName) {
11    return NextResponse.json(
12      { error: 'email and eventName are required' },
13      { status: 400 }
14    );
15  }
16
17  const privateKey = process.env.KLAVIYO_PRIVATE_KEY;
18  if (!privateKey) {
19    return NextResponse.json(
20      { error: 'Klaviyo private key not configured' },
21      { status: 500 }
22    );
23  }
24
25  try {
26    const response = await fetch(`${KLAVIYO_API_BASE}/events/`, {
27      method: 'POST',
28      headers: {
29        Authorization: `Klaviyo-API-Key ${privateKey}`,
30        'Content-Type': 'application/json',
31        revision: KLAVIYO_REVISION,
32      },
33      body: JSON.stringify({
34        data: {
35          type: 'event',
36          attributes: {
37            metric: {
38              data: {
39                type: 'metric',
40                attributes: { name: eventName },
41              },
42            },
43            profile: {
44              data: {
45                type: 'profile',
46                attributes: { email },
47              },
48            },
49            properties: properties || {},
50            value: value || 0,
51            time: new Date().toISOString(),
52          },
53        },
54      }),
55    });
56
57    if (!response.ok) {
58      const error = await response.json();
59      console.error('Klaviyo event error:', error);
60      return NextResponse.json(
61        { error: 'Failed to track event' },
62        { status: 500 }
63      );
64    }
65
66    return NextResponse.json({ success: true });
67  } catch (error) {
68    console.error('Klaviyo events API error:', error);
69    return NextResponse.json(
70      { error: 'Failed to track event' },
71      { status: 500 }
72    );
73  }
74}

Store your Klaviyo credentials in Vercel environment variables. You need two variables: KLAVIYO_PRIVATE_KEY for API authentication and KLAVIYO_LIST_ID for the list to subscribe new signups to. To get your private API key: log in to Klaviyo, go to Account (top-right) → Settings → API Keys, and create a new private API key. Give it a descriptive name like 'V0 App Integration'. Copy the key immediately — Klaviyo only shows the full key once. Private API keys start with 'pk_' in Klaviyo's current API. To get your List ID: go to Lists & Segments in Klaviyo, click on the list you want new signups added to, and copy the list ID from the URL (it is the alphanumeric string after /lists/, e.g., 'AbCdEf'). If you have not created a list yet, create one now — go to Lists & Segments → Create List → name it (e.g., 'Newsletter Subscribers') and note the ID. In Vercel Dashboard → Settings → Environment Variables, add KLAVIYO_PRIVATE_KEY with your private key value and KLAVIYO_LIST_ID with your list ID. Both should be set for All Environments. After adding the variables, redeploy your project. You can also add KLAVIYO_PUBLIC_KEY (your Klaviyo site ID, found on the same API keys page) if you plan to use Klaviyo's browser-side JavaScript tracking snippet.