How to Integrate Lovable with Marketo

In Marketo, navigate to Admin → Users & Roles → Roles and create a new role called 'Lovable API'. Grant this role the minimum permissions your integration needs: Read-Write Lead Database for lead sync, Read-Write Activity for logging activities, and Read-Only for Campaigns if you need campaign membership checks. Avoid granting Admin permissions. Next, go to Admin → LaunchPoint and click New Service. Name it 'Lovable Integration', select 'Custom' as the service type, add an API-only user (create a dedicated API user first under Admin → Users & Roles → Users with a non-human email like api-lovable@yourcompany.com), and assign the Lovable API role. After saving the service, click View Details to see the Client ID and Client Secret for this service. Also find your Munchkin ID in Admin → Munchkin — it looks like 'AAA-BBB-CCC'. You will need all three values: Munchkin ID, Client ID, and Client Secret. Using a dedicated API-only user and role is a security best practice — it limits what the Lovable integration can do if credentials are ever compromised.

In your Lovable project, open the Cloud tab by clicking the plus (+) icon next to the preview. Go to the Secrets section and add three secrets: MARKETO_MUNCHKIN_ID (your Munchkin ID in the format 'AAA-BBB-CCC'), MARKETO_CLIENT_ID (the Client ID from your LaunchPoint service), and MARKETO_CLIENT_SECRET (the Client Secret from your LaunchPoint service). Click Save after each entry. All three values are now encrypted and available only to Edge Functions. The Munchkin ID determines your API base URL. The Client ID and Client Secret are used to obtain OAuth2 access tokens. Access tokens expire after 3,600 seconds (1 hour), so your Edge Function will need to either cache them or re-request them on each invocation. Caching is more efficient — store the token and its expiry in a Supabase table and reuse it until 5 minutes before expiry.

Build the Edge Function that handles Marketo OAuth2 token acquisition and proxies REST API calls. The function has two phases: authentication (request a token from the Marketo identity endpoint using client credentials) and API proxying (use the token to call any Marketo REST endpoint). The Marketo token endpoint is https://{munchkin-id}.mktorest.com/identity/oauth/token?grant_type=client_credentials&client_id={id}&client_secret={secret}. The response includes access_token and expires_in (seconds until expiry). Cache this token in a Supabase table to avoid re-authenticating on every request. After obtaining a token, the proxy accepts a method (GET/POST), endpoint (the Marketo REST path like /rest/v1/leads.json), and optional request body, then forwards the call with the token in the Authorization header.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7}
8
9async function getMarketoToken(munchkinId: string, clientId: string, clientSecret: string, supabase: any): Promise<string> {
10  // Check cached token
11  const { data: cached } = await supabase
12    .from('marketo_token_cache')
13    .select('access_token, expires_at')
14    .eq('munchkin_id', munchkinId)
15    .gt('expires_at', new Date(Date.now() + 300000).toISOString()) // 5 min buffer
16    .single()
17
18  if (cached) return cached.access_token
19
20  // Request new token
21  const tokenUrl = `https://${munchkinId}.mktorest.com/identity/oauth/token?grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`
22  const resp = await fetch(tokenUrl)
23  const data = await resp.json()
24
25  if (!data.access_token) throw new Error(`Marketo auth failed: ${JSON.stringify(data)}`)
26
27  const expiresAt = new Date(Date.now() + data.expires_in * 1000).toISOString()
28  await supabase.from('marketo_token_cache').upsert({
29    munchkin_id: munchkinId,
30    access_token: data.access_token,
31    expires_at: expiresAt,
32  }, { onConflict: 'munchkin_id' })
33
34  return data.access_token
35}
36
37serve(async (req) => {
38  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
39
40  try {
41    const supabase = createClient(
42      Deno.env.get('SUPABASE_URL')!,
43      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!,
44    )
45
46    const munchkinId = Deno.env.get('MARKETO_MUNCHKIN_ID')!
47    const clientId = Deno.env.get('MARKETO_CLIENT_ID')!
48    const clientSecret = Deno.env.get('MARKETO_CLIENT_SECRET')!
49
50    const { method, endpoint, body: requestBody } = await req.json()
51
52    const token = await getMarketoToken(munchkinId, clientId, clientSecret, supabase)
53    const apiBase = `https://${munchkinId}.mktorest.com`
54
55    const response = await fetch(`${apiBase}${endpoint}`, {
56      method: method || 'GET',
57      headers: {
58        'Authorization': `Bearer ${token}`,
59        'Content-Type': 'application/json',
60      },
61      body: requestBody ? JSON.stringify(requestBody) : undefined,
62    })
63
64    const data = await response.json()
65    return new Response(JSON.stringify(data),
66      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } })
67  } catch (error) {
68    return new Response(JSON.stringify({ error: error.message }),
69      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } })
70  }
71})

Munchkin.js is Marketo's behavioral tracking script. When embedded in your app, it automatically tracks page visits, form submissions, and click activity for known leads (leads who have filled out a Marketo form or whose email has been associated with the Munchkin cookie). Add the Munchkin script to your Lovable app's HTML head. In Lovable, go to the project settings or ask Lovable chat to add the Munchkin initialization code to your app's main layout or index.html file. The script loads from https://munchkin.marketo.net/munchkin.js and is initialized with your Munchkin ID. For known leads (users who are logged into your Lovable app and whose email is known), you can call Munchkin.munchkinFunction('associateLead', {'Email': userEmail}) after initialization to associate behavioral tracking with their Marketo lead record. This enables Marketo's behavioral scoring to update based on what authenticated users do in your app.

1// Add to index.html <head> section
2// Replace MUNCHKIN-ID with your actual Munchkin ID
3<script type="text/javascript">
4  (function() {
5    var didInit = false;
6    function initMunchkin() {
7      if(didInit === false) {
8        didInit = true;
9        Munchkin.init('MUNCHKIN-ID');
10      }
11    }
12    var s = document.createElement('script');
13    s.type = 'text/javascript';
14    s.async = true;
15    s.src = '//munchkin.marketo.net/munchkin.js';
16    s.onreadystatechange = function() {
17      if (this.readyState == 'complete' || this.readyState == 'loaded') {
18        initMunchkin();
19      }
20    };
21    s.onload = initMunchkin;
22    document.getElementsByTagName('head')[0].appendChild(s);
23  })();
24</script>

Wire up lead sync so that when a user registers in your Lovable app (via Supabase Auth), their data is automatically synced to Marketo as a lead. Create a Supabase database function or trigger, or more simply, call the marketo-proxy Edge Function from your signup success handler in the frontend. The Marketo endpoint for creating/updating leads is POST /rest/v1/leads.json with a body containing an action ('createOrUpdate') and a lookupField ('email') plus an input array of lead objects. Key fields to include: email (required), firstName, lastName, and any custom fields your Marketo instance uses for lead source tracking. For complex enterprise setups, RapidDev's team can help configure Supabase triggers that automatically sync user records to Marketo without any frontend code changes.

1// In your signup success handler
2const syncToMarketo = async (user: { email: string, firstName: string, lastName: string }) => {
3  try {
4    const { data, error } = await supabase.functions.invoke('marketo-proxy', {
5      body: {
6        method: 'POST',
7        endpoint: '/rest/v1/leads.json',
8        body: {
9          action: 'createOrUpdate',
10          lookupField: 'email',
11          input: [{
12            email: user.email,
13            firstName: user.firstName,
14            lastName: user.lastName,
15            leadSource: 'Lovable App Signup',
16          }],
17        },
18      },
19    })
20    if (error) console.error('Marketo sync failed:', error)
21    else console.log('Lead synced to Marketo:', data)
22  } catch (e) {
23    console.error('Marketo sync error:', e)
24  }
25}