Embeds
SkillAI & modelsPut a booking calendar on any webpage in the style that fits it best. Once added, your AI can generate the embed snippet and matching theme settings for you, as an inline block, a popup, or a floating button.
Available today. Use it from your connected AI after setup.
No other account needed.
After adding it, tell your AI which page should show the calendar and which embed style you want. It will produce the snippet and theme settings for you to add to that page.
Then ask your AI: use the Embeds skill
What your AI can do with it
- Generate an embed snippet for a booking calendar
- Embed the calendar inline within a page
- Show the calendar as a popup
- Add the calendar as a floating button
- Apply theme settings so the calendar matches the page
What this skill tells your AI
The instructions your AI receives, as published by builderio/agent-native in packages/scheduling/docs/skills/embeds/SKILL.md and read by ahel’s review.
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.
Signals
- GitHub stars
- 5k
- Forks
- 440
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
embeds- Source
- github.com/builderio/agent-native