@calcom/embed-core

@calcom/embed-core is the framework-agnostic vanilla JavaScript library that powers Cal.com’s embeddable scheduling widget, letting any website drop a Cal.com booking link into an inline element, modal, or floating button with a few lines of script. It ships from the cal.diy monorepo (the renamed Cal.com repository) alongside framework-specific wrappers (@calcom/embed-react, @calcom/embed-snippet), and is the lowest-level, most broadly applicable of the three since it requires no build step or framework.

The library manages iframe creation, theming (via CSS variable passthrough), booking event callbacks through an SDK action manager, and prerendering support for headless-router use cases, making it the standard way to add Cal.com scheduling to marketing sites, SaaS dashboards, or any non-React web property.

What You Get

• Three embed modes: inline element, floating button, and modal popup
• A pub/sub-style SDK action manager for booking lifecycle events (e.g. booking successful)
• CSS-variable-based theming so the embedded iframe matches the host site’s design
• Prerendering support for headless-router / high-intent booking flows
• A vanilla <script> tag install path with no build tooling or framework required

Common Use Cases

• Adding a ‘Book a demo’ or ‘Schedule a call’ widget to a marketing site’s homepage
• Embedding scheduling directly into a SaaS product’s in-app support or sales flow
• Triggering a booking modal from a floating call-to-action button on any page
• Listening for booking-completion events to fire analytics or CRM webhooks client-side

Under The Hood

Architecture — embed-core lives in packages/embeds/embed-core inside the Cal.com Turborepo monorepo, alongside sibling packages embed-react and embed-snippet that wrap it for React and script-snippet consumption respectively. The core module (src/embed.ts) coordinates iframe creation (EmbedElement.ts), inline vs floating-button rendering (Inline/inline.ts, FloatingButton/FloatingButton.ts), and a dedicated sdk-action-manager.ts that relays postMessage-based events between the host page and the booking iframe served by the main Cal.com Next.js app. Tech Stack — Built with Vite (not the Next.js toolchain used by the rest of the monorepo) and TypeScript, styled with Tailwind compiled to a standalone tailwind.generated.css, and shipped as a UMD bundle (dist/embed/embed.js) so it can be dropped into any page via a plain script tag; the wider monorepo runs on Next.js, Prisma, tRPC, and PostgreSQL but embed-core itself has no server-side dependencies. Code Quality — The package has dedicated unit and integration tests (embed.test.ts, EmbedElement.test.ts, __tests__/embed-iframe*.test.ts, lib/domUtils.test.ts) plus a Playwright-driven embed-tests suite for browser-level verification, and is linted with Biome as part of the monorepo’s shared tooling. API Design — The public surface is deliberately framework-agnostic: consumers call a small global Cal(...) function to open inline/modal/floating embeds and register event listeners, which keeps the vanilla-JS integration to a handful of lines while the React and snippet packages layer more idiomatic APIs on top for their respective environments.