Cal.com Embed Guide: Embed Types, WordPress, Atoms and Platform

Three routes to put Cal.com on your site

There are three ways to get Cal.com booking onto something you own, and they suit very different teams. The embed is a snippet you paste into a web page; it is free, needs no developer and covers most small businesses. Atoms are React components you build into your own app, signed in through OAuth; they need a developer and are now in maintenance mode. The old Platform, with managed users and white labeling, has stopped taking new customers. Most readers want the first. Founders building a product want the second, with care. Nobody new can choose the third.

This tutorial walks through each route in that order. We read the help center's embedding guides, the Atoms developer docs, the API introduction and the release notes from the past year, and we flag where pages disagree. If you have not set up event types and availability yet, start with our guide to using Cal.com and come back. An embed only shows what your event types already allow, so a messy setup looks just as messy on your website. Fix the source first.

The four embed types and what you can embed

Cal.com offers four embed options: inline, a floating pop-up button, a pop-up opened by clicking an element, and an email embed ^[1]. Inline places the booking calendar directly in the page, which suits a dedicated booking page or a contact section. The floating button sits in a corner of every page and opens the booker on click, good for sites where booking is the main call to action. The element-click pop-up turns any existing button or link into a booking trigger, so you keep your own design. The email embed is different: it inserts your open time slots into an email you are writing.

Three kinds of things can be embedded: a single event type link, your whole profile page with every public event type, or a routing form. Routing forms are a Teams feature, so that third option needs a paid plan. You can also place several embeds on one page to show different availability, for example one per consultant. And embeds can show only specific time slots for a given context or type of visitor without changing the core event settings. The snippets work on both the cloud service and self-hosted instances, and they update with the instance, so self-hosters are not left behind.

Building the snippet, step by step

The Embed Snippet Generator does the work for you. It outputs HTML or React code, and it lets you set the options before you copy anything, so you rarely need to edit the code by hand. Pick HTML for a website builder or a plain site, and React if a developer maintains your front end. Embeds are part of the Free plan, so you can do all of this before paying for anything. The usual path looks like this:

1. Open the event type, profile or routing form you want to show and choose the embed option.
2. Pick the embed type: inline, floating button or element click.
3. Set the size, the theme, the brand color and the layout, and decide whether to show the event type details.
4. For a floating button, write the button text and choose its position on the page.
5. Copy the HTML or React snippet and paste it where the booking should appear.
6. Book a test meeting from the live page, then cancel it.

That last step matters. Test the embed on the real page, not only in the preview, because site themes, cookie banners and page builders can all interfere. Speed should not be the problem: Cal.com's July 2025 release cut embedded booking page load times from about 6 seconds to under 1 second. Since July 2026, PayPal payments also work inside embedded booking flows, including held payments and no-show fees. So a paid consultation can be booked and paid without the visitor leaving your site.

WordPress and other site builders

On WordPress the simplest route is Cal.com's own app. The app store lists a WordPress app that embeds booking pages into a WordPress page, and the FAQ confirms a WordPress plugin is available. If you prefer not to add a plugin, the HTML snippet from the generator can go into any block or widget that accepts custom HTML. That works the same way on most site builders, since the snippet is plain code.

One builder has a documented quirk. On Framer websites, automatically forwarding the page's query parameters into the embed does not work. The workaround is the prefill configuration, which passes the values you need directly. We did not find builder-specific guides for other platforms in Cal.com's help center, so treat the generic snippet as the default and test it on a staging page first. If your builder strips scripts from custom code blocks, the inline and pop-up embeds will not load, and the plain booking link is the fallback.

Prefilling forms and keeping your UTM data

Embeds can arrive half filled. Any booking form field, including name, email, notes, guests, location and your custom questions, can be prefilled through URL parameters using the field's identifier. That is useful when the visitor is already logged in to your site, or arrives from an email where you know who they are. Embeds can pass hidden metadata too, which lands in the webhook payload and is stored on the booking, but does not show on the booking details page. That is a clean way to carry an account ID or a campaign code.

Query parameters need one switch. Forwarding the page's parameters into the embed is off by default and is turned on with a config setting, forwardQueryParams. For UTM tracking, the help center says the parameters must either be passed in the embed config or picked up by enabling that auto-forwarding. The marketing page suggests embeds capture UTM data on their own, so follow the help center and switch it on deliberately. Without it, your ad campaigns will look like they produced no bookings at all.

Embed events and the Google Tag Manager rule

Embeds emit events that your own page can listen to. The current ones include bookingSuccessfulV2, which replaces the older bookingSuccessful, plus rescheduleBookingSuccessfulV2, bookingCancelled and routed. Events whose names start with a double underscore are internal and may change without notice, so do not build on them. After a booking, a redirect can carry fixed parameters such as the booking UID, title, start and end times, email and an isEmbed flag.

The analytics rule catches people out. Analytics apps such as Google Analytics or Meta Pixel only inject a tracking snippet on the booking page. Booking events are sent only to Google Tag Manager, not to other analytics apps directly ^[2]. Once the GTM app is enabled on an event type, embed events flow into Tag Manager automatically. So if you want a conversion recorded when someone books, route it through Tag Manager and fire your other tags from there. Installing an analytics app alone will count visits, not bookings.

Making the embed look like your site

Branding works on two levels. The quick level is in the snippet generator: theme, brand color and whether the event details card shows. The ui instruction can hide that details card so only the calendar and slots appear, though its styling options are narrow; right now it supports only a background color on the page body and on event type list items. The deeper level is CSS variables. A developer guide shows how to restyle the embed per light and dark theme, matching brand colors, spacing and corner radius. A single radius variable controls every border radius, and setting it to zero gives sharp corners.

The Cal.com branding itself is a plan question. The FAQ says removing it requires a team plan, and that a team can be a single person. Teams costs $12 per user a month billed yearly or $16 billed monthly, and the pricing page lists branding removal among its additions. Full white labeling goes further and is handled through sales. If the Cal.com mark on your booking page bothers your clients, budget for Teams. Short of that, the embed carries the brand.

Atoms: React components for your own app

Atoms are the developer route. They are React components that put Cal.com scheduling inside another application: the Booker for taking bookings, plus pieces for availability settings, event types, calendar settings, connecting Google, Outlook or Apple calendars, conferencing apps, Stripe payments and a troubleshooter. The Booker alone offers month, week and column layouts, a dry-run mode for testing without real bookings, a hideBranding prop, CRM routing props and dynamic bookings across several users. A BookerEmbed version keeps the whole booking on the host site, and an OnboardingEmbed handles Cal.com signup and consent inside your app.

Setting up OAuth

Atoms work with regular Cal.com accounts through OAuth, added for Atoms in February 2026. You create an OAuth client in the app, and Cal.com reviews each client before it can be used. Access tokens expire after 30 minutes, so your backend needs a token refresh endpoint. A CalOAuthProvider wraps your app for users who signed in through your client. Public clients, such as browser-only apps, must use PKCE instead of a client secret. The OnboardingEmbed runs in an iframe on Cal.com's domain with a first-party session, so it needs no third-party cookies. Our Cal.com API guide covers scopes and tokens in more detail.

Versions, styling and maintenance mode

Atoms support React 18 and 19 and Next.js 14 and 15, and they ship two CSS bundles, one for Tailwind CSS v4 and one for v3. Custom class names must be valid Tailwind classes. The interface comes in English, German, French, Italian, Dutch, Brazilian Portuguese and Spanish, with right-to-left support. Now the important part. The @calcom/atoms package is in maintenance mode: existing integrations get fixes and npm releases, but no new atoms are planned ^[3]. The next generation will be copy-and-paste components built on coss ui and API v2, and Cal.com says new integrations should start from API v2. Plan accordingly.

What happened to Platform

Platform was Cal.com's white-label offering for marketplaces and large public booking setups, built on managed users that lived inside your product. Since December 15, 2025 Cal.com no longer accepts new sign-ups for any Platform plan, while it keeps supporting existing customers ^[4]. The December 2025 release folded the developer offer into an OAuth-based API v2 product, and the January 2026 release moved away from the white-label model to a branded Continue with Cal.com OAuth flow. Managed users remain only for existing Platform customers, and the API reference lists Platform OAuth clients and managed-user endpoints as deprecated.

What this means in practice is simple. A new product cannot hide Cal.com behind its own brand through Platform anymore. Your users connect their own Cal.com accounts with the Continue with Cal.com button, and your app works on their behalf through OAuth and API v2. That is a cleaner model for many tools, and a dealbreaker for some. If invisible white labeling is the core of your plan, talk to Cal.com sales before you write code.

Which route to choose

For most small businesses, the answer is the embed. It is on the Free plan, it needs no developer, and the snippet generator handles the code. Add Teams only if you need routing forms in the embed or want the Cal.com branding gone. Developers building a product should weigh Atoms carefully: they still work and still get fixes, but the package will not grow. A new integration has a longer life on API v2, using Atoms only where a ready-made Booker saves real time.

The bottom line

Cal.com's embed is the easy win: four embed types, a snippet generator that writes HTML or React, a WordPress app, prefill and metadata, and pages that load in under a second. Remember two rules: turn on parameter forwarding for UTM data, and send booking events through Google Tag Manager. Atoms remain a capable React toolkit with OAuth, but they are in maintenance mode, and Platform takes no new customers. Embed for your website, build on API v2 for your product, and treat Atoms as a shortcut rather than a foundation.