How to Integrate Calendly with Bubble

What Calendly Integration Does for Your Bubble App

Calendly handles scheduling — letting people book time on your calendar based on your availability. When you integrate it with Bubble, you're not just embedding a scheduling widget. You're connecting the booking data to your Bubble database so you can build workflows around appointments: send prep materials before a call, update a CRM record, trigger a follow-up sequence after the meeting, or display upcoming appointments in your app's dashboard.

The integration has two sides. The front-end side is the Calendly widget embedded in your Bubble app where users select a time. The back-end side is the webhook and API connection that sends booking data from Calendly into your Bubble database. Both matter, but the back-end connection is where the real value lives.

Use Cases for Calendly in Bubble

The most common use case is a service marketplace. You're building a platform where users book appointments with providers — consultants, coaches, tutors, therapists. Each provider connects their Calendly account, and your Bubble app embeds their scheduling pages. When a booking happens, Calendly sends the data to Bubble, where you create the appointment record, charge the client, and notify the provider.

The second use case is a SaaS product with a sales-led or onboarding flow. Your Bubble app has a "Book a Demo" or "Schedule Onboarding" button that opens Calendly. When the prospect books, the meeting details flow into your Bubble database and update your pipeline. You can auto-assign the meeting to the right team member based on the prospect's plan type or company size.

The third use case is internal tooling. You're building an operations dashboard in Bubble for your team. Calendly handles the scheduling logic (availability rules, timezone conversion, calendar conflicts), and Bubble handles everything else — displaying the team's schedule, tracking appointment outcomes, generating reports on booking rates.

Embedding the Calendly Widget in Bubble

Calendly offers three embed styles: inline (embedded directly in the page), popup widget (triggered by a button click), and popup text (a text link that opens the scheduler). For Bubble, the inline embed works best for dedicated scheduling pages, while the popup widget works well for CTAs throughout your app.

For an inline embed, add an HTML element to your Bubble page with Calendly's embed code. The embed code is a div with a data-url attribute pointing to your Calendly scheduling page URL, plus a script tag that loads Calendly's widget JavaScript. You can set the height and width through the HTML element's dimensions in Bubble.

For a popup widget, use a Bubble button with a workflow that runs JavaScript (via the Toolbox plugin) to trigger Calendly.initPopupWidget with your scheduling URL. This opens Calendly's scheduler in a modal overlay without navigating away from your Bubble page.

To pre-fill the booking form with the current Bubble user's data, append query parameters to the Calendly URL. Add parameters like name, email, and any custom questions you've configured in Calendly. This saves users from re-entering information your Bubble app already has. Use Bubble's dynamic data to populate these parameters in the embed code.

Receiving Booking Data via Webhooks

The real integration happens through Calendly's webhooks. When someone books, reschedules, or cancels an appointment, Calendly sends a POST request to a URL you specify. In Bubble, this URL is a Backend Workflow API endpoint.

Set up a Backend Workflow in Bubble that accepts Calendly's webhook payload. Enable the Backend API in Bubble's Settings, then API tab. Create a new API workflow and note its URL. In Calendly's developer dashboard, create a webhook subscription pointing to your Bubble workflow URL, subscribing to invitee.created, invitee.canceled, and routing_form_submission.completed events.

When Calendly sends the webhook, it includes the event URI but not the full event details. You need to make a follow-up API call to Calendly's API to get the complete booking information — the event time, attendee email, answers to custom questions, and the meeting location. Create an API Connector call to Calendly's REST API with your Personal Access Token as a Bearer token. Call the event URI returned in the webhook to get full event details.

Parse the response and create or update records in your Bubble database. A typical flow creates a "Booking" data type with fields for event_time, attendee_email, attendee_name, event_type, calendly_event_id, status, and any custom fields. When a cancellation webhook arrives, find the booking by calendly_event_id and update its status.

Using Calendly's REST API from Bubble

Beyond webhooks, Calendly's API lets you programmatically manage scheduling from Bubble. The API Connector setup uses base URL https://api.calendly.com with your Personal Access Token as a Bearer token in the Authorization header.

Key API calls for Bubble apps include listing a user's event types (GET /event_types) to display available booking options, listing scheduled events (GET /scheduled_events) to show upcoming appointments in your Bubble app, and checking a user's availability (GET /user_availability_schedules) to display open slots without embedding the full Calendly widget.

For marketplace apps where multiple providers each have their own Calendly accounts, you'll use Calendly's OAuth flow instead of a single Personal Access Token. Each provider authorizes your Bubble app to access their Calendly account through an OAuth consent flow, and you store their individual access tokens in your Bubble database. This is significantly more complex but necessary for multi-user scheduling platforms.

Common Pitfalls

The most common issue is webhook reliability. Calendly sends webhooks immediately when events occur, but if your Bubble app is slow to respond (backend workflow takes too long) or returns an error, Calendly retries with exponential backoff but eventually gives up. Make your webhook handler workflow as lean as possible — receive the data, save it to the database, and return a 200 response. Do any complex processing in a separate scheduled workflow.

Timezone handling is another pain point. Calendly sends all times in UTC. Your Bubble app might display times in the user's local timezone. Make sure you're converting correctly and consistently. Store all times in UTC in your Bubble database and convert to local time only at display time using Bubble's date formatting options.

The webhook payload limitation catches many builders. Calendly's webhook only sends a reference URI, not the full event data. If you try to parse the webhook payload expecting attendee details and event times, you'll find most fields missing. You must make a follow-up API call to the URI in the payload to get the complete data. Budget an extra API Connector call in your webhook handler workflow.

Embed styling conflicts also come up frequently. Calendly's inline widget has its own CSS that can clash with your Bubble app's styling. The widget renders inside an iframe, which helps with isolation, but sizing issues (the widget being too short and showing scrollbars, or too tall with extra white space) require adjusting the HTML element dimensions. Calendly offers a resize helper script, but it doesn't always work perfectly in Bubble's responsive engine.

DIY vs Hiring a Bubble Developer

Embedding the Calendly widget takes about an hour. Setting up webhooks to receive booking data takes half a day. Building a full integration with follow-up API calls, booking management in your Bubble database, and automated workflows around appointments takes two to four days. If you're building a marketplace with multiple provider Calendly accounts using OAuth, add another week for the OAuth flow and multi-account management.

The webhook-to-API-call pattern (receive webhook, call API for full data, save to database) is a Bubble pattern you'll use with many integrations, so learning it with Calendly is a good investment. But if scheduling is core to your product and you need it working reliably on day one, an experienced Bubble developer can ship the full integration while you focus on other parts of your product.

Automate Your Scheduling Workflow

Related guides:

• how to build a telemedicine app with Bubble

• how to build a hr tool with Bubble

Calendly handles the scheduling UX that users already know and trust. Your Bubble app handles everything before and after the booking. Together, they create a seamless experience from booking to follow-up. Talk to our team at Goodspeed Studio about building scheduling into your Bubble product.