How to Integrate Lovable with Keap

Keap uses OAuth2 authorization code flow for API authentication. Both modern Keap and legacy Infusionsoft integrations are registered at developer.infusionsoft.com. Go to developer.infusionsoft.com and sign in with your Keap account. Click 'Register Application'. Fill in: - Application Name: 'Lovable CRM Integration' - Redirect URL: https://yourapp.lovable.app/oauth/callback - Application Type: Server After registration, you receive a Client ID and Client Secret. Construct the OAuth2 authorization URL (note: Keap and Infusionsoft share the same OAuth2 endpoints): https://accounts.infusionsoft.com/app/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=full Open this in your browser and authorize. Keap redirects to your redirect URI with a 'code' parameter. Copy the code — it expires in 10 minutes. Exchange the code for tokens via POST to https://api.infusionsoft.com/token: - grant_type: authorization_code - client_id, client_secret, redirect_uri, code - Send as form URL-encoded (application/x-www-form-urlencoded) The response includes: access_token (valid 24 hours), refresh_token (expires after 90 days of non-use), and token_type: 'bearer'. For Keap REST API v2 specifically: the API base URL is https://api.infusionsoft.com/crm/rest/v2/ (note v2, not v1). The v2 API has improved pagination, filtering, and response structures compared to the v1 API used by Infusionsoft.

Add all Keap OAuth2 credentials to Lovable's Cloud Secrets panel. In Lovable, click '+' → Cloud panel → Secrets. Add: - KEAP_CLIENT_ID — your application Client ID from the developer portal - KEAP_CLIENT_SECRET — your application Client Secret - KEAP_ACCESS_TOKEN — the current access token (24-hour lifetime) - KEAP_REFRESH_TOKEN — the long-lived refresh token (90-day non-use expiry) Keap API v2 uses the same OAuth2 token refresh endpoint as v1: POST https://api.infusionsoft.com/token with grant_type=refresh_token, client_id, client_secret, and refresh_token. For tag-based automation, retrieve your tag IDs. In Keap, go to Settings → Tags or use the API: GET /crm/rest/v2/tags returns all tags with their numeric IDs and names. Store frequently-used tag IDs as additional secrets: - KEAP_TAG_NEW_CONTACT — applied on signup - KEAP_TAG_CUSTOMER — applied on first purchase Keap API v2 uses slightly different field names than v1. Contact creation in v2 uses: given_name (first name), family_name (last name), email_addresses (array with { email, field: 'EMAIL1' }). Verify field names against the Keap API v2 documentation. The Keap API v2 supports more powerful filtering than v1: GET /crm/rest/v2/contacts?filter=email==user@example.com uses equality filter syntax.

Build the Edge Function for Keap REST API v2 operations. The v2 API has a cleaner design than v1, with consistent response shapes and better filtering support. Keap REST API v2 base URL: https://api.infusionsoft.com/crm/rest/v2/ Key v2 endpoints: - GET /contacts — list contacts with filter support - POST /contacts — create contact - PATCH /contacts/{id} — update contact - POST /contacts/{contactId}/tags — apply tags - DELETE /contacts/{contactId}/tags/{tagId} — remove a tag - GET /invoices — list invoices - POST /invoices — create invoice - GET /opportunities — list opportunities (deals) - POST /opportunities — create opportunity The token refresh uses the same endpoint as v1: POST https://api.infusionsoft.com/token. The Edge Function requests a new token when a 401 is returned, just as in the Infusionsoft pattern. Invoice creation in Keap v2 requires: contact_id (numeric), line_items array with { name, quantity, unit_price }, and due_date. The contact_id must be the Keap numeric contact ID, not the email address. For tag operations in v2, apply tags via POST to /contacts/{id}/tags with body { tag_ids: [123, 456] }. Remove individual tags via DELETE /contacts/{id}/tags/{tagId} — tag removal is per-tag-ID, not bulk.

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 KEAP_BASE = 'https://api.infusionsoft.com/crm/rest/v2'
9const TOKEN_URL = 'https://api.infusionsoft.com/token'
10
11async function refreshToken(): Promise<string> {
12  const resp = await fetch(TOKEN_URL, {
13    method: 'POST',
14    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
15    body: new URLSearchParams({
16      grant_type: 'refresh_token',
17      client_id: Deno.env.get('KEAP_CLIENT_ID')!,
18      client_secret: Deno.env.get('KEAP_CLIENT_SECRET')!,
19      refresh_token: Deno.env.get('KEAP_REFRESH_TOKEN')!,
20    }),
21  })
22  const data = await resp.json()
23  if (!data.access_token) throw new Error('Keap token refresh failed: ' + JSON.stringify(data))
24  return data.access_token
25}
26
27async function keapFetch(path: string, method = 'GET', body?: unknown, retry = true): Promise<Response> {
28  let token = Deno.env.get('KEAP_ACCESS_TOKEN')!
29  let resp = await fetch(`${KEAP_BASE}${path}`, {
30    method,
31    headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
32    body: body ? JSON.stringify(body) : undefined,
33  })
34  if (resp.status === 401 && retry) {
35    token = await refreshToken()
36    resp = await fetch(`${KEAP_BASE}${path}`, {
37      method,
38      headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
39      body: body ? JSON.stringify(body) : undefined,
40    })
41  }
42  return resp
43}
44
45serve(async (req) => {
46  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
47
48  try {
49    const { action, params = {} } = await req.json()
50    let resp: Response
51
52    switch (action) {
53      case 'find_or_create_contact': {
54        const search = await keapFetch(`/contacts?filter=email==${encodeURIComponent(params.email)}`)
55        const searchData = await search.json()
56        if (searchData.contacts?.length > 0) {
57          return new Response(JSON.stringify({ contactId: searchData.contacts[0].id, created: false }), {
58            headers: { ...corsHeaders, 'Content-Type': 'application/json' },
59          })
60        }
61        resp = await keapFetch('/contacts', 'POST', {
62          given_name: params.firstName,
63          family_name: params.lastName,
64          email_addresses: [{ email: params.email, field: 'EMAIL1' }],
65          phone_numbers: params.phone ? [{ number: params.phone, field: 'PHONE1' }] : [],
66          tag_ids: params.tagIds || [],
67        })
68        const created = await resp.json()
69        return new Response(JSON.stringify({ contactId: created.id, created: true }), {
70          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
71        })
72      }
73
74      case 'apply_tags':
75        resp = await keapFetch(`/contacts/${params.contactId}/tags`, 'POST', { tag_ids: params.tagIds })
76        break
77
78      case 'remove_tag':
79        resp = await keapFetch(`/contacts/${params.contactId}/tags/${params.tagId}`, 'DELETE')
80        break
81
82      case 'list_contacts':
83        resp = await keapFetch(`/contacts?page_size=${params.pageSize || 25}&page_token=${params.pageToken || ''}`)
84        break
85
86      case 'create_invoice':
87        resp = await keapFetch('/invoices', 'POST', {
88          contact_id: params.contactId,
89          line_items: params.lineItems,
90          due_date: params.dueDate,
91          notes: params.notes || '',
92        })
93        break
94
95      case 'list_invoices':
96        resp = await keapFetch(`/invoices?contact_id=${params.contactId || ''}&page_size=${params.pageSize || 25}`)
97        break
98
99      case 'create_opportunity':
100        resp = await keapFetch('/opportunities', 'POST', {
101          contact: { id: params.contactId },
102          opportunity_title: params.title,
103          projected_revenue_low: params.valueLow,
104          projected_revenue_high: params.valueHigh,
105          stage: { id: params.stageId },
106        })
107        break
108
109      default:
110        return new Response(JSON.stringify({ error: 'Unknown action' }), {
111          status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
112        })
113    }
114
115    const data = await resp.json()
116    return new Response(JSON.stringify(data), {
117      status: resp.ok ? 200 : resp.status,
118      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
119    })
120  } catch (error) {
121    return new Response(JSON.stringify({ error: error.message }), {
122      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
123    })
124  }
125})

With the Edge Function deployed, use Lovable's chat to build the management portal that combines Keap's CRM and invoicing data. The unique value of Keap integration is having contacts, deals, and invoices in a single data model — your Lovable dashboard should reflect this unified view. For a client detail page, fetch the contact record, their associated opportunities, and their invoice history in parallel (three separate Edge Function calls using Promise.all in your React component). Display as a tabbed layout: Overview (contact info + active tags), Pipeline (opportunities by stage), and Invoices (invoice list with status). For invoice creation, build a form with line items (description, quantity, unit price) that calls the create_invoice action. The form should pre-populate the contact_id from the current client context. After creation, refresh the invoice list to show the new invoice with 'Draft' status. For tag management, build a tag selector that calls list_tags (add this action to your Edge Function using GET /tags), shows current contact tags, and provides add/remove buttons. Applying or removing tags immediately triggers any Keap automation sequences configured for those tags. For automation testing, apply a tag to a test contact and verify the associated Keap automation sequence fires. This confirms the API integration is working correctly end-to-end — not just that the API call returns 200, but that the automation actually runs in Keap. RapidDev's team can help design complex Keap integrations that combine contact management, invoicing workflows, and automation triggering for complete business process automation built on your Lovable app.