## 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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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.