Booker Embed

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.

Booker embed

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. Here is an example of how to use 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.

Customizations

We offer various 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.

Name	Required	Description
username	Yes	Username of the person whose schedule is to be displayed
eventSlug	Yes	Unique slug created for a particular event
orgBannerUrl	No	URL of the user’s current organization
customClassNames	No	To pass in custom classnames from outside for styling the atom
month	No	The exact month for displaying a user’s availability; defaults to the current month
selectedDate	No	Default selected date for which the slot picker opens
startTime	No	Custom start time for the Booker that allows users to decide the first available date. Accepts JavaScript Date object or date string
isTeamEvent	No	Boolean indicating if it is a team event
...	...	...

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. Here is an example with 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]!",
          },
        }}
      />
    </>
  );
}

Rescheduling a Booking

The Booker Embed atom also supports rescheduling a booking. To do this, you need to pass in the rescheduleUid prop along with the other necessary props. This will allow the booker to display the reschedule form and handle the rescheduling process. Here is an example of how to use the Booker Embed atom for rescheduling:

import { BookerEmbed } from "@calcom/atoms";

export default function BookerEmbed(props: BookerProps) {
  return (
    <>
      <BookerEmbed
        eventSlug={props.eventTypeSlug}
        username={props.calUsername}
        rescheduleUid={props.rescheduleUid}
        onCreateBookingSuccess={() => {
          console.log("Booking rescheduled successfully!");
        }}
      />
    </>
  );
}

This should cover everything needed to use the Booker Embed atom effectively.