How to Integrate LeadSquared with V0

Use V0 to generate a professional lead capture form that matches your brand and converts visitors effectively. V0 excels at building clean form layouts with Tailwind CSS — the key is to be specific about the fields, layout, and copy you want. Lead capture forms in B2B contexts perform best when they ask for the minimum necessary information upfront. A good starting set is: full name, work email, phone number, company name, and a brief description of requirements. Avoid overwhelming visitors with 10+ fields — you can progressively collect more information via follow-up activities. Prompt V0 to include proper form validation feedback — inline error messages when required fields are empty, an email format check, and a phone number format indicator. After submission, show a clear success message that sets expectations ('Our team will contact you within 24 hours') rather than a generic 'Form submitted' message. This small detail significantly improves user trust. For multi-page or popup forms, describe the interaction pattern in your V0 prompt — V0 handles modal forms, slide-in sidebars, and multi-step wizards well. Once the form layout looks right in V0's preview, move to creating the API route before connecting the form.

Build the Next.js API route that receives form data from your component and creates a new lead in LeadSquared via their REST API. LeadSquared's REST API uses HMAC-SHA256 request signing for authentication — you compute an HMAC signature using your Secret Key over the request timestamp and body, then include it as a query parameter. Alternatively, for the Capture API (lead creation endpoint), LeadSquared supports basic API key authentication passed as query parameters. The LeadSquared Capture API endpoint for creating leads is: POST https://{your-host}/v2/LeadManagement.svc/Lead.Capture. The request body is a JSON array of lead field objects with the format [{Attribute: 'EmailAddress', Value: 'user@example.com'}, ...]. Standard field names include EmailAddress, FirstName, LastName, Phone, Company, mx_Custom_Field for custom fields. LeadSquared maps incoming data to lead fields based on field names defined in your account. For standard fields like EmailAddress and Phone, the API handles deduplication automatically — if a lead with the same email already exists, the API updates the existing lead rather than creating a duplicate. This is an important behavior to understand: submitting the same email twice updates the lead rather than creating duplicates. For the access key and secret key authentication, pass them as query parameters: ?accessKey=YOUR_KEY&secretKey=YOUR_SECRET. While this looks insecure, the API is called from your server-side API route (not the browser), so these credentials never appear in client-side network requests.

1import { NextResponse } from 'next/server';
2
3const LS_HOST = process.env.LEADSQUARED_HOST!;
4const LS_ACCESS_KEY = process.env.LEADSQUARED_ACCESS_KEY!;
5const LS_SECRET_KEY = process.env.LEADSQUARED_SECRET_KEY!;
6
7interface LeadFormData {
8  name: string;
9  email: string;
10  phone: string;
11  company?: string;
12  teamSize?: string;
13  requirement?: string;
14  source?: string;
15}
16
17function buildLeadAttributes(data: LeadFormData) {
18  const [firstName, ...lastNameParts] = data.name.trim().split(' ');
19  const lastName = lastNameParts.join(' ');
20
21  const attributes = [
22    { Attribute: 'FirstName', Value: firstName },
23    { Attribute: 'LastName', Value: lastName || '' },
24    { Attribute: 'EmailAddress', Value: data.email },
25    { Attribute: 'Phone', Value: data.phone },
26    { Attribute: 'Source', Value: data.source || 'Website' },
27  ];
28
29  if (data.company) {
30    attributes.push({ Attribute: 'Company', Value: data.company });
31  }
32  if (data.teamSize) {
33    attributes.push({ Attribute: 'mx_Team_Size', Value: data.teamSize });
34  }
35  if (data.requirement) {
36    attributes.push({ Attribute: 'mx_Requirement', Value: data.requirement });
37  }
38
39  return attributes;
40}
41
42export async function POST(request: Request) {
43  if (!LS_HOST || !LS_ACCESS_KEY || !LS_SECRET_KEY) {
44    return NextResponse.json(
45      { error: 'LeadSquared credentials not configured' },
46      { status: 500 }
47    );
48  }
49
50  const formData: LeadFormData = await request.json();
51
52  if (!formData.email || !formData.name) {
53    return NextResponse.json(
54      { error: 'Name and email are required' },
55      { status: 400 }
56    );
57  }
58
59  const leadAttributes = buildLeadAttributes(formData);
60
61  const url = `https://${LS_HOST}/v2/LeadManagement.svc/Lead.Capture?accessKey=${LS_ACCESS_KEY}&secretKey=${LS_SECRET_KEY}`;
62
63  const response = await fetch(url, {
64    method: 'POST',
65    headers: { 'Content-Type': 'application/json' },
66    body: JSON.stringify(leadAttributes),
67  });
68
69  if (!response.ok) {
70    const errorText = await response.text();
71    console.error('LeadSquared API error:', response.status, errorText);
72    return NextResponse.json(
73      { error: 'Failed to create lead in LeadSquared' },
74      { status: 502 }
75    );
76  }
77
78  const result = await response.json();
79  return NextResponse.json({ success: true, leadId: result.Message?.Id });
80}

Store your LeadSquared credentials in Vercel's environment variable system. You need three values: your Access Key, Secret Key, and the host URL for your LeadSquared region. All three are server-only secrets — they must never be exposed to the browser. Find your LeadSquared API credentials in your account: go to Settings (gear icon) → API → API Credentials. You'll see your Access Key and Secret Key listed there. Copy both values. For the host URL, LeadSquared uses region-specific endpoints. India/Singapore: ap-southeast-1.api.leadsquared.com. US East: us-1.api.leadsquared.com. Check your LeadSquared account region or ask your LeadSquared account manager if you're unsure. In Vercel Dashboard → Settings → Environment Variables, create three variables: LEADSQUARED_ACCESS_KEY, LEADSQUARED_SECRET_KEY, and LEADSQUARED_HOST (just the hostname, without https://). Select all three scopes (Production, Preview, Development). After saving, trigger a redeployment. For local development, add all three to your .env.local file. You can use the same credentials for development and production — LeadSquared uses the same API for both environments; you'll just see test leads appearing in your account. If this is a concern, create a separate LeadSquared account or use a test pipeline/stage for development-originated leads.

1# .env.local
2LEADSQUARED_ACCESS_KEY=your_access_key_here
3LEADSQUARED_SECRET_KEY=your_secret_key_here
4LEADSQUARED_HOST=ap-southeast-1.api.leadsquared.com

Beyond lead creation, LeadSquared's real power comes from activity tracking — sending behavioral events that update lead scores and trigger automation workflows. Create a second API route for posting activities to LeadSquared. The LeadSquared Activity API endpoint is: POST https://{host}/v2/ProspectActivity.svc/Create?accessKey={key}&secretKey={secret}. Each activity has a RelatedProspectId (the lead's ID returned when you create the lead) or an EmailAddress to look up the lead, an ActivityEvent (integer ID for the activity type — defined in your LeadSquared account), and optional parameters with additional data. Common activity events you'll want to set up in your LeadSquared account include: page visits, resource downloads, demo requests, free trial starts, and pricing page views. Create these event types in LeadSquared under Settings → Lead Activities, note their integer IDs, and map them to constants in your Next.js code. Store the lead ID returned from the lead creation API response in a session cookie or localStorage so subsequent activity events can reference the correct lead. If the lead ID isn't available (for anonymous visitors), pass the EmailAddress instead — LeadSquared will look up the lead by email.

1// app/api/leadsquared/activity/route.ts
2import { NextResponse } from 'next/server';
3
4const LS_HOST = process.env.LEADSQUARED_HOST!;
5const LS_ACCESS_KEY = process.env.LEADSQUARED_ACCESS_KEY!;
6const LS_SECRET_KEY = process.env.LEADSQUARED_SECRET_KEY!;
7
8// Map your custom activity event names to LeadSquared event IDs
9// Get these IDs from LeadSquared Settings → Lead Activities
10const ACTIVITY_IDS: Record<string, number> = {
11  'Viewed Pricing': 101,
12  'Downloaded Case Study': 102,
13  'Watched Demo': 103,
14  'Started Free Trial': 104,
15};
16
17export async function POST(request: Request) {
18  const { email, activityName, notes } = await request.json();
19
20  if (!email || !activityName) {
21    return NextResponse.json({ error: 'email and activityName required' }, { status: 400 });
22  }
23
24  const activityEventId = ACTIVITY_IDS[activityName];
25  if (!activityEventId) {
26    return NextResponse.json({ error: `Unknown activity: ${activityName}` }, { status: 400 });
27  }
28
29  const payload = [
30    {
31      RelatedProspectEmail: email,
32      ActivityEvent: activityEventId,
33      ActivityNote: notes || activityName,
34      Fields: [
35        { SchemaName: 'mx_Source_URL', Value: request.headers.get('referer') || '' },
36      ],
37    },
38  ];
39
40  const url = `https://${LS_HOST}/v2/ProspectActivity.svc/Create?accessKey=${LS_ACCESS_KEY}&secretKey=${LS_SECRET_KEY}`;
41
42  const response = await fetch(url, {
43    method: 'POST',
44    headers: { 'Content-Type': 'application/json' },
45    body: JSON.stringify(payload),
46  });
47
48  return NextResponse.json({ success: response.ok });
49}