Quick start
Copy the snippet from your booking link. No API key, no backend.
- 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
Copy the snippet
Paste it before the closing body tag, or into a Custom HTML block in Webflow, WordPress, Squarespace, or Framer. - 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>
Popup text
Turn any link into a scheduler. If JavaScript is blocked, the href still opens the full booking page.
Popup text
<script type="text/javascript" src="https://app.microcal.io/embed.js" async></script> <a href="https://app.microcal.io/book/acme/intro" data-microcal-popup> Schedule a meeting </a>
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.
resizeContent height changed. The widget uses this to avoid nested scrollbars.
view_changedGuest moved between host, date, details, or confirmation.
scheduledBooking 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.
}
});