How to Integrate Lovable with LeadSquared

Log into your LeadSquared account and navigate to Settings (gear icon, top right) → API & Webhooks → Access Key. You'll see your Access Key and Secret Key displayed here. Copy both — these are your permanent API credentials that authenticate every API call. Unlike OAuth tokens, these don't expire unless you regenerate them. Critically, LeadSquared has multiple data centers and your API host URL depends on which region your account is on. US accounts use api.leadsquared.com. India accounts typically use in21.leadsquared.com or in22.leadsquared.com (your settings page shows the correct URL). Look at the 'API Host' field in the API & Webhooks settings to find your correct host — using the wrong host returns a 401 even with correct credentials. In your Lovable project, open the Cloud tab ('+' button next to Preview) and click 'Secrets'. Add three secrets: LEADSQUARED_ACCESS_KEY with your Access Key, LEADSQUARED_SECRET_KEY with your Secret Key, and LEADSQUARED_HOST with your data center host (e.g., api.leadsquared.com — without trailing slash). These are automatically injected into your Edge Functions.

In Lovable's Code panel, navigate to supabase/functions/ and create a new folder leadsquared-create-lead with an index.ts file. This function receives lead data from your frontend form and creates a lead in LeadSquared using the Create Lead API. LeadSquared's API uses a different authentication pattern than most REST APIs: credentials are passed as query parameters (accessKey and secretKey) rather than headers. The Create Lead endpoint is POST https://{host}/v2/LeadManagement.svc/Lead.Create?accessKey={key}&secretKey={secret}. The request body is a JSON array of lead attribute objects, each with an Attribute and Value key. Required attributes include EmailAddress or Phone (at least one). Standard attributes include FirstName, LastName, Phone, EmailAddress, Source, LeadStatus. Custom attributes use the mx_ prefix (e.g., mx_Product_Interest). The API returns a JSON response with a Status field ('Success' or 'Error') and a Message. On success, it returns the LeadId of the created lead. Your Edge Function should build the attributes array from the request body, call the API, and return the LeadId so your frontend can store it alongside the form submission in Supabase.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const ACCESS_KEY = Deno.env.get("LEADSQUARED_ACCESS_KEY") ?? "";
4const SECRET_KEY = Deno.env.get("LEADSQUARED_SECRET_KEY") ?? "";
5const HOST = Deno.env.get("LEADSQUARED_HOST") ?? "api.leadsquared.com";
6
7const corsHeaders = {
8  "Access-Control-Allow-Origin": "*",
9  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
10};
11
12serve(async (req) => {
13  if (req.method === "OPTIONS") {
14    return new Response("ok", { headers: corsHeaders });
15  }
16
17  try {
18    const body = await req.json();
19    const { firstName, lastName, email, phone, source = "Website", ...customFields } = body;
20
21    const attributes: Array<{ Attribute: string; Value: string }> = [
22      { Attribute: "FirstName", Value: firstName ?? "" },
23      { Attribute: "LastName", Value: lastName ?? "" },
24      { Attribute: "EmailAddress", Value: email ?? "" },
25      { Attribute: "Phone", Value: phone ?? "" },
26      { Attribute: "Source", Value: source },
27      { Attribute: "LeadStatus", Value: "New" },
28    ];
29
30    // Add custom fields with mx_ prefix
31    for (const [key, value] of Object.entries(customFields)) {
32      if (value !== undefined && value !== null) {
33        attributes.push({ Attribute: `mx_${key}`, Value: String(value) });
34      }
35    }
36
37    const url = `https://${HOST}/v2/LeadManagement.svc/Lead.Create?accessKey=${ACCESS_KEY}&secretKey=${SECRET_KEY}`;
38    const res = await fetch(url, {
39      method: "POST",
40      headers: { "Content-Type": "application/json" },
41      body: JSON.stringify(attributes),
42    });
43
44    const data = await res.json();
45
46    if (data.Status === "Success" || data.LeadId) {
47      return new Response(
48        JSON.stringify({ success: true, leadId: data.Message?.Id ?? data.LeadId }),
49        { headers: { ...corsHeaders, "Content-Type": "application/json" } }
50      );
51    } else {
52      return new Response(
53        JSON.stringify({ success: false, error: data.ExceptionMessage ?? data.Message ?? "Unknown error" }),
54        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
55      );
56    }
57  } catch (e) {
58    return new Response(
59      JSON.stringify({ error: (e as Error).message }),
60      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
61    );
62  }
63});

Now create the frontend form component that collects lead data and calls your Edge Function. Open Lovable's chat and prompt it to build a lead capture form. The form should collect the relevant fields for your use case (at minimum, name, email, and phone), validate them client-side, and call the leadsquared-create-lead Edge Function on submission. After a successful API call, store the returned LeadId in Supabase so you can link app interactions back to the CRM record. For example, if a user submits a demo request and gets LeadId '12345678', store that in your Supabase users or leads table. Future activity logs, page views, or follow-up form submissions can reference this LeadId when posting activities to LeadSquared. For the form UI, use shadcn/ui form components with react-hook-form for validation. Show a loading state while the Edge Function runs and a success toast when the lead is created. If LeadSquared returns a duplicate lead error (the email already exists), handle it gracefully — you may want to update the existing lead rather than showing an error to the user. LeadSquared provides a separate Lead.CreateOrUpdate endpoint that handles duplicates automatically.

Beyond lead creation, LeadSquared tracks Activities — everything a lead does or a salesperson does with a lead. Activities include email opens, page visits, calls, meetings, and custom activities you define. Logging activities enriches the lead's timeline in LeadSquared and can trigger automation rules (e.g., 'If a lead views the pricing page 3 times, assign to senior sales rep'). Create a second Edge Function leadsquared-log-activity that calls the PostLeadActivity endpoint. This endpoint requires the lead's EmailAddress or ProspectId to identify the lead, the Activity type (you can use built-in types or create custom ones in LeadSquared settings), a Score for the activity (points used for lead scoring), and optional Note. The endpoint is POST https://{host}/v2/ProspectActivity.svc/Create. For common activity types, LeadSquared uses numeric ActivityEvent IDs. Common ones are: 3 = Lead created, 4 = Email sent, 206 = Webinar attended, 212 = Form submitted. You can also create custom activities under Settings → Custom Activity Types which give you a custom ActivityEvent ID. Your Lovable app can log activities when a user visits a key page, downloads a resource, or completes an in-app action — giving the sales team rich context about what the prospect did.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const ACCESS_KEY = Deno.env.get("LEADSQUARED_ACCESS_KEY") ?? "";
4const SECRET_KEY = Deno.env.get("LEADSQUARED_SECRET_KEY") ?? "";
5const HOST = Deno.env.get("LEADSQUARED_HOST") ?? "api.leadsquared.com";
6
7const corsHeaders = {
8  "Access-Control-Allow-Origin": "*",
9  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
10};
11
12serve(async (req) => {
13  if (req.method === "OPTIONS") {
14    return new Response("ok", { headers: corsHeaders });
15  }
16
17  try {
18    const { email, activityEvent, note = "", score = 5 } = await req.json();
19
20    const activity = {
21      EmailAddress: email,
22      ActivityEvent: activityEvent,
23      ActivityNote: note,
24      Score: score,
25      ActivityDate: new Date().toISOString(),
26      MXFields: [],
27    };
28
29    const url = `https://${HOST}/v2/ProspectActivity.svc/Create?accessKey=${ACCESS_KEY}&secretKey=${SECRET_KEY}`;
30    const res = await fetch(url, {
31      method: "POST",
32      headers: { "Content-Type": "application/json" },
33      body: JSON.stringify(activity),
34    });
35
36    const data = await res.json();
37
38    if (res.ok && data.Status !== "Error") {
39      return new Response(
40        JSON.stringify({ success: true }),
41        { headers: { ...corsHeaders, "Content-Type": "application/json" } }
42      );
43    } else {
44      return new Response(
45        JSON.stringify({ success: false, error: data.ExceptionMessage ?? "Activity log failed" }),
46        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
47      );
48    }
49  } catch (e) {
50    return new Response(
51      JSON.stringify({ error: (e as Error).message }),
52      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
53    );
54  }
55});