Add the Cal.com Flow Embed element to any page where you want to show a Cal.com scheduler.
Enter a full Cal.com booking link, such as https://cal.com/username/event-name. Choose a theme, minimum height, frame styling, and optional floating booking button settings.

Use the prefill fields to pass attendee details into Cal.com, such as name, email, phone, and notes. Use metadata fields to pass hidden Bubble context, such as user ID, plan, listing ID, source page, or company ID. Use UTM fields to track campaign source, medium, and campaign.

The element exposes booking states such as Booking UID, Booking Title, Booking Start Time, Booking End Time, Booking Status, Booking Event Type ID, Payment Required, and Last Event JSON. Use the Booking Successful event to run Bubble workflows after a user completes a booking.

Use the Open Booking Modal action to launch a Cal.com booking popup from a Bubble workflow. Use Close Booking Modal to attempt to close the modal, and Refresh Embed to reload the inline scheduler.

To use API actions, add your Cal.com API key in the plugin settings. The key should be entered as a bearer token, for example Bearer cal_xxxxxxxxx. API actions include Get Booking, Get All Bookings, Cancel Booking, Request Reschedule, Get Event Types, Get Event Type, Get Availability, List Webhooks, Create Webhook, Get Webhook, and Delete Webhook.

Use Get All Bookings to fetch a paginated list of bookings. The status field supports values such as upcoming,recurring,past,cancelled,unconfirmed. Use take and skip for pagination.

Use Get Availability to check open slots for an event type. Pass the Cal.com event type ID, start date, end date, and optional time zone.

To receive Cal.com webhooks in Bubble, create a backend workflow in your Bubble app and copy its public endpoint URL. Use Create Webhook with that URL as the subscriber URL. Choose a trigger such as BOOKING_CREATED, BOOKING_RESCHEDULED, BOOKING_CANCELLED, BOOKING_REQUESTED, BOOKING_REJECTED, BOOKING_PAID, MEETING_STARTED, or MEETING_ENDED. You can set an optional secret and store it in Bubble for verification.

You can also create webhooks directly in Cal.com and point them to your Bubble backend workflow URL. Use List Webhooks, Get Webhook, and Delete Webhook to manage webhook subscriptions from Bubble workflows.

Before publishing your Bubble plugin, remove any real Cal.com API key used for testing. App builders should enter their own Cal.com API key in their app’s plugin settings.