Calendly

This first step sets up the visual booking experience and requires no API key at all. In Calendly, go to the event type you want to embed. Click Share → Embed and select the 'Inline Embed' option. Calendly generates an HTML snippet with a script tag and a div containing a data-url attribute. Copy this entire embed code. In Bubble, open your page in the visual editor. From the element panel on the left, drag an HTML element onto your page and resize it to fit the booking calendar (typically 600-800px tall). Double-click the HTML element to open the content editor. Paste the Calendly embed code. In Bubble's HTML element, you can make the Calendly URL dynamic — for example, if different users have different Calendly links stored in a Bubble data field, bind the data-url attribute to 'Current User's calendly_url' using Bubble's dynamic text syntax within the HTML element. Preview the page to verify the booking calendar renders and is functional — you should see Calendly's calendar UI inside your Bubble page. Note: This embed works on both free and paid Bubble plans, and on free and paid Calendly plans.

1<!-- Paste this into a Bubble HTML Element -->
2<!-- Script loads Calendly's embed library -->
3<link href="https://assets.calendly.com/assets/external/widget.css"
4  rel="stylesheet">
5<script src="https://assets.calendly.com/assets/external/widget.js"
6  type="text/javascript" async></script>
7
8<!-- The booking calendar widget -->
9<div class="calendly-inline-widget"
10  data-url="https://calendly.com/your-username/30min"
11  style="min-width:320px;height:630px;">
12</div>

To use the Calendly REST API (for reading events and registering webhooks programmatically), you need a personal access token — available only on Calendly Professional plan or higher. In Calendly, click your avatar in the top right corner, then click 'Integrations & apps'. Scroll down to find 'API & Webhooks' and click on it. Click 'Personal Access Tokens' and then 'Generate New Token'. Give it a descriptive name like 'Bubble Integration'. Click 'Generate Token' and copy the token immediately — it is shown only once. Store it somewhere safe (a password manager or secure note). This token is used as a Bearer token in the Authorization header of API calls. Also, while you are in this section, stay on this page — you will return here in Step 5 to register the webhook URL.

In Bubble, go to Plugins → API Connector → click 'Add another API'. Name the group 'Calendly API'. Leave the base URL empty (you will enter full URLs in each call). Add a shared header: key = Authorization, value = Bearer YOUR_TOKEN — replace with your actual token and check the Private checkbox. This keeps the token server-side. Now add the first required call: the /users/me endpoint. This call is necessary because all Calendly event queries require a 'user' parameter that is a URI, not an email address. The user URI looks like https://api.calendly.com/users/XXXXXXXX and is not intuitively discoverable without this call. Add a call named 'Get Current User'. Set Method to GET and URL to https://api.calendly.com/users/me. Set 'Use as' to 'Data'. Click 'Initialize call'. After a successful response, Bubble detects fields including 'resource.uri' — the user URI you will store and reuse. Save this URI value; you will use it in the next step as a parameter for event queries. Consider storing it in Bubble's App Data so you only need to fetch it once.

1API Connector Group: Calendly API
2  Base URL: (leave empty)
3  Shared header:
4  - Authorization: Bearer your_personal_access_token  [Private: YES]
5
6Call: Get Current User
7  Method: GET
8  URL: https://api.calendly.com/users/me
9  Use as: Data
10
11Response includes:
12  resource.uri: "https://api.calendly.com/users/XXXXXXXXXXXXXXXX"
13  resource.name: "Your Name"
14  resource.email: "you@example.com"

This is the core of the real-time integration. In Bubble, go to Settings in the left sidebar → click the 'API' tab → check the box 'This app exposes a Workflow API'. This enables the Backend Workflows system. Now go to the Backend Workflows section (appears in the left sidebar under the page list when Backend Workflows are enabled). Click 'New API Workflow' and name it 'Calendly Webhook'. In the workflow settings, check 'This workflow can be run without authentication' — this is required because Calendly's webhook POST has no Bubble auth context. Click 'Detect Request Data' — Bubble will listen for an incoming request on a temporary endpoint. In the next step, you will send a test event from Calendly to trigger this detection. The endpoint URL for your workflow is: https://YOUR-APP-NAME.bubbleapps.io/api/1.1/wf/calendly_webhook — your actual URL is shown above the workflow. Copy it. Note: use the deployed app URL, not the Bubble development mode URL (starting with https://YOUR-APP-NAME.bubbleapps.io/, not the dev.bubble.io URL). Calendly only sends webhooks to HTTPS endpoints, which Bubble's production app provides natively.

1Bubble Backend Workflow endpoint URL pattern:
2https://YOUR-APP-NAME.bubbleapps.io/api/1.1/wf/calendly_webhook
3
4Calendly webhook payload (invitee.created event):
5{
6  "event": "invitee.created",
7  "payload": {
8    "event_type": {
9      "name": "30 Minute Meeting",
10      "slug": "30min"
11    },
12    "scheduled_event": {
13      "start_time": "2026-08-01T14:00:00.000000Z",
14      "end_time": "2026-08-01T14:30:00.000000Z",
15      "location": { "type": "zoom", "join_url": "https://zoom.us/j/..." }
16    },
17    "invitee": {
18      "name": "John Doe",
19      "email": "john@example.com"
20    },
21    "uri": "https://api.calendly.com/scheduled_events/XXXXX/invitees/YYYYY"
22  }
23}

Now connect the two sides. In Calendly, go to Integrations & Apps → API & Webhooks → Webhooks. Click 'New Webhook Subscription'. In the Webhook URL field, paste the Bubble Backend Workflow endpoint URL you copied in the previous step. Select the events you want to receive: check 'invitee.created' (fires when a meeting is booked) and 'invitee.canceled' (fires when cancelled). Select the Calendly organization or user scope. Click 'Create Webhook'. Now send a test booking through your Calendly embed widget (book a test meeting for yourself using a future time slot). Calendly will POST the webhook payload to your Bubble endpoint. In Bubble's Backend Workflow editor, the 'Detect Request Data' screen will show the parsed fields from the incoming payload. Bubble detects: event (the event type string), payload.invitee.name, payload.invitee.email, payload.scheduled_event.start_time, payload.scheduled_event.end_time, and the event URI. After detection is complete, click 'Confirm' — these fields are now available as parameters in your workflow steps. Add workflow steps to process the booking: Create a Thing (Meeting) with the detected name, email, start_time, and any other fields you want to store.

1Calendly Webhook Registration:
2  URL: https://your-app.bubbleapps.io/api/1.1/wf/calendly_webhook
3  Events: invitee.created, invitee.canceled
4  Scope: User (or Organization)
5
6After detection, add workflow steps:
7  Step 1: Create a new Thing (Meeting)
8    → invitee_name: InitiatorWorkflow's payload invitee name
9    → invitee_email: InitiatorWorkflow's payload invitee email
10    → meeting_start: InitiatorWorkflow's payload scheduled_event start_time
11    → meeting_end: InitiatorWorkflow's payload scheduled_event end_time
12    → event_uri: InitiatorWorkflow's payload uri
13    → status: 'Confirmed'
14  Step 2 (optional): Send email notification

For displaying upcoming Calendly events in a Bubble Repeating Group (instead of relying on webhooks), add a REST API call. In the Calendly API group, add a call named 'Get Scheduled Events'. Set Method to GET and URL to https://api.calendly.com/scheduled_events. This endpoint requires the 'user' query parameter set to your Calendly user URI (the value you retrieved in Step 3). Add a parameter: key = user, value = <your_user_uri> — this can be a static value (the URI you stored) or a dynamic parameter. Also add optional parameters: min_start_time (ISO 8601 datetime for the start of the range), max_start_time (end of range), and status (active or canceled). Set 'Use as' to 'Data'. Initialize the call with your user URI and a date range covering the next 7 days. After initialization, Bubble detects the 'collection' array with fields: collection[0].name, collection[0].start_time, collection[0].end_time, collection[0].location.join_url. Bind this to a Repeating Group for the dashboard view. Note: this REST API approach requires polling (re-calling the API on page load or on a schedule) to stay current — the webhook approach is more efficient for real-time updates. RapidDev's team can help you design a hybrid approach that uses webhooks to keep a Bubble database fresh and the API only as a fallback. Book a free scoping call at rapidevelopers.com/contact.

1GET https://api.calendly.com/scheduled_events
2
3Query parameters:
4  user: https://api.calendly.com/users/YOUR_USER_ID  (URL-encoded)
5  min_start_time: 2026-07-10T00:00:00.000000Z
6  max_start_time: 2026-07-17T23:59:59.000000Z
7  status: active
8  count: 20
9  sort: start_time:asc
10
11Response:
12{
13  "collection": [
14    {
15      "uri": "https://api.calendly.com/scheduled_events/XXXXX",
16      "name": "30 Minute Meeting",
17      "start_time": "2026-07-11T14:00:00.000000Z",
18      "end_time": "2026-07-11T14:30:00.000000Z",
19      "location": { "type": "zoom", "join_url": "https://zoom.us/j/..." }
20    }
21  ]
22}