# How to integrate a booking system in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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 code example

File: `Workflow summary`

```text
EXTERNAL BOOKING INTEGRATION
==============================

EMBED:
  HTML element → Calendly/Acuity embed code
  Renders booking widget inside Bubble page

WEBHOOK SYNC:
  Calendly: Integrations → Webhooks → invitee.created
  URL: https://yourapp.bubbleapps.io/api/1.1/wf/booking-webhook
  
  Backend workflow 'booking-webhook':
    - Accept: email, event_name, start_time, end_time
    - No auth required (webhook sender)
    - Create Booking record in Bubble DB
    - Match email to Bubble User
    - Trigger follow-up actions

BOOKING DATA TYPE:
  external_id, user, service_name, start_time, end_time, status

FOLLOW-UP ACTIONS:
  - Send custom welcome email
  - Create preparation task
  - Schedule reminder (1 hour before)
  - Update user status
```

## Common mistakes

- **Not enabling public access on the webhook endpoint** — Calendly and Acuity send webhooks without authentication tokens. If your endpoint requires auth, webhooks fail silently Fix: Check 'This workflow can be run without authentication' on the webhook backend workflow
- **Not matching webhook invitee email to a Bubble User** — Without matching, bookings are stored without a user reference, making it impossible to show bookings on user dashboards Fix: Search for a User with email matching the webhook's invitee email and link the Booking to that User
- **Relying solely on the embed for booking data** — Embed widgets display in the browser but do not automatically sync booking data to your Bubble database Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-a-booking-system-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-a-booking-system-in-bubble