Builder.io Embeds
Modes
- inline — iframe embedded in the page
- popup — trigger opens modal overlay with iframe
- element-click / floating-button — fixed-position trigger anywhere on the page
URL
Embed page: /:user/:slug/embed — same Booker, no chrome, theme honored
via query params.
Snippet
<script src="https://<host>/embed.js" async></script>
<div id="cal-inline-embed"></div>
<script>
Cal("init", { origin: "https://<host>" });
Cal("inline", {
elementOrSelector: "#cal-inline-embed",
calLink: "my-user/intro",
config: { theme: "light" }
});
</script>
Theming
Query params on the embed URL:
theme=light|darkprimaryColor=<hex>locale=en|es|...timeZone=America/Los_Angeles
These override the event type's defaults for the embedded session only.
Message passing
The iframe posts messages to the parent on lifecycle events:
__cal.init, __cal.booking-successful, __cal.booking-cancelled,
__cal.booking-rescheduled.