An appointment booking system in Bubble requires Data Types for service providers, time slots, and bookings, plus workflows for availability checking, conflict detection, and confirmation emails. This tutorial covers the complete system from displaying available slots to handling cancellations and rescheduling.
Overview: Building an Appointment Booking System in Bubble
Appointment booking is one of the most requested features in Bubble apps — from salon bookings to consulting calls to medical appointments. This tutorial covers a complete booking system with time slot management, conflict prevention, email confirmations, and cancellation handling.
Prerequisites
- A Bubble app with user registration
- Basic understanding of Data Types and workflows
- Familiarity with Repeating Groups and date/time handling
Step-by-step guide
Create the booking Data Types
Create the booking Data Types
Go to the Data tab and create these types. Provider: name (text), email (text), specialty (text), user_account (User). TimeSlot: provider (Provider), start_time (date), end_time (date), is_available (yes/no, default: yes), day_of_week (number). Booking: provider (Provider), client (User), time_slot (TimeSlot), date (date), status (Option Set: Pending, Confirmed, Cancelled, Completed), notes (text), Created Date (auto).
Expected result: Data structure supporting providers, time slots, and bookings with status tracking.
Set up provider availability
Set up provider availability
Create an admin page where providers set their availability. Add a Repeating Group showing days of the week (Monday through Sunday from an Option Set). For each day, add start and end time pickers. When saved, create TimeSlot records for each available block. For example, if a provider is available Monday 9AM-5PM with 30-minute slots, create TimeSlot records for 9:00, 9:30, 10:00, etc.
Pro tip: Generate time slots using a backend workflow that loops through the time range creating slots at your interval (30 min, 60 min, etc.).
Expected result: Providers have configured their weekly availability as individual time slot records.
Build the booking selection interface
Build the booking selection interface
Create a booking page. Add a date picker for the client to select a date. Add a Repeating Group below it showing TimeSlots where provider = selected provider AND day_of_week = selected date's day AND is_available = yes. Exclude slots that already have a Booking with status not Cancelled on the selected date. Each cell shows the start time and a Book button.
Expected result: Clients see available time slots for their selected date with the option to book.
Create the booking workflow with conflict detection
Create the booking workflow with conflict detection
When the Book button is clicked, first check for conflicts: Do a Search for Bookings where provider = this provider AND date = selected date AND time_slot = this slot AND status is not Cancelled. If the count is 0 (no conflict), create a new Booking record with status Pending. Send a confirmation email to both the client and provider. If a conflict exists, show an alert that the slot is no longer available.
Expected result: Bookings are created only when no conflict exists, with email confirmations sent to both parties.
Handle cancellations and rescheduling
Handle cancellations and rescheduling
On a My Bookings page, show the user's upcoming bookings in a Repeating Group filtered to status = Confirmed AND date >= Current date/time. Add a Cancel button that sets the booking status to Cancelled. Optionally add a minimum cancellation window (e.g., 24 hours before the appointment). For rescheduling, cancel the current booking and redirect to the booking page to select a new slot.
Expected result: Clients can view, cancel, and reschedule their appointments with proper status tracking.
Add reminder notifications
Add reminder notifications
Create a backend workflow called send-reminder that takes a Booking as a parameter. It sends an email to the client with the appointment details. Schedule this workflow when a booking is created, set to run 24 hours before the appointment time. This ensures clients receive automatic reminders.
Expected result: Clients receive automatic email reminders 24 hours before their appointment.
Complete working example
1BOOKING SYSTEM SUMMARY2=======================34DATA TYPES:5 Provider: name, email, specialty, user_account (User)6 TimeSlot: provider, start_time (date), end_time (date), is_available, day_of_week7 Booking: provider, client (User), time_slot, date, status (Pending/Confirmed/Cancelled/Completed), notes89BOOKING WORKFLOW:10 1. Client selects date and time slot11 2. Check conflicts: Search Bookings (same provider, date, slot, status ≠ Cancelled)12 3. If count = 0:13 a. Create Booking (status: Confirmed)14 b. Send email to client + provider15 c. Schedule reminder: send-reminder in (date - 24 hours)16 4. If count > 0:17 → Alert: "This slot is no longer available"1819CANCELLATION:20 Condition: Only when Booking's date > Current date/time +(hours): 2421 Action: Make Changes to Booking → status = Cancelled22 Action: Send cancellation email2324AVAILABILITY DISPLAY:25 RG Source: Search TimeSlots26 → provider = selected provider27 → day_of_week = DatePicker's value's day of week28 → is_available = yes29 Filter out: slots with existing non-cancelled bookings on selected dateCommon mistakes when building appointment booking in Bubble
Why it's a problem: Not checking for double bookings before creating
How to avoid: Always search for existing bookings on the same slot and date before creating a new one
Why it's a problem: Using only is_available on TimeSlot without checking actual bookings
How to avoid: Check both the TimeSlot availability AND search for existing Bookings on the specific date
Why it's a problem: Not handling timezone differences for appointment times
How to avoid: Store all times in UTC and clearly display the timezone on the booking confirmation
Best practices
- Always check for conflicts before creating a booking to prevent double-booking
- Send confirmation emails to both client and provider immediately after booking
- Implement a cancellation window (e.g., 24 hours) to prevent last-minute cancellations
- Schedule automatic reminders 24 hours before appointments
- Store booking status as an Option Set for easy filtering and reporting
- Display timezone information clearly if providers and clients may be in different zones
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to build an appointment booking system in Bubble.io with provider availability, time slot selection, conflict detection, confirmation emails, and cancellation handling. Can you walk me through the data structure and key workflows?
Build an appointment booking system for my app. I need providers to set their weekly availability, clients to select and book time slots, conflict prevention, email confirmations, and cancellation with a 24-hour minimum notice.
Frequently asked questions
How do I handle recurring appointments?
When creating a booking, offer a recurrence option (weekly, biweekly, monthly). Use a backend workflow to create multiple Booking records for future dates based on the recurrence pattern.
Can I integrate with Google Calendar?
Yes. Use the API Connector to call the Google Calendar API when bookings are created or cancelled. This syncs appointments with the provider's Google Calendar.
How do I handle different appointment durations?
Add a duration field to the booking type or service type. Generate time slots based on the duration (30-min slots, 60-min slots, etc.) and block adjacent slots when longer appointments are booked.
Can I add payment for bookings?
Yes. Add Stripe Checkout before confirming the booking. Only create the Booking record after successful payment via a Stripe webhook.
How do I prevent no-shows?
Require a deposit via Stripe at booking time. Send reminders at 24 hours and 1 hour before. Track no-shows in a field on the User type for repeat offenders.
What if I need a more complex scheduling system?
For multi-provider scheduling with resource constraints, buffer times, or advanced recurrence, RapidDev can help design and build enterprise-grade booking systems in Bubble.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation