Integrating external booking systems like Calendly or Acuity into Bubble lets you add professional scheduling without building from scratch. This tutorial covers embedding booking widgets using HTML elements, syncing appointment data via API webhooks, displaying upcoming bookings in your Bubble app, and handling booking notifications and follow-up workflows.
Overview: Integrating External Booking Systems in Bubble
This tutorial shows you how to connect external booking tools like Calendly and Acuity Scheduling to your Bubble app using embeds and webhooks for a seamless scheduling experience.
Prerequisites
- A Bubble app on any plan
- A Calendly, Acuity, or similar booking service account
- Backend workflows enabled for webhook handling (optional)
Step-by-step guide
Embed a Calendly booking widget
Embed a Calendly booking widget
Go to Calendly → Event Types → select your event → Share → Embed. Copy the inline embed code. In Bubble, add an HTML element where you want the booking widget to appear. Paste the Calendly embed code. The widget renders inside your Bubble page, allowing users to select times and book appointments without leaving your app. For Acuity, use the same approach with Acuity's embed code from Scheduling Page → Share → Embed Code.
Expected result: A booking widget from Calendly or Acuity appears inside your Bubble page.
Set up webhook to capture booking data
Set up webhook to capture booking data
To sync booking data into your Bubble database, set up a webhook. In Calendly, go to Integrations → Webhooks → Subscribe to events (invitee.created). The webhook URL is your Bubble backend workflow endpoint: https://yourapp.bubbleapps.io/api/1.1/wf/booking-webhook. Create a backend workflow called 'booking-webhook' that accepts the webhook payload parameters: event name, invitee email, start time, end time. Check 'This workflow can be run without authentication' since Calendly sends the webhook automatically.
Expected result: New bookings automatically trigger a Bubble backend workflow with the booking details.
Store and display bookings in Bubble
Store and display bookings in Bubble
Create a Booking Data Type with fields: external_id (text), user (User), service_name (text), start_time (date), end_time (date), status (text). In the booking-webhook workflow, create a Booking record from the webhook data. Match the invitee email to a Bubble User. On the user's dashboard, add a Repeating Group showing their upcoming bookings sorted by start_time ascending, with past bookings filtered out.
Expected result: Bookings made through the external widget appear in the user's Bubble dashboard.
Add follow-up workflows after bookings
Add follow-up workflows after bookings
Use the webhook-triggered workflow to add follow-up actions: send a custom welcome email from Bubble (supplementing Calendly's built-in email), create a preparation task or checklist for the meeting, update the user's status or subscription level, or trigger a reminder workflow 1 hour before the appointment. These Bubble-side workflows let you add business logic on top of the external booking system's basic scheduling functionality.
Pro tip: For complex booking integrations, RapidDev can help connect multiple scheduling tools with custom workflows, CRM updates, and payment processing in your Bubble app.
Expected result: Custom business logic runs automatically after each booking, extending the external tool's capabilities.
Complete working example
1EXTERNAL BOOKING INTEGRATION2==============================34EMBED:5 HTML element → Calendly/Acuity embed code6 Renders booking widget inside Bubble page78WEBHOOK SYNC:9 Calendly: Integrations → Webhooks → invitee.created10 URL: https://yourapp.bubbleapps.io/api/1.1/wf/booking-webhook11 12 Backend workflow 'booking-webhook':13 - Accept: email, event_name, start_time, end_time14 - No auth required (webhook sender)15 - Create Booking record in Bubble DB16 - Match email to Bubble User17 - Trigger follow-up actions1819BOOKING DATA TYPE:20 external_id, user, service_name, start_time, end_time, status2122FOLLOW-UP ACTIONS:23 - Send custom welcome email24 - Create preparation task25 - Schedule reminder (1 hour before)26 - Update user statusCommon mistakes when integrating a booking system in Bubble.io: Step-by-Step Guide
Why it's a problem: Not enabling public access on the webhook endpoint
How to avoid: Check 'This workflow can be run without authentication' on the webhook backend workflow
Why it's a problem: Not matching webhook invitee email to a Bubble User
How to avoid: Search for a User with email matching the webhook's invitee email and link the Booking to that User
Why it's a problem: Relying solely on the embed for booking data
How to avoid: Set up webhooks to capture booking data in your database for display, reporting, and follow-up workflows
Best practices
- Use webhooks to sync booking data into your Bubble database
- Match webhook emails to Bubble Users for personalized dashboards
- Add Bubble-side follow-up workflows for business logic beyond basic scheduling
- Store the external booking ID for reference and potential cancellation API calls
- Test webhooks using the external service's test/sandbox mode
- Display upcoming bookings on user dashboards with countdown timers
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to embed Calendly in my Bubble.io app and sync booking data into my database. Users should see their upcoming appointments on their dashboard. How do I set up the embed and webhook integration?
Embed a Calendly booking widget on my consultation page using an HTML element. Set up a webhook backend workflow that captures new bookings and stores them in a Booking Data Type. Display upcoming bookings on the user dashboard in a Repeating Group.
Frequently asked questions
Which external booking tools work best with Bubble?
Calendly and Acuity Scheduling both offer embed codes and webhooks that integrate well with Bubble. Calendly is simpler; Acuity offers more customization.
Can I customize the look of the embedded booking widget?
Most booking tools offer limited styling options. For full design control, build a native booking system in Bubble instead of using an embed.
Do I need a paid plan on Calendly for webhooks?
Webhooks require Calendly's Professional plan or higher. The free plan supports embeds but not webhook integrations.
Can I cancel bookings from Bubble?
Yes. Use the booking tool's cancellation API endpoint via the API Connector, passing the external booking ID stored in your database.
Can RapidDev help integrate booking systems with Bubble?
Yes. RapidDev can set up complete booking integrations with embeds, webhooks, database sync, follow-up workflows, and payment processing for your Bubble app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation