Developer docs

Embed booking

Add MicroCal scheduling to any website. Paste a snippet — guests pick a time without leaving your page.

Quick start

Copy the snippet from your booking link. No API key, no backend.

  1. 1

    Open Share on a booking link

    In MicroCal, go to Booking links and choose Share. The Embed tab has inline, popup button, and popup text.
  2. 2

    Copy the snippet

    Paste it before the closing body tag, or into a Custom HTML block in Webflow, WordPress, Squarespace, or Framer.
  3. 3

    Publish

    The widget loads your live availability. When a guest books, they stay on your site unless the meeting is paid — then checkout opens in the top window.

Inline widget

The calendar sits in the page and grows as the guest picks a date, then a time, then their details.

Inline embed

<!-- MicroCal inline widget -->
<div class="microcal-inline-widget" data-url="https://app.microcal.io/book/acme/intro" style="min-width:320px;height:700px;"></div>
<script type="text/javascript" src="https://app.microcal.io/embed.js" async></script>

Page events

The iframe posts messages to the parent. Listen if you want to hide a banner, fire analytics, or continue a funnel after a booking.

resize

Content height changed. The widget uses this to avoid nested scrollbars.

view_changed

Guest moved between host, date, details, or confirmation.

scheduled

Booking confirmed. Payload includes guestEmail, startAt, and endAt.

Listen for a booking

window.addEventListener('message', function (event) {
  if (event.data && event.data.source === 'microcal' && event.data.event === 'scheduled') {
    // Guest just booked. event.data.payload has guestEmail, startAt, endAt.
  }
});

Paid meetings

Stripe Checkout cannot run inside an iframe. For paid booking pages, the guest is taken to Stripe in the top window and returns to the MicroCal confirmation page after payment.