Caledee

Integrations

Embed on your site

One script tag. Three drop-in modes. No build step, no framework dependencies.

Inline

Embed the booking flow directly inside any container on your page. The iframe auto-resizes to fit its content.

<div data-calee-inline="http://localhost:3000/u/demo/30min"></div>
<script src="http://localhost:3000/embed.js" async></script>

Popup

Open the booking flow in a centred modal when an element is clicked. Closes with Escape or the corner button.

<button data-calee-popup="http://localhost:3000/u/demo/30min">Book a call</button>
<script src="http://localhost:3000/embed.js" async></script>

Floating badge

Add a fixed bottom-right pill that opens the popup. Add the data-calee-badge attribute to the script tag itself.

<script src="http://localhost:3000/embed.js"
  data-calee-badge="http://localhost:3000/u/demo/30min"
  data-calee-badge-label="Book a call"
  async></script>

Listen for events

The widget posts window.parent.postMessage events with source: "caledee". Hook into them to fire analytics or redirect the visitor.

window.addEventListener("message", (e) => {
  if (e.data?.source !== "caledee") return;
  switch (e.data.type) {
    case "ready":             /* iframe loaded */ break;
    case "resize":            /* { height } */ break;
    case "bookingScheduled":  /* { bookingId, eventName, startAt, endAt } */ break;
    case "bookingRescheduled":/* { bookingId, eventName, startAt, endAt } */ break;
  }
});

Need help? hello@caledee.com.