Developer

Embed your booking link

Add a CalendarSync booking widget to any website with a single line of HTML. 3 modes: inline, popup, or floating badge. Works on static sites, WordPress, Webflow, Framer, anywhere you can paste a script tag.

1. Get your booking URL

Every active scheduling link is publicly bookable at https://www.calendarsync.app/availability/<your-slug>. Find your slug in Dashboard → Scheduling. Replace the example URL below with your own.

2. Pick a mode

Inline

The booking page sits directly inside your page. The widget auto-resizes to its content as visitors navigate.

<div
  class="cs-inline-widget"
  data-url="https://www.calendarsync.app/availability/your-slug"
  style="min-width:320px;height:700px;"
></div>
<script src="https://www.calendarsync.app/embed.js" async></script>

Popup button

Any link or button opens the booking page in a centred modal.

<a
  href="https://www.calendarsync.app/availability/your-slug"
  onclick="if(window.CalendarSync){CalendarSync.initPopup({url:this.href});return false;}"
>
  Book a 30-min call
</a>
<script src="https://www.calendarsync.app/embed.js" async></script>

Floating badge

A persistent “Book a Call” button at the bottom-right of every page. Tweak the text and colour to match your brand.

<script src="https://www.calendarsync.app/embed.js" async></script>
<script>
  window.addEventListener('load', function () {
    CalendarSync.initBadge({
      url:       'https://www.calendarsync.app/availability/your-slug',
      text:      'Book a Call',
      color:     '#1E3A5F',
      textColor: '#ffffff',
    });
  });
</script>

JavaScript API

Once embed.js loads, it exposes window.CalendarSync:

Method	What it does
initInline(selector, { url })	Mount inline widgets manually instead of relying on the`.cs-inline-widget` auto-init.
initPopup({ url })	Open the booking page in a modal. Returns nothing; closes on &Escape’, click-outside, or close button.
initBadge({ url, text?, color?, textColor? })	Add a floating bottom-right button. Only one badge per page.

Tips

Include the embed.js script once per page — multiple inline widgets can share the same loader.
On WordPress, paste the snippet into a Custom HTML block. On Webflow, use an Embed element. On Framer, an Embed component.
The popup and badge modes block scrolling on the host page while the modal is open and restore it on close.
For analytics, listen for the postMessage event with source: “calendarsync-embed” and type: “close” after a successful booking.

Don’t have a booking link yet?

Create one in your dashboard, then come back here.

Open Scheduling