How to Integrate Keap with V0

Before writing any code, get your Keap personal API key. Log into your Keap account and navigate to Settings → Developer → API Keys. Generate a new personal API key and copy it — you will store this as a server-side environment variable in Vercel. Keep in mind that the personal API key grants full access to your Keap account, so treat it like a password. Keap's REST API (v1) is available at https://api.infusionsoft.com/crm/rest/v1/. Note that the base URL still uses infusionsoft.com — this is the legacy domain that Keap continues to use for the REST API even after the rebrand. The personal API key is passed as a query parameter in every request: ?access_token=YOUR_API_KEY. Key endpoints you will use most often: POST /contacts to create a new contact, PUT /contacts/{id} to update an existing contact, GET /contacts to search by email, POST /contacts/{id}/tags to apply tags, GET /tags to list all available tags, and POST /opportunities to create a deal in the pipeline. Familiarize yourself with Keap's data model before building: contacts are the core record, tags are used extensively for segmentation and automation triggers, custom fields can be added to contacts for business-specific data, and campaign sequences are triggered automatically when specific tags are applied. Plan your tag taxonomy before integrating so your automation sequences trigger correctly from day one.

Prompt V0 to generate the front-end interface for your Keap integration. The most impactful starting point is a lead capture form — this immediately feeds real leads into your CRM pipeline. Describe the fields you need precisely: name, email, phone, and any qualification questions that map to Keap tags. For a contact management dashboard, describe the table layout you need. V0 can generate a responsive table with sortable columns, search functionality, and filter dropdowns. Ask V0 to include action buttons in each row for common operations: adding a tag, viewing contact details, or marking as contacted. For a deal pipeline view, ask V0 to generate a Kanban board layout with columns representing deal stages (Lead, Qualified, Proposal Sent, Negotiating, Closed Won, Closed Lost). Each card shows the contact name, deal value, and days in stage. This maps directly to Keap's Opportunities feature. V0 is very good at generating these business UI patterns. After generation, check the API calls in the component to make sure they target the right endpoint paths you plan to create. Also check that any form validation is present — email format, required fields, and phone number format.

Create the Next.js API routes that communicate with Keap's REST API. The primary route to start with is the contact creation route, which is the backbone of any lead capture integration. The contact creation route at app/api/keap/contacts/route.ts handles POST requests from your form. It reads form data from the request body, maps fields to Keap's contact format, and sends a POST to Keap's contacts endpoint. Keap's contact creation API accepts a nested object structure with email_addresses (array) and phone_numbers (array) rather than simple string fields. An important deduplication step: before creating a new contact, first check if a contact with the same email already exists using a GET /contacts?email={email} query. If the contact exists, update them instead of creating a duplicate. This is critical for Keap workflows because duplicate contacts cause automation sequences to fire multiple times. For tag assignment, create a separate route at app/api/keap/contacts/[id]/tags/route.ts or handle it within the creation route. After creating or finding the contact, make a POST request to /contacts/{contact_id}/tags with an array of tag IDs. You need to know the numeric tag IDs — get them from a GET /tags request or look them up in Keap's admin under Contacts → Tags. Remember: all requests to Keap require ?access_token=YOUR_KEY as a query parameter. Never put this in client-side code.

1// app/api/keap/contacts/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const KEAP_BASE_URL = 'https://api.infusionsoft.com/crm/rest/v1';
5const KEAP_API_KEY = process.env.KEAP_API_KEY!;
6
7async function keapFetch(path: string, options?: RequestInit) {
8  const url = `${KEAP_BASE_URL}${path}${path.includes('?') ? '&' : '?'}access_token=${KEAP_API_KEY}`;
9  return fetch(url, {
10    headers: { 'Content-Type': 'application/json', ...options?.headers },
11    ...options,
12  });
13}
14
15async function findContactByEmail(email: string) {
16  const response = await keapFetch(`/contacts?email=${encodeURIComponent(email)}&limit=1`);
17  const data = await response.json();
18  return data.contacts?.[0] || null;
19}
20
21export async function POST(request: NextRequest) {
22  try {
23    const { firstName, lastName, email, phone, company, challenge } = await request.json();
24
25    if (!email || !firstName) {
26      return NextResponse.json({ error: 'firstName and email are required' }, { status: 400 });
27    }
28
29    // Check for existing contact
30    const existing = await findContactByEmail(email);
31
32    let contactId: number;
33
34    if (existing) {
35      // Update existing contact
36      await keapFetch(`/contacts/${existing.id}`, {
37        method: 'PATCH',
38        body: JSON.stringify({
39          given_name: firstName,
40          family_name: lastName,
41          company: { company_name: company },
42        }),
43      });
44      contactId = existing.id;
45    } else {
46      // Create new contact
47      const createResponse = await keapFetch('/contacts', {
48        method: 'POST',
49        body: JSON.stringify({
50          given_name: firstName,
51          family_name: lastName,
52          email_addresses: [{ email, field: 'EMAIL1' }],
53          phone_numbers: phone ? [{ number: phone, field: 'PHONE1' }] : [],
54          company: { company_name: company },
55        }),
56      });
57
58      if (!createResponse.ok) {
59        const err = await createResponse.json();
60        return NextResponse.json({ error: 'Keap contact creation failed', details: err }, { status: 500 });
61      }
62
63      const created = await createResponse.json();
64      contactId = created.id;
65    }
66
67    // Apply tags if configured
68    if (process.env.KEAP_DEFAULT_TAG_ID) {
69      await keapFetch(`/contacts/${contactId}/tags`, {
70        method: 'POST',
71        body: JSON.stringify({ tagIds: [parseInt(process.env.KEAP_DEFAULT_TAG_ID)] }),
72      });
73    }
74
75    return NextResponse.json({ success: true, contactId });
76  } catch (error) {
77    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
78  }
79}

Go to your Vercel Dashboard, open your project, click Settings → Environment Variables. Add the following server-side variables for Keap: First, KEAP_API_KEY with your personal API key from Keap Settings → Developer. Do not add the NEXT_PUBLIC_ prefix — this key must never reach the browser. It grants full access to your CRM data. Second, KEAP_DEFAULT_TAG_ID with the numeric ID of the tag you want to apply to all new contacts created through your V0 app. To find a tag's ID, go to Keap → Contacts → Tags, click on a tag, and look at the URL — the number in the URL is the tag ID. Alternatively, call GET /tags from your API route to retrieve all tag IDs programmatically. Optionally, add KEAP_SEQUENCE_TAG_IDS as a JSON string mapping challenge names to tag IDs: {'Lead Generation': 456, 'Sales Conversion': 457}. Parse this in your API route to apply the right tag based on the user's selected challenge. After saving, trigger a new Vercel deployment by pushing a commit. Test the integration by submitting the form on your deployed app and checking Keap → Contacts to verify the new contact appears with the correct tags. Also check Keap → Reporting → Campaign Sequences to confirm that any automation sequences triggered by the applied tags are running.