How to Integrate Lovable with Pipedrive

Pipedrive uses personal API tokens for API authentication. Unlike OAuth2, these tokens do not expire and do not require periodic refresh — they remain valid until you regenerate them. Each user in your Pipedrive account has their own API token, so the token you generate is tied to your user account's permissions. To get your API token: log in to Pipedrive and click your avatar in the top-right corner. Select 'Personal preferences' from the dropdown. Go to the 'API' tab in the left sidebar. Your personal API token is displayed. Click 'Select all' then copy the token. If you need to regenerate the token (for security rotation), click the circular arrow icon next to the token. Note that regenerating invalidates the previous token immediately — update Cloud → Secrets right away if you regenerate. For production integrations, consider creating a dedicated Pipedrive user account for your integration (e.g., 'API Integration Bot') and using that account's API token. This way, the integration token is isolated from any individual team member's account. If a salesperson leaves your company and their account is deactivated, your integration token is not affected. Also note your Pipedrive company domain — it appears in your Pipedrive URL as 'yourcompany.pipedrive.com'. This domain is not needed for API calls (the API base URL is always api.pipedrive.com) but is useful to know for configuring webhooks and OAuth apps if you expand the integration later.

Add the Pipedrive API token to Cloud → Secrets in Lovable. In Lovable, click the '+' icon at the top to open the Cloud panel, go to Secrets, and click 'Add new secret'. Name: PIPEDRIVE_API_TOKEN Value: your 40-character Pipedrive API token Before building Edge Functions, you also need your pipeline and stage IDs. Pipedrive stages are identified by numeric IDs (e.g., stage 1, stage 2) rather than names in API calls. The stage IDs are specific to your Pipedrive account — you cannot hardcode generic values. To fetch your stage IDs, make a test API call (from Postman, Insomnia, or any REST client): GET https://api.pipedrive.com/v1/stages?api_token=YOUR_TOKEN This returns all stages across all pipelines with their ID, name, and pipeline_id. Note the stage IDs you will use (typically 'Qualified Lead', 'Demo Scheduled', 'Proposal Sent', 'Closed Won', etc. — whatever you have configured). You can also fetch pipelines: GET https://api.pipedrive.com/v1/pipelines?api_token=YOUR_TOKEN Store any frequently-used stage IDs as additional secrets (PIPEDRIVE_STAGE_LEAD_ID, PIPEDRIVE_STAGE_CLOSED_WON_ID) so they can be changed without code modifications if you restructure your pipeline.

Build the core Edge Function that handles common Pipedrive operations: creating persons, creating deals, updating deal stages, and logging activities. A single multi-action proxy pattern keeps your Edge Function count manageable while covering all integration needs. Pipedrive API v1 authentication uses the api_token query parameter — append ?api_token=YOUR_TOKEN to every request URL. Alternatively, Pipedrive accepts the API token as an Authorization header (Bearer token format), which is cleaner. Use the header approach to avoid the token appearing in server logs as a URL parameter. The Pipedrive API base URL is https://api.pipedrive.com/v1 for all accounts regardless of company domain. Key Pipedrive API behaviors to be aware of: creating a person and deal are separate operations — you create the person first, then create the deal with the person_id from the person creation response. Pipedrive also uses numeric IDs for all resources. When listing deals, the response includes the full person and organization objects nested inside, so you rarely need separate lookups for dashboard displays. For the pipeline board use case, also fetch stages via GET /stages?pipeline_id=X to get ordered stage names and IDs for building columns.

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 PIPEDRIVE_BASE = 'https://api.pipedrive.com/v1'
9
10async function pdFetch(path: string, method = 'GET', body?: object) {
11  const token = Deno.env.get('PIPEDRIVE_API_TOKEN')
12  if (!token) throw new Error('PIPEDRIVE_API_TOKEN secret not configured')
13
14  const resp = await fetch(`${PIPEDRIVE_BASE}${path}`, {
15    method,
16    headers: {
17      Authorization: `Bearer ${token}`,
18      'Content-Type': 'application/json',
19    },
20    body: body ? JSON.stringify(body) : undefined,
21  })
22  return resp.json()
23}
24
25serve(async (req) => {
26  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
27
28  try {
29    const { action, params = {} } = await req.json()
30    let result
31
32    switch (action) {
33      case 'create_person':
34        result = await pdFetch('/persons', 'POST', {
35          name: params.name,
36          email: [{ value: params.email, primary: true }],
37          phone: params.phone ? [{ value: params.phone }] : undefined,
38          org_id: params.orgId,
39        })
40        break
41
42      case 'create_deal':
43        result = await pdFetch('/deals', 'POST', {
44          title: params.title,
45          person_id: params.personId,
46          org_id: params.orgId,
47          stage_id: params.stageId,
48          value: params.value,
49          currency: params.currency || 'USD',
50          expected_close_date: params.expectedCloseDate,
51        })
52        break
53
54      case 'update_deal_stage':
55        result = await pdFetch(`/deals/${params.dealId}`, 'PUT', {
56          stage_id: params.stageId,
57        })
58        break
59
60      case 'log_activity':
61        result = await pdFetch('/activities', 'POST', {
62          subject: params.subject,
63          type: params.type || 'task',
64          deal_id: params.dealId,
65          person_id: params.personId,
66          note: params.note,
67          due_date: params.dueDate || new Date().toISOString().split('T')[0],
68        })
69        break
70
71      case 'list_deals':
72        result = await pdFetch(`/deals?stage_id=${params.stageId || ''}&status=${params.status || 'open'}&limit=${params.limit || 50}`)
73        break
74
75      case 'get_stages':
76        result = await pdFetch(`/stages${params.pipelineId ? `?pipeline_id=${params.pipelineId}` : ''}`)
77        break
78
79      default:
80        return new Response(JSON.stringify({ error: 'Unknown action' }), {
81          status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
82        })
83    }
84
85    return new Response(JSON.stringify(result), {
86      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
87    })
88  } catch (error) {
89    return new Response(JSON.stringify({ error: error.message }), {
90      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
91    })
92  }
93})

With the Edge Function deployed, build the UI components that display and interact with Pipedrive data. For a pipeline board, fetch stages on component mount, then fetch deals filtered by stage, and render Kanban columns. For wiring app events to Pipedrive deal creation, add the supabase.functions.invoke('pipedrive-crm') call at the relevant points in your app's user flow. The most impactful integration points are: new user registration (creates a deal in a 'New Signup' stage), trial-to-paid upgrade intent (moves the deal to a 'Demo Requested' stage), and subscription cancellation (creates an activity on the deal with cancellation reason). Use the fire-and-forget pattern (no await) for Pipedrive sync calls in user-facing flows — CRM sync failures should never block the primary user experience. Log errors to the console for monitoring but do not surface them to end users. For the pipeline board with drag-and-drop, use @hello-pangea/dnd (the maintained fork of react-beautiful-dnd) — it is available in Lovable's React environment. On drop, call the pipedrive-crm Edge Function with action 'update_deal_stage' and the new stage_id. Optimistically update the UI before the API call completes for a responsive feel. For complex pipeline integrations requiring webhook-driven real-time updates from Pipedrive back to your Lovable app (so your board reflects changes made directly in Pipedrive), RapidDev's team can help set up the webhook receiver Edge Function and real-time sync architecture.