How to Build a Booking and Appointment App in Bubble.io
Booking apps are one of Bubble’s most common use cases. Complete data model, availability checking logic, deposit-taking via Stripe, and an embeddable booking widget that clients access directly from your website without login required.
One of Bubble’s Most Common and Most Useful Use Cases
Booking and appointment scheduling applications are among the most common Bubble builds. Salons, clinics, consultants, coaches, tutors, gyms, and any service business with a calendar needs a booking system. Tools like Calendly and Acuity exist, but they lack customisation, charge per-seat fees, and cannot be integrated into a larger custom application. A Bubble booking system is yours: custom logic, custom branding, custom data integration, and no per-booking fees.
What Every Appointment System Needs
Provider
user
-> User
service_name
text (e.g. ‘Hair Colour’, ’60-min Massage’)
duration_minutes
number
price
number
buffer_minutes
number (gap between appointments)
Availability
provider
-> Provider
day_of_week
option set (Mon-Sun)
start_time, end_time
text (’09:00′, ’17:00′)
is_available
yes/no
Appointment
provider
-> Provider
client
-> User (or guest name/email for non-registered)
service
-> Service
starts_at, ends_at
date
status
option set (Pending/Confirmed/Cancelled/Completed)
stripe_pi_id
text (if deposit or prepayment taken)
notes
text (client instructions)
The Core Logic
// Check 1: Is provider working that day?
Availability [provider=X, day=selected date’s day of week, is_available=yes]:count > 0
// Check 2: Is the slot free? (no overlapping appointments)
Search for Appointments [
provider = X,
status is not Cancelled,
starts_at < selected_time + service duration,
ends_at > selected_time
] : count = 0
// If both checks pass: slot is available
// Create appointment + send confirmation email
The Feature That Closes Sales
Build a public-facing booking page in Bubble that clients can access without logging in. This page: shows available time slots for the current week, lets clients select a service and preferred time, collects name, email, and phone, takes a deposit via Stripe Checkout, and creates the Appointment record.
This booking page URL can be shared as a link or embedded as an iframe on any website. A clinic that can say ‘patients can book directly from our website, 24/7, without calling’ is demonstrating immediate value. This single feature justifies the subscription for most service businesses.
Q: How do I handle time zones in Bubble booking apps?
Store all appointment times in UTC. Display them converted to the provider’s local time for the provider view, and in the client’s detected browser timezone for the client view. Bubble’s date expressions support timezone conversion. Never store appointment times in local time directly.
Q: Can I take a deposit at booking?
Yes. Add a Stripe Checkout step before the appointment is confirmed. Use metadata[appointment_id] to link the payment to the appointment record. Confirm the appointment only in the checkout.completed webhook. Fully refund the deposit when the provider cancels; partially refund when the client cancels within the policy window.
Q: How do I handle recurring appointments?
Create a RecurringSchedule data type: client, provider, day_of_week, time, frequency (weekly/fortnightly). A scheduled backend workflow runs weekly and creates Appointment records from active RecurringSchedule records for the coming week. Cancelling a recurring schedule stops the creation of future appointments.
Build Your Bubble.io App With Expert Help
Pakistan’s leading Bubble.io development team. Multi-tenant SaaS architecture, Stripe billing, and full product builds done right from day one.
