How to Integrate Lovable with SharpSpring

Log in to SharpSpring and navigate to the Admin section. Find API Settings (typically under Admin → API Settings or Account Settings → API). On this page, you will see your Account ID (a numeric string, e.g. '12345678') and your Secret Key (a long alphanumeric string). These two values together authenticate all SharpSpring API requests. Copy both values. Note that SharpSpring's API endpoint is https://api.sharpspring.com/pubapi/v1/ — the Account ID and Secret Key are passed as query parameters in the URL (accountID and secretKey), not in the request headers. This is different from most modern APIs, but it means the credentials are even more critical to keep server-side — they would be visible in the browser's network tab if called from frontend code. If you are working in a SharpSpring white-label account provided by your agency, ask your account manager for the API credentials — they may need to enable API access for your account.

In your Lovable project, open the Cloud tab by clicking the plus (+) icon next to the preview panel. Navigate to the Secrets section and add two new secrets. First, add SHARPSPRING_ACCOUNT_ID with your SharpSpring Account ID as the value. Second, add SHARPSPRING_SECRET_KEY with your Secret Key. Click Save after each entry. These values will be available in Edge Functions via Deno.env.get('SHARPSPRING_ACCOUNT_ID') and Deno.env.get('SHARPSPRING_SECRET_KEY'). The Edge Function will append these to the SharpSpring API URL as query parameters — this is the required authentication method for SharpSpring's API and is safe because it happens server-side in the Edge Function, never in the browser.

Build the Edge Function that wraps SharpSpring's JSON-RPC API. The function accepts a POST request with a JSON body specifying the method and params to call. It constructs the SharpSpring API URL with credentials as query parameters, creates the JSON-RPC 2.0 envelope with the specified method and params, sends the POST request to SharpSpring, and returns the result. Common SharpSpring API methods include getLeads (fetch leads with filter parameters), createLead (create a new lead), updateLead (update an existing lead), getOpportunities (fetch opportunities), updateOpportunity (update opportunity stage), and createActivity (log an activity against a lead). The JSON-RPC envelope format is straightforward: a JSON object with method, params (the SharpSpring method parameters), id (a unique request ID), and jsonrpc version.

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
8serve(async (req) => {
9  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
10
11  try {
12    const accountId = Deno.env.get('SHARPSPRING_ACCOUNT_ID')
13    const secretKey = Deno.env.get('SHARPSPRING_SECRET_KEY')
14
15    if (!accountId || !secretKey) {
16      return new Response(
17        JSON.stringify({ error: 'SharpSpring credentials not configured' }),
18        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
19      )
20    }
21
22    const { method, params } = await req.json()
23
24    if (!method) {
25      return new Response(
26        JSON.stringify({ error: 'method is required' }),
27        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
28      )
29    }
30
31    const apiUrl = `https://api.sharpspring.com/pubapi/v1/?accountID=${accountId}&secretKey=${secretKey}`
32
33    const requestId = crypto.randomUUID()
34    const rpcBody = {
35      method,
36      params: params || {},
37      id: requestId,
38      jsonrpc: '1.2',
39    }
40
41    const response = await fetch(apiUrl, {
42      method: 'POST',
43      headers: { 'Content-Type': 'application/json' },
44      body: JSON.stringify(rpcBody),
45    })
46
47    const data = await response.json()
48
49    // SharpSpring returns errors in result.error field
50    if (data.error) {
51      return new Response(
52        JSON.stringify({ error: 'SharpSpring API error', details: data.error }),
53        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
54      )
55    }
56
57    return new Response(
58      JSON.stringify(data.result || data),
59      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
60    )
61  } catch (error) {
62    return new Response(
63      JSON.stringify({ error: error.message }),
64      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
65    )
66  }
67})

With the Edge Function working, build a lead tracking dashboard in Lovable. The most valuable first screen for agencies is a pipeline view: leads categorized by stage, with counts and recent activity. Call the getLeads method to fetch leads with their status and source fields, and getOpportunities to fetch open opportunities with their stage and value. Display a summary of new leads this week, a pipeline stage breakdown as a horizontal bar or funnel chart, and a sortable table of recent leads with columns for name, email, company, lead source, status, and creation date. Add the ability to click a lead to see their full details and update their status via an updateLead call. For agencies managing multiple client accounts, add a client account selector that switches which SharpSpring account credentials are used — this requires storing multiple credential sets and routing to the appropriate secret.