> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/calcom/cal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding Overview

> Learn how to embed Cal.com booking experiences into your website or application

Cal.com provides multiple ways to embed booking experiences directly into your website or application. The embed system is built on a core library written in vanilla JavaScript that manages communication between your site and the Cal.com booking interface.

## Embedding Methods

Cal.com offers three primary embedding methods to suit different use cases:

### Inline Embedding

Embed the calendar directly within your page flow. The booking interface appears as part of your page content.

```html theme={null}
<div id="my-cal-inline"></div>
<script>
  Cal.inline({
    elementOrSelector: "#my-cal-inline",
    calLink: "organization/event-type"
  });
</script>
```

**Best for:** Dedicated booking pages, landing pages where the calendar is the primary content.

### Modal Embedding

Open the calendar in a modal dialog overlay. The modal can be triggered by user actions like button clicks.

```html theme={null}
<button data-cal-link="organization/event-type">Book a meeting</button>
```

**Best for:** Adding booking functionality to existing pages without disrupting the layout.

### Floating Button

Add a persistent floating action button that opens the calendar in a modal when clicked.

```javascript theme={null}
Cal.floatingButton({
  calLink: "organization/event-type",
  buttonText: "Book meeting",
  buttonPosition: "bottom-right"
});
```

**Best for:** Making booking available across multiple pages, persistent call-to-action.

## Implementation Options

Depending on your tech stack, you can implement Cal.com embeds using:

<CardGroup cols={2}>
  <Card title="Vanilla JavaScript Snippet" icon="code" href="/embed/embed-snippet">
    Use the vanilla JS snippet for quick integration on any website
  </Card>

  <Card title="React Component" icon="react" href="/embed/embed-react">
    Use the React package for seamless integration in React applications
  </Card>
</CardGroup>

## Key Features

### Namespace Support

Multiple embeds can coexist on the same page using namespaces, ensuring they don't interfere with each other:

```javascript theme={null}
Cal.ns.myNamespace("inline", {
  elementOrSelector: "#my-cal",
  calLink: "organization/event-type"
});
```

### Event System

Listen to booking events to integrate with your application:

```javascript theme={null}
Cal("on", {
  action: "bookingSuccessfulV2",
  callback: (e) => {
    console.log("Booking created:", e.detail.data);
  }
});
```

### Prefilling Data

Pre-fill form fields with user information:

```javascript theme={null}
Cal.inline({
  calLink: "organization/event-type",
  config: {
    name: "John Doe",
    email: "john@example.com",
    notes: "Initial discussion"
  }
});
```

### Theme and Styling

Customize the appearance to match your brand:

```javascript theme={null}
Cal("ui", {
  theme: "dark",
  styles: {
    branding: {
      brandColor: "#000000"
    }
  }
});
```

## Performance Optimization

### Prerendering

The embed system supports prerendering to optimize initial load times:

```javascript theme={null}
Cal("prerender", {
  calLink: "organization/event-type",
  type: "modal",
  pageType: "team.event.booking.slots"
});
```

This creates a hidden iframe that loads the booking page in advance, showing a skeleton loader while the real content loads.

### Iframe Reuse

When reopening a modal, the embed system intelligently reuses the existing iframe when possible, providing a lightning-fast experience.

## Architecture

The embed system consists of three packages:

* **@calcom/embed-core** - Core library in vanilla JS that manages the embed
* **@calcom/embed-snippet** - Lightweight snippet that loads embed-core
* **@calcom/embed-react** - React component wrapper

### Communication System

The parent page and embedded iframe communicate using a message-based system with namespaced events to ensure multiple embeds don't interfere with each other.

### Instruction Queue

Commands are queued before the iframe is ready and executed once the connection is established, ensuring no commands are lost during initialization.

## Getting Started

Choose your implementation method:

<CardGroup cols={2}>
  <Card title="JavaScript Snippet" icon="js" href="/embed/embed-snippet">
    Quick start with vanilla JavaScript
  </Card>

  <Card title="React Integration" icon="react" href="/embed/embed-react">
    React component with TypeScript support
  </Card>

  <Card title="Customization Options" icon="palette" href="/embed/customization">
    Theme, styles, and configuration options
  </Card>
</CardGroup>

## Debugging

Enable logging by adding `cal.embed.logging=1` as a query parameter:

```
https://example.com/contact?cal.embed.logging=1
```

This logs all important events in both the parent page and the iframe, useful for debugging integration issues.

## Next Steps

<Steps>
  <Step title="Choose your implementation">
    Select between the vanilla JS snippet or React component based on your stack
  </Step>

  <Step title="Install and configure">
    Follow the installation guide for your chosen method
  </Step>

  <Step title="Customize appearance">
    Apply your brand colors, themes, and custom styles
  </Step>

  <Step title="Test thoroughly">
    Test the booking flow across different devices and browsers
  </Step>
</Steps>