Skip to main content
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. 
<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. Open the calendar in a modal dialog overlay. The modal can be triggered by user actions like button clicks. 
<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. 
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:

Vanilla JavaScript Snippet

Use the vanilla JS snippet for quick integration on any website

React Component

Use the React package for seamless integration in React applications

​
Key Features

​
Namespace Support

Multiple embeds can coexist on the same page using namespaces, ensuring they don’t interfere with each other: 
Cal.ns.myNamespace("inline", {
  elementOrSelector: "#my-cal",
  calLink: "organization/event-type"
});

​
Event System

Listen to booking events to integrate with your application: 
Cal("on", {
  action: "bookingSuccessfulV2",
  callback: (e) => {
    console.log("Booking created:", e.detail.data);
  }
});

​
Prefilling Data

Pre-fill form fields with user information: 
Cal.inline({
  calLink: "organization/event-type",
  config: {
    name: "John Doe",
    email: "[email protected]",
    notes: "Initial discussion"
  }
});

​
Theme and Styling

Customize the appearance to match your brand: 
Cal("ui", {
  theme: "dark",
  styles: {
    branding: {
      brandColor: "#000000"
    }
  }
});

​
Performance Optimization

​
Prerendering

The embed system supports prerendering to optimize initial load times: 
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:

JavaScript Snippet

Quick start with vanilla JavaScript

React Integration

React component with TypeScript support

Customization Options

Theme, styles, and configuration options

​
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

1

Choose your implementation

Select between the vanilla JS snippet or React component based on your stack
2

Install and configure

Follow the installation guide for your chosen method
3

Customize appearance

Apply your brand colors, themes, and custom styles
4

Test thoroughly

Test the booking flow across different devices and browsers

Build docs developers (and LLMs) love

Get started for freeTalk to us