Skip to main content
The Booker Embed atom lets you integrate your Cal.com booking page on your website. It’s perfect for those who want to add their booking link to their own site, blog, or app. Attendees would directly see your booking link inside your own webpage like it’s part of your website. You can also heavily customize the embed styling. Using the embed, the entire booking would happen on your website, making it a seamless end-user experience. Below code snippet can be used to render the Booker Embed atom 
import { BookerEmbed } from "@calcom/atoms";

export default function BookerEmbedPage(props: BookerProps) {
  return (
    <>
      <BookerEmbed
        eventSlug={props.eventTypeSlug}
        username={props.calUsername}
        onCreateBookingSuccess={() => {
          console.log("Booking created successfully!");
        }}
        defaultFormValues={{ name: " ", email: " " }}
      />
    </>
  );
}
For a demonstration of the Booker Embed atom, please refer to the video below.

It is also possible to change the booker layout into a week or column view, you just need to pass in the view prop the layout you want to use. The layouts are as follows: MONTH_VIEW, WEEK_VIEW and COLUMN_VIEW. Below code snippet can be used to render the Booker Embed atom with week view 
import { BookerEmbed } from "@calcom/atoms";

export default function BookerEmbed(props: BookerProps) {
  return (
    <>
      <BookerEmbed
        view="WEEK_VIEW"
        eventSlug={props.eventTypeSlug}
        username={props.calUsername}
        onCreateBookingSuccess={() => {
          console.log("Booking created successfully!");
        }}
        defaultFormValues={{ name: " ", email: " " }}
      />
    </>
  );
}
For a demonstration of the Booker Embed atom along with week view, please refer to the video below.

For team events, you need to pass isTeamEvent and teamId prop to the booker along with the other necessary props. The teamId is the ID of the team that owns the event type. Here is an example of how to use the Booker Embed atom for a team event: 
import { BookerEmbed } from "@calcom/atoms";

export default function BookerEmbed( props : BookerEmbedProps ) {
  return (
    <>
      <BookerEmbed
        eventSlug={props.eventTypeSlug}
        isTeamEvent={true}
        teamId={props.teamId}
        onCreateBookingSuccess={() => {
          console.log("Booking created successfully!");
         }}
      />
    </>
  )
}
We offer all kinds of customizations to the Booker Embed atom via props and customClassNames. Below is a list of props that can be passed to the Booker Embed atom.

NameRequiredDescription
usernameYesUsername of the person whose schedule is to be displayed
eventSlugYesUnique slug created for a particular event
orgBannerUrlNoURL of the user’s current organization
customClassNamesNoTo pass in custom classnames from outside for styling the atom
monthNoThe exact month for displaying a user’s availability; defaults to the current month
selectedDateNoDefault selected date for which the slot picker opens
startTimeNoCustom start time for the Booker that allows users to decide the first available date. Accepts JavaScript Date object or date string in format YYYY-MM-DD (e.g., "2025-08-20" or new Date("2025-08-20"))
hideBrandingNoFor hiding any branding on the booker
isAwayNoSets the booker component to the away state
allowsDynamicBookingNoBoolean indicating if the booking is a dynamic booking
bookingDataNoData for rescheduling a booking passed in via this prop
defaultFormValuesNoPrefilled values for booking form fields like name, email, guests, notes, reschedule reason, etc.
isTeamEventNoBoolean indicating if it is a team event
durationNoRefers to a multiple-duration event type; selects default if not passed
durationConfigNoConfigures selectable options for a multi-duration event type
hashedLinkNoRefers to the private link from event types page
isInstantMeetingNoBoolean indicating if the booking is an instant meeting
bookingUidNoUnique ID generated during booking creation
rescheduleUidNoUnique ID generated during booking creation, same as bookingUid
locationUrlNoCustom meeting link URL instead of a Cal.com link
firstNameNoFirst name of the attendee
lastNameNoLast name of the attendee
guestsNoInvite a guest to join a meeting
nameNoHost name
onCreateBookingSuccessNoCallback function for successful booking creation
onCreateBookingErrorNoCallback function triggered on booking creation failure
onCreateRecurringBookingSuccessNoCallback function for successful recurring booking creation
onCreateRecurringBookingErrorNoCallback function triggered on recurring booking creation failure
onCreateInstantBookingSuccessNoCallback function for successful instant booking creation
onCreateInstantBookingErrorNoCallback function triggered on instant booking creation failure
onReserveSlotSuccessNoCallback function for successful slot reservation
onReserveSlotErrorNoCallback function triggered on slot reservation failure
onDeleteSlotSuccessNoCallback function for successful slot deletion
onDeleteSlotErrorNoCallback function triggered on slot deletion failure
viewNoSpecifies the layout of the booker atom into column, week, or month view
metadataNoUsed to pass custom metadata values into the booker. Metadata should be an object eg: { bookingSource: "website", userRole: "admin" }
bannerUrlNoAdds custom banner to the booker atom
onBookerStateChangeNoCallback function that is triggered when the state of the booker atom changes.
allowUpdatingUrlParamsNoBoolean indicating if the URL parameters should be updated, defaults to false.
confirmButtonDisabledNoBoolean indicating if the submit button should be disabled, defaults to false.
timeZonesNoArray of valid IANA timezones to be used in the booker. Eg. [“Asia/Kolkata”, “Europe/London”]
onTimeslotsLoadedNoCallback function triggered once the available timeslots have been fetched.
roundRobinHideOrgAndTeamNoBoolean indicating if the organization and team should be hidden in the booker atom sidebar for round robin scheduling type, defaults to false.
showNoAvailabilityDialogNoBoolean indicating if the no availability dialog should be shown, defaults to true.
silentlyHandleCalendarFailuresNoBoolean when true the booker still displays slots when the third party calendars credentials are invalid or expired, Booker may show stale availability when enabled
hideEventMetadataNoBoolean that controls the visibility of the event metadata sidebar. When true, hides the left sidebar containing event details like title, description, duration, and host information. Defaults to false.
showTimezoneWhenEventDetailsHiddenNoBoolean that surfaces a timezone selector row above the booker when hideEventMetadata is true. Lets attendees change their timezone even when the event details sidebar is hidden. Has no effect when hideEventMetadata is false or when the event type has a locked timezone. Defaults to false.
defaultPhoneCountryNoSets the default country code for phone number inputs in the booking form. Accepts ISO 3166-1 alpha-2 country codes (e.g., "us", "gb", "in", "ee"). When set, phone inputs will default to the specified country’s dialing code.
Required props vary by usage:
  1. Individual booking: username + eventSlug
  2. Team booking: teamId + isTeamEvent + eventSlug

​
Styling

Booker Embed atom accepts custom styles via the customClassNames prop. This prop is an object that contains root level styles and nested objects for styling different parts of the booker component. Each nested object groups related styles for a specific section of the booker (e.g., eventMeta, datePicker, availableTimeSlots, etc). Here is an example booker with root level style bookerContainer and nested object datePickerCustomClassNames with datePickerDatesActive style: 
import { BookerEmbed } from "@calcom/atoms";

export default function BookerEmbed( props : BookerEmbedProps ) {
  return (
    <>
      <BookerEmbed
        ...
        customClassNames={{
          bookerContainer: "bg-[#F5F2FE]! [&_button:!rounded-full] border-subtle border",
          datePickerCustomClassNames: {
            datePickerDatesActive: "bg-[#D7CEF5]!",
          },
        }}
      />
    </>
  )
}
Below is a list of customClassNames properties grouped by their parent objects:

​
Root Level Styles

PropertyDescription
bookerContainerAdds styling to the whole of the booker atom

​
Event Meta Styles (eventMetaCustomClassNames)

PropertyDescription
eventMetaContainerStyles the event meta component containing details about an event
eventMetaTitleAdds styles to the event meta title
eventMetaTimezoneSelectAdds styles to the event meta timezone selector

​
Date Picker Styles (datePickerCustomClassNames)

PropertyDescription
datePickerContainerAdds styling to the date picker
datePickerTitleStyles the date picker title
datePickerDaysAdds styling to all days in the date picker
datePickerDateAdds styling to all dates in the date picker
datePickerDatesActiveStyles only the dates with available slots
datePickerToggleStyles the left and right toggle buttons

​
Available Time Slots Styles (availableTimeSlotsCustomClassNames)

PropertyDescription
availableTimeSlotsContainerAdds styling to the available time slots component
availableTimeSlotsHeaderContainerStyles only the header container
availableTimeSlotsTitleAdds styles to the title
availableTimeSlotsTimeFormatToggleAdds styles to the format toggle buttons
availableTimesStyles all the available times container

​
Confirmation Step Styles (confirmStep)

PropertyDescription
confirmButtonStyles the confirm button in the booking form
backButtonStyles the back button in the booking form
Here is an example with more custom styles: 
import { BookerEmbed } from "@calcom/atoms";

export default function BookerEmbed( props : BookerEmbedProps ) {
  return (
    <>
      <BookerEmbed
        ...
        customClassNames={{
          bookerContainer: "bg-[#F5F2FE]! [&_button:!rounded-full] border-subtle border",
          datePickerCustomClassNames: {
            datePickerDatesActive: "bg-[#D7CEF5]!",
          },
          eventMetaCustomClassNames: {
            eventMetaTitle: "text-[#7151DC]",
          },
          availableTimeSlotsCustomClassNames: {
            availableTimeSlotsHeaderContainer: "bg-[#F5F2FE]!",
            availableTimes: "bg-[#D7CEF5]!",
          },
          confirmStep: {
            confirmButton: "bg-purple-700!",
            backButton: "text-purple-700 hover:bg-purple-700! hover:text-white!"
          }
        }}
      />
    </>
  )
}

​
Rescheduling a booking

The Booker Embed atom also supports rescheduling a booking. To reschedule a booking, you need to pass in the rescheduleUid prop to the booker atom along with the other necessary props. This will allow the booker to display the reschedule form and handle the rescheduling process. The rescheduleUid is the booking uid you get when you create a booking.

​
Host busy slot indicators

When an authenticated host reschedules their own booking, all time slots are displayed — including those that conflict with existing calendar events. Each slot shows a color-coded dot indicator: green for free and red for busy. This lets hosts intentionally double-book if needed. Guests only see genuinely available slots.
For team events, the host sees their own busy slot indicators but other team members’ availability constraints remain enforced.
Here is an example of how to use the Booker Embed atom for rescheduling an individual event: 
import { BookerEmbed } from "@calcom/atoms";

export default function BookerEmbed( props : BookerProps ) {
  return (
    <>
      <BookerEmbed
        eventSlug={props.eventTypeSlug}
        username={props.calUsername}
        // rescheduleUid is the booking uid you get when you create a booking
        // it is only required when rescheduling a booking
        rescheduleUid={props.rescheduleUid}
        onCreateBookingSuccess={() => {
          console.log("Booking rescheduled successfully!");
         }}
      />
    </>
  )
}
For team events, you need to pass isTeamEvent and teamId prop to the booker along with the other necessary props. This will allow the booker to display the reschedule form and handle the rescheduling process. The teamId is the team ID you get when you create a team event. Here is an example of how to use the Booker Embed atom for rescheduling a team event: 
import { BookerEmbed } from "@calcom/atoms";

export default function BookerEmbed( props : BookerEmbedProps ) {
  return (
    <>
      <BookerEmbed
        eventSlug={props.eventTypeSlug}
        // rescheduleUid is the booking uid you get when you create a booking
        // it is only required when rescheduling a booking
        rescheduleUid={props.rescheduleUid}
        isTeamEvent={true}
        teamId={props.teamId}
        onCreateBookingSuccess={() => {
          console.log("Booking rescheduled successfully!");
         }}
      />
    </>
  )
}