How to Integrate Infusionsoft (Keap) with V0

1import { NextRequest, NextResponse } from 'next/server';
2
3const KEAP_API_BASE = 'https://api.infusionsoft.com/crm/rest/v1';
4
5interface ContactFormData {
6  firstName: string;
7  lastName: string;
8  email: string;
9  phone?: string;
10  company?: string;
11  interest?: string;
12  subscribeToEmail?: boolean;
13}
14
15const INTEREST_TAG_MAP: Record<string, number> = {
16  'Free Trial': parseInt(process.env.KEAP_TAG_TRIAL ?? '0', 10),
17  'Pricing': parseInt(process.env.KEAP_TAG_PRICING ?? '0', 10),
18  'Demo': parseInt(process.env.KEAP_TAG_DEMO ?? '0', 10),
19  'General Inquiry': parseInt(process.env.KEAP_TAG_GENERAL ?? '0', 10),
20};
21
22export async function POST(request: NextRequest) {
23  const apiKey = process.env.KEAP_API_KEY;
24  if (!apiKey) {
25    return NextResponse.json({ error: 'Keap API key not configured' }, { status: 500 });
26  }
27
28  let body: ContactFormData;
29  try {
30    body = await request.json();
31  } catch {
32    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
33  }
34
35  if (!body.email) {
36    return NextResponse.json({ error: 'Email is required' }, { status: 400 });
37  }
38
39  const contactPayload = {
40    given_name: body.firstName,
41    family_name: body.lastName,
42    email_addresses: [{ email: body.email, field: 'EMAIL1' }],
43    phone_numbers: body.phone ? [{ number: body.phone, field: 'PHONE1' }] : [],
44    company: body.company ? { company_name: body.company } : undefined,
45    opt_in_reason: body.subscribeToEmail ? 'Form submission' : undefined,
46  };
47
48  try {
49    const createResponse = await fetch(`${KEAP_API_BASE}/contacts?access_token=${apiKey}`, {
50      method: 'POST',
51      headers: { 'Content-Type': 'application/json' },
52      body: JSON.stringify(contactPayload),
53    });
54
55    if (!createResponse.ok) {
56      const errorText = await createResponse.text();
57      return NextResponse.json(
58        { error: `Keap API error: ${createResponse.status}`, details: errorText },
59        { status: createResponse.status }
60      );
61    }
62
63    const contact = await createResponse.json();
64
65    // Apply tag based on interest field if configured
66    if (body.interest && INTEREST_TAG_MAP[body.interest]) {
67      const tagId = INTEREST_TAG_MAP[body.interest];
68      await fetch(`${KEAP_API_BASE}/contacts/${contact.id}/tags?access_token=${apiKey}`, {
69        method: 'POST',
70        headers: { 'Content-Type': 'application/json' },
71        body: JSON.stringify({ tagIds: [tagId] }),
72      });
73    }
74
75    return NextResponse.json({ success: true, contactId: contact.id });
76  } catch (error) {
77    console.error('Keap API route error:', error);
78    return NextResponse.json({ error: 'Failed to create Keap contact' }, { status: 500 });
79  }
80}

1# .env.local (do NOT commit)
2KEAP_API_KEY=your_personal_api_key_here
3KEAP_TAG_TRIAL=12345
4KEAP_TAG_PRICING=12346
5KEAP_TAG_DEMO=12347
6KEAP_TAG_GENERAL=12348

1'use client';
2
3import { useState } from 'react';
4
5export default function LeadForm() {
6  const [loading, setLoading] = useState(false);
7  const [success, setSuccess] = useState(false);
8  const [error, setError] = useState<string | null>(null);
9
10  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
11    e.preventDefault();
12    setLoading(true);
13    setError(null);
14    const formData = new FormData(e.currentTarget);
15    try {
16      const res = await fetch('/api/keap/contacts', {
17        method: 'POST',
18        headers: { 'Content-Type': 'application/json' },
19        body: JSON.stringify({
20          firstName: formData.get('firstName'),
21          lastName: formData.get('lastName'),
22          email: formData.get('email'),
23          phone: formData.get('phone'),
24          company: formData.get('company'),
25          interest: formData.get('interest'),
26          subscribeToEmail: formData.get('subscribeToEmail') === 'on',
27        }),
28      });
29      const data = await res.json();
30      if (!res.ok) throw new Error(data.error ?? 'Submission failed');
31      setSuccess(true);
32    } catch (err) {
33      setError(err instanceof Error ? err.message : 'Submission failed');
34    } finally {
35      setLoading(false);
36    }
37  }
38
39  if (success) {
40    return <div className="text-green-600 p-6">Thanks! We will be in touch within 24 hours.</div>;
41  }
42
43  return (
44    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto p-6">
45      {error && <p className="text-red-500">{error}</p>}
46      {/* form fields omitted for brevity */}
47      <button type="submit" disabled={loading} className="w-full bg-blue-600 text-white py-2 rounded">
48        {loading ? 'Submitting...' : 'Submit'}
49      </button>
50    </form>
51  );
52}