How to Integrate Lovable with HubSpot Marketing Hub

HubSpot Private Apps are the recommended authentication method for server-to-server integrations. For Marketing Hub operations, you need specific scopes beyond the basic CRM scopes. In HubSpot, go to Settings (gear icon) → Integrations → Private Apps. Click 'Create a private app'. Name it 'Lovable Marketing Hub Integration'. In the Scopes tab, select the Marketing Hub-specific scopes you need: - For email campaign data: marketing-email (read email send/engagement data) - For form submissions: forms (submit data to HubSpot forms, read form definitions) - For workflow enrollment: automation (read/write workflow enrollments) - For analytics data: marketing-analytics (access campaign analytics and reports) - Also include CRM scopes if you need contact data alongside marketing data: crm.objects.contacts.read Note: Marketing Hub scopes are separate from CRM scopes. A token with only CRM scopes cannot access email campaign data, and vice versa. If you already have a CRM Private App, either add marketing scopes to the existing app or create a second app dedicated to marketing operations. After selecting scopes, click 'Create app'. Copy the access token (starts with 'pat-'). Also note your Portal ID — found in your HubSpot URL when logged in (the 8-digit number in app.hubspot.com/contacts/XXXXXXXX). Different Marketing Hub features require different plan levels. The Forms API works on free accounts. Email campaign analytics require at least Marketing Hub Starter. Marketing automation workflows with email sends require Marketing Hub Professional ($800/month) or higher.

Add HubSpot Marketing credentials to Lovable Cloud Secrets. In Lovable, click '+' → Cloud panel → Secrets. Add: - HUBSPOT_ACCESS_TOKEN — the Private App access token from the previous step (this can be shared with the CRM integration token if you added marketing scopes to the same app) - HUBSPOT_PORTAL_ID — your 8-digit HubSpot Portal ID For form submission integration, you also need your HubSpot form GUID. HubSpot Forms are identified by a GUID (a UUID like 'a1b2c3d4-5678-...'). To find it: 1. In HubSpot, go to Marketing → Lead Capture → Forms 2. Click on the form you want to submit to 3. In the form editor, click 'Actions' → 'Embed' or look at the form URL in your browser — the GUID is in the URL 4. Alternatively, use the HubSpot Forms API: GET https://api.hubapi.com/marketing/v3/forms will list all forms with their GUIDs Store frequently-used form GUIDs as secrets (HUBSPOT_FORM_GUID_LEAD_MAGNET, HUBSPOT_FORM_GUID_DEMO_REQUEST) for easy reference in Edge Functions. Note: The HubSpot Forms submission API v3 uses a different endpoint structure than the legacy v2 API. Use the v3 endpoint: POST https://api.hubspot.com/marketing/v3/forms/{formId}/submissions.

Build the Edge Function that handles Marketing Hub operations: form submissions, email campaign stats, and contact marketing properties. The Edge Function uses the same Authentication pattern as the CRM integration (Bearer token with the Private App access token) but calls different API endpoints. HubSpot Marketing Hub key API endpoints: - Forms submission: POST https://api.hubspot.com/marketing/v3/forms/{formId}/submissions - List forms: GET https://api.hubapi.com/marketing/v3/forms - Email campaign list: GET https://api.hubapi.com/marketing-emails/v1/emails - Email campaign statistics: GET https://api.hubapi.com/marketing-emails/v1/emails/{emailId}/statistics - Marketing analytics: GET https://api.hubapi.com/analytics/v2/reports/{reportId} For form submissions, the v3 API accepts a 'fields' array of { name, value } objects. The field names must match the HubSpot form field internal names (not display labels). Use GET /marketing/v3/forms/{formId} to retrieve the form definition and check field names before building the submission payload. For email campaign statistics, the v1 email statistics endpoint returns per-campaign metrics: sentAt, counters.sent, counters.open, counters.click, ratios.open (as decimal), ratios.click. Note these are returned as decimals (0.24 for 24% open rate), not percentages. For tracking utm parameters and lead sources from Lovable form submissions, include the pageUri and pageName in the form submission context object — HubSpot uses these for source attribution.

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 HS_BASE = 'https://api.hubapi.com'
9
10async function hsFetch(path: string, method = 'GET', body?: unknown) {
11  const token = Deno.env.get('HUBSPOT_ACCESS_TOKEN')
12  if (!token) throw new Error('HUBSPOT_ACCESS_TOKEN not configured')
13  const resp = await fetch(`${HS_BASE}${path}`, {
14    method,
15    headers: {
16      Authorization: `Bearer ${token}`,
17      'Content-Type': 'application/json',
18    },
19    body: body ? JSON.stringify(body) : undefined,
20  })
21  return resp.json()
22}
23
24serve(async (req) => {
25  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
26
27  try {
28    const { action, params = {} } = await req.json()
29    const portalId = Deno.env.get('HUBSPOT_PORTAL_ID')
30    let result
31
32    switch (action) {
33      case 'submit_form':
34        // HubSpot Forms API v3
35        result = await hsFetch(`/marketing/v3/forms/${params.formId}/submissions`, 'POST', {
36          portalId: parseInt(portalId || '0'),
37          fields: params.fields, // [{ name: 'email', value: '...' }, ...]
38          context: {
39            pageUri: params.pageUri || '',
40            pageName: params.pageName || '',
41            hutk: params.hutk || '',
42          },
43        })
44        break
45
46      case 'list_campaigns':
47        result = await hsFetch(`/marketing-emails/v1/emails?limit=${params.limit || 20}&offset=${params.offset || 0}&orderBy=-stats.counters.sent`)
48        break
49
50      case 'get_campaign_stats':
51        result = await hsFetch(`/marketing-emails/v1/emails/${params.emailId}/statistics`)
52        break
53
54      case 'get_contact_marketing_props':
55        result = await hsFetch(`/crm/v3/objects/contacts/${params.contactId}?properties=email,hs_email_last_open_date,hs_email_last_click_date,lifecyclestage,hs_analytics_source`)
56        break
57
58      default:
59        return new Response(JSON.stringify({ error: 'Unknown action' }), {
60          status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
61        })
62    }
63
64    return new Response(JSON.stringify(result), {
65      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
66    })
67  } catch (error) {
68    return new Response(JSON.stringify({ error: error.message }), {
69      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
70    })
71  }
72})

With the Edge Function deployed, build the marketing performance dashboard and wire form submissions to trigger HubSpot workflows. For the marketing dashboard, call list_campaigns on mount to get recent email sends, then display campaigns in a table with performance metrics. Convert HubSpot's decimal open/click rates to percentages (multiply by 100) before displaying. Add trend indicators comparing the last 5 campaigns' performance. For connecting Lovable forms to HubSpot workflows, use the submit_form action after any form submission where you want a HubSpot workflow to trigger. The form submission not only captures data in HubSpot but also enrolls the contact in associated email sequences. Pass the field values as an array: [{ name: 'email', value: form.email }, { name: 'firstname', value: form.firstName }]. Field names must match the HubSpot form field internal names — check these in HubSpot → Marketing → Forms → edit form → field settings. For lead magnet forms, also pass the pageUri and pageName context fields so HubSpot correctly attributes the submission to the right page in your analytics. This data appears in the contact's 'First page seen' and 'Last page seen' properties. For complex marketing automation scenarios such as triggering HubSpot workflows directly via the Workflow Enrollments API or building multi-step nurture sequences, RapidDev's team can help design the correct API architecture.