How to Integrate Lovable with Calendly

Log in to your Calendly account and navigate to the Integrations section. Click 'API & Webhooks' in the left sidebar, or go directly to calendly.com/integrations/api_webhooks. You'll see an option to 'Get a token now' under the Personal Access Tokens section. Click 'Generate New Token', give it a descriptive name like 'Lovable Integration', and click 'Create Token'. Copy the token immediately — Calendly shows it only once. Personal Access Tokens begin with 'eyJ' (they are JWT-formatted). Calendly also offers OAuth2 for multi-user apps where different users connect their own Calendly accounts. For apps where only the app owner's Calendly is connected, a Personal Access Token is simpler. If you're building a product where multiple customers connect their own Calendly accounts, use OAuth2 — but this requires a more complex setup including a Calendly OAuth app configuration. For initial development, use a Personal Access Token. Note your Calendly user URI by calling GET https://api.calendly.com/users/me with the Authorization: Bearer {token} header — you'll need your user URI (format: https://api.calendly.com/users/XXXXXXXX) to filter API calls to your own events.

The fastest way to get Calendly working in Lovable is the inline widget — no API needed. Calendly provides a JavaScript widget that renders their full booking UI within a div in your React component. Ask Lovable to add the Calendly inline widget to your page using the standard embed method. The Calendly inline widget requires loading a script tag and initializing the widget on a target element. In React, you load the Calendly script using useEffect and initialize the widget with window.Calendly.initInlineWidget(). The widget emits a browser event ('calendly.event_scheduled') when a meeting is booked — you can listen for this to trigger post-booking actions in Lovable without needing the webhook. To pass prefilled information (the user's name and email if they're logged into your Lovable app) to the Calendly booking form, use the prefill parameter in the widget initialization. This auto-populates the name and email fields so the user doesn't have to re-enter them. The inline widget is the right choice when you want zero API configuration and are happy with Calendly's booking UI design. Use the API approach when you need custom scheduling UI or want to display Calendly data (event types, upcoming meetings) in your own component design.

For reading Calendly data (upcoming events, event types, invitee information) in your own component designs, create an Edge Function that calls the Calendly v2 API. Store your Personal Access Token in Cloud Secrets as CALENDLY_ACCESS_TOKEN. Calendly's v2 API uses Bearer token authentication. All API calls include 'Authorization: Bearer {token}' in the request headers. The base URL is https://api.calendly.com. Key API calls for most Lovable use cases: GET /users/me to get your user URI and organization URI (needed for filtering other calls), GET /event_types?user={user_uri} to list your event types with their scheduling URLs, GET /scheduled_events?user={user_uri}&min_start_time={ISO8601} to list upcoming meetings, and GET /scheduled_events/{uuid}/invitees to get invitee details for a specific event. Calendly's API uses UUID-based resource identifiers embedded in full URLs (like https://api.calendly.com/scheduled_events/XXXXXXXX). When filtering event invitees or referencing specific events in subsequent calls, extract the UUID from the last segment of these URLs.

1// supabase/functions/calendly-api/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const corsHeaders = {
5  "Access-Control-Allow-Origin": "*",
6  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
7  "Access-Control-Allow-Methods": "POST, OPTIONS",
8};
9
10let cachedUserUri: string | null = null;
11
12serve(async (req: Request) => {
13  if (req.method === "OPTIONS") {
14    return new Response("ok", { headers: corsHeaders });
15  }
16
17  try {
18    const token = Deno.env.get("CALENDLY_ACCESS_TOKEN");
19    const headers = { "Authorization": `Bearer ${token}`, "Content-Type": "application/json" };
20
21    const { operation, ...params } = await req.json();
22
23    if (!cachedUserUri || operation === "getMe") {
24      const meRes = await fetch("https://api.calendly.com/users/me", { headers });
25      const meData = await meRes.json();
26      cachedUserUri = meData.resource?.uri;
27    }
28
29    let data;
30    if (operation === "getMe") {
31      data = { userUri: cachedUserUri };
32    } else if (operation === "getEventTypes") {
33      const res = await fetch(`https://api.calendly.com/event_types?user=${cachedUserUri}&active=true`, { headers });
34      data = await res.json();
35    } else if (operation === "getScheduledEvents") {
36      const qp = new URLSearchParams({ user: cachedUserUri || "", min_start_time: params.minStartTime, status: params.status || "active" });
37      if (params.maxStartTime) qp.set("max_start_time", params.maxStartTime);
38      const res = await fetch(`https://api.calendly.com/scheduled_events?${qp}`, { headers });
39      data = await res.json();
40    } else if (operation === "getInvitees") {
41      const res = await fetch(`https://api.calendly.com/scheduled_events/${params.eventUuid}/invitees`, { headers });
42      data = await res.json();
43    }
44
45    return new Response(JSON.stringify(data), { status: 200, headers: { ...corsHeaders, "Content-Type": "application/json" } });
46  } catch (error) {
47    return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
48  }
49});

With the Edge Function working, open Lovable chat and describe the meeting dashboard UI. Provide the Calendly event object structure so Lovable generates correct field access code. Calendly scheduled event objects include: uri (full event URI), name (event type name), status (active or canceled), start_time and end_time (ISO 8601 strings), event_memberships (array with user URIs of event hosts), location (object with type like InboundCall, GoToMeeting, Zoom, etc., and join_url for video calls), and meeting_notes_link. For each event, the invitees are a separate API call to /scheduled_events/{uuid}/invitees. Each invitee has: name, email, status (active or canceled), questions_and_answers (array of form responses), and cancel_url/reschedule_url (links invitees can use to self-service). For a meeting dashboard, the most useful display combines: today's and tomorrow's events in timeline order, event type name and duration, primary invitee name and email, meeting join URL (if video), and a cancel/reschedule link for each event.

Calendly webhooks require a paid plan (Professional or Teams) and are configured either in Calendly's settings or via the API. Webhooks let your Lovable Edge Function receive real-time notifications when meetings are booked, cancelled, or rescheduled — enabling automation without polling. Calendly webhook events: invitee.created (new meeting booked), invitee.canceled (meeting cancelled by invitee). The webhook payload includes the full event and invitee data in the body. To create a webhook via the Calendly API: POST to https://api.calendly.com/webhook_subscriptions with scope='user', organization (your org URI), user (your user URI), url (your Edge Function URL), events array (['invitee.created', 'invitee.canceled']). Calendly does not sign webhooks with an HMAC secret, so validate a signing_key you generate yourself by including a secret parameter in the webhook URL. The most valuable webhook use case in Lovable is storing booking data in Supabase when a meeting is booked — this creates a permanent record that survives Calendly data retention limits and enables your Lovable app to query meeting history without hitting the Calendly API on every page load.