Embeds

Get the code

In the dashboard, open the menu on an event type (the three dots) and choose Embed on your site. Pick a style, change the button text or colour if it has any, and copy the snippet. Paste it into your page where it should appear. It works on anything that lets you add HTML: a hand-written site, WordPress, Webflow, Squarespace, Notion embeds that accept code, and so on.

The three styles

Inline

The booking page sits in your page, and grows and shrinks as the visitor moves between the calendar, the times and the form.

<div data-calfree-inline="https://calfree.dev/priya/30min"></div>
<script src="https://calfree.dev/embed.js" async></script>

Popup

Any link or button with data-calfree-popup opens the booking page in a window over your site. While it is open the page behind it can’t be reached, and Tab and Shift+Tab stay inside the popup. Escape or the close button dismisses it, wherever focus is, and puts focus back where it was. On a link, keep the href: if the script is blocked, the link still goes to your booking page.

<a href="https://calfree.dev/priya/30min" data-calfree-popup="https://calfree.dev/priya/30min">Book a time</a>
<script src="https://calfree.dev/embed.js" async></script>

Floating button

A button pinned to the bottom-right corner of the page that opens the same popup. The text colour switches between black and white to stay readable on the colour you choose.

<script src="https://calfree.dev/embed.js"
  data-calfree-floating="https://calfree.dev/priya/30min"
  data-label="Book a time" data-color="#1b68e0" async></script>

What happens when someone books

The booking is made inside the frame, and the visitor sees “You’re booked” there, with a link to view or change the booking in a new tab. It is exactly the booking made on your page: the same availability rules, the same emails with a calendar file, the same calendar event and Meet link.

If you set an event type to send people to my website after booking, the embed does that too: your whole page goes to the address you chose, not just the frame.

React to a booking

When a booking is made, the script fires an event on window. Use it to show your own message, fire an analytics event or close a menu. The event carries no personal details.

window.addEventListener("calfree:booked", () => {
  // for example: track("booked a call")
});

Use it from JavaScript

The script also exposes a small API for sites that build their pages with code:

• CalFree.inline(element, url) puts the booking page inside an element.
• CalFree.popup(url) opens the popup.
• CalFree.floating({ url, label, color }) adds the floating button.
• CalFree.init() looks for data-calfree-inline elements added after the page loaded.

Good to know

• Only pages on your CalFree server can be embedded. The script ignores a booking URL that points anywhere else, so it cannot be turned into a way to load someone else’s page.
• Only the embedded page can be framed. Your dashboard, sign-in, settings and the pages behind your booking links refuse to appear inside another site. The embedded page is the one exception: it has no login and nothing to click through to.
• The footer follows your plan. The free plan shows “Scheduling by CalFree” under the embed, as it does on your booking page.
• Search engines skip it. The embedded page asks not to be indexed, so it never competes with your real booking page.
• One-time links work too. Put the full link, including ?link=…, in the snippet.

Need the plain link instead? See Booking page.