How to Integrate Lovable with HubSpot

HubSpot's recommended authentication method for server-to-server integrations like Lovable Edge Functions is Private Apps. Private Apps give you a scoped access token with exactly the permissions you specify, without requiring OAuth2 user authorization flows. To create a Private App: log in to HubSpot and go to Settings (gear icon in the top-right navigation). In the Settings sidebar, scroll to Integrations → Private Apps. Click 'Create a private app'. Give your app a descriptive name like 'Lovable CRM Integration'. In the Scopes tab, select the permissions your Edge Functions will need: - For contact management: crm.objects.contacts.read and crm.objects.contacts.write - For company management: crm.objects.companies.read and crm.objects.companies.write - For deals: crm.objects.deals.read and crm.objects.deals.write - For forms/tickets: tickets (if using Service Hub) - For viewing pipeline stages: crm.schemas.contacts.read, crm.schemas.deals.read Select only the scopes you need — the principle of least privilege applies here too. Click 'Create app'. HubSpot will display your access token — a long string starting with 'pat-na1-' or 'pat-eu1-' depending on your data center. Copy it immediately. HubSpot Private App tokens do not expire automatically, but you should rotate them periodically (every 90 days is a good practice). You can regenerate the token in Settings → Private Apps → your app → Auth → Token → Regenerate token.

Store your HubSpot Private App access token in Lovable's Cloud Secrets panel. This token is the equivalent of a password for your HubSpot portal — anyone with the token can read and write CRM data within the scopes you configured. It must stay server-side, never appearing in your React frontend code or Git repository. In Lovable, click the '+' icon at the top of the editor to open the Cloud panel. Click the 'Secrets' tab. Click 'Add new secret'. Name: HUBSPOT_ACCESS_TOKEN Value: your HubSpot Private App access token (the full string starting with 'pat-') Click Save. If you plan to integrate with multiple HubSpot portals (for example, a multi-tenant app where each customer has their own HubSpot), store each token separately: HUBSPOT_TOKEN_CUSTOMER_A, HUBSPOT_TOKEN_CUSTOMER_B. The Edge Function can then select the appropriate token based on the requesting user's tenant. You may also want to add your HubSpot Portal ID as a secret (HUBSPOT_PORTAL_ID) — it is the number visible in your HubSpot URL (e.g., app.hubspot.com/contacts/12345678). Some HubSpot API operations require the portal ID.

Create the Edge Function that creates or updates HubSpot contacts from your Lovable app's forms. The function implements the create-or-update (upsert) pattern: it first tries to create the contact, and if HubSpot returns a 409 conflict (contact already exists with that email), it updates the existing contact instead. HubSpot CRM API v3 uses REST conventions. Contacts are at /crm/v3/objects/contacts. The create endpoint is POST with a 'properties' object containing HubSpot property names (email, firstname, lastname, company, phone, message, etc.). HubSpot property names are lowercase with underscores — 'firstname' not 'firstName', 'lifecyclestage' not 'lifecycleStage'. This trips up many developers. For the upsert pattern, when HubSpot returns 409, the response body includes the existing contact's ID. You then PATCH to /crm/v3/objects/contacts/{contactId} with the updated properties. The code below shows the complete create-or-update pattern. A useful shortcut: HubSpot provides a native upsert endpoint that handles create-or-update automatically. POST to /crm/v3/objects/contacts/upsert with an 'idProperty' of 'email' and the HubSpot API handles the conflict resolution. This is cleaner than the create-then-409-then-update pattern.

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') {
10    return new Response('ok', { headers: corsHeaders })
11  }
12
13  try {
14    const {
15      email,
16      firstName = '',
17      lastName = '',
18      company = '',
19      phone = '',
20      message = '',
21      lifecycleStage = 'lead',
22    } = await req.json()
23
24    const accessToken = Deno.env.get('HUBSPOT_ACCESS_TOKEN')
25    if (!accessToken) {
26      throw new Error('HUBSPOT_ACCESS_TOKEN secret is not configured')
27    }
28
29    if (!email) {
30      return new Response(
31        JSON.stringify({ error: 'email is required' }),
32        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
33      )
34    }
35
36    // Use HubSpot's upsert endpoint for create-or-update by email
37    const payload = {
38      inputs: [
39        {
40          idProperty: 'email',
41          id: email,
42          properties: {
43            email,
44            firstname: firstName,
45            lastname: lastName,
46            company,
47            phone,
48            message,  // Note: 'message' must be a property that exists in your HubSpot portal
49            lifecyclestage: lifecycleStage,
50          },
51        },
52      ],
53    }
54
55    const response = await fetch('https://api.hubapi.com/crm/v3/objects/contacts/upsert', {
56      method: 'POST',
57      headers: {
58        Authorization: `Bearer ${accessToken}`,
59        'Content-Type': 'application/json',
60      },
61      body: JSON.stringify(payload),
62    })
63
64    const data = await response.json()
65
66    if (!response.ok) {
67      throw new Error(`HubSpot API error ${response.status}: ${JSON.stringify(data.message || data)}`)
68    }
69
70    const result = data.results?.[0]
71    return new Response(
72      JSON.stringify({
73        success: true,
74        contactId: result?.id,
75        created: result?.new,
76      }),
77      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
78    )
79  } catch (error) {
80    return new Response(
81      JSON.stringify({ error: error.message }),
82      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
83    )
84  }
85})

Connect the Edge Function to the forms in your Lovable app where lead capture should happen. Common integration points are: contact forms, demo request forms, pricing page CTAs, newsletter signups (when used alongside Mailchimp for the bulk email), and account registration flows. Use supabase.functions.invoke() to call the Edge Function from your React form submission handler. The call should be non-blocking — your form's success flow (showing a thank you message, redirecting to a confirmation page) should not wait for HubSpot sync to complete. Wrap the invoke in a try-catch and continue the flow even if HubSpot sync fails. For forms that collect user data at registration time, add the HubSpot sync call alongside your Supabase Auth createUser call. After Supabase creates the account, call HubSpot in the background to create the CRM contact. This ensures your sales team is notified of every new user without blocking the registration flow. You can also trigger HubSpot contact creation from a Supabase database trigger — when a row is inserted into your users table, a database function calls the HubSpot Edge Function. This pattern works well for capturing contacts from any insertion path, not just your UI forms.

1import { supabase } from '@/lib/supabase'
2
3const syncToHubSpot = async (formData: ContactFormData) => {
4  try {
5    const { error } = await supabase.functions.invoke('hubspot-contact', {
6      body: {
7        email: formData.email,
8        firstName: formData.firstName,
9        lastName: formData.lastName,
10        company: formData.company || '',
11        message: formData.message || '',
12        lifecycleStage: 'lead',
13      },
14    })
15    if (error) console.error('HubSpot sync failed:', error)
16  } catch (err) {
17    // Non-blocking — log but do not disrupt user flow
18    console.error('HubSpot sync error:', err)
19  }
20}
21
22// In your form submit handler:
23const handleSubmit = async (formData: ContactFormData) => {
24  // 1. Primary action: save to Supabase
25  await supabase.from('contact_submissions').insert(formData)
26
27  // 2. Secondary action: sync to HubSpot (non-blocking)
28  syncToHubSpot(formData)  // Note: no await — fire and forget
29
30  // 3. Continue user flow regardless
31  setSubmitted(true)
32}