Embedding your booking page

The Embed Widget page generates a snippet you paste into your own site. Everything is configured there and the snippet updates as you change the options — you never have to edit it by hand.

Building the snippet

Open Embed in the dashboard sidebar, under Customize.
Choose the Event Type to embed.
Choose a Widget Mode (below).
Set a Brand Color if you want the widget to match your site, and for a floating button, its Button Text and Position.
Click Copy under Code Snippet and paste it into your page's HTML.

The Preview panel shows a live, working widget for the inline mode. For popup and floating-button modes the preview is a static illustration of where the widget will appear.

The three modes

Inline — renders directly in your page, wherever you put the <div> from the snippet. Use this for a dedicated “Book a call” page.
Popup — opens in a centered modal overlay. The snippet includes a button and wires the click for you; point it at your own button by changing the element id in the snippet. The popup closes on the close button, a click outside it, or the Escape key.
Floating Button — a fixed button in the corner of every page you add the snippet to, which opens the popup. Choose Bottom Right or Bottom Left.

What the snippet looks like

The inline snippet, for example, is this — with your own host and event slug filled in:

<!-- Add this where you want the booking widget to appear -->
<div id="calemander-booking"></div>

<script src="https://you.calemander.com/embed.js"></script>
<script>
Calemander.inline({
  slug: 'intro-call',
  target: '#calemander-booking',
  onBookingComplete: function(data) {
    console.log('Booking confirmed:', data);
  }
});
</script>

onBookingComplete is a callback your own page can use — to fire a conversion event, for instance, or to swap the widget for a thank-you message. It receives the booking details.

target accepts any CSS selector, so you are not tied to the #calemander-booking id the generator picks. There is also a Calemander.close() method for dismissing an open popup from your own code.

If two people in your workspace have an event type with the same slug, add a user option alongside slug to say whose booking page you mean.

Branding

Ticking Hide “Powered by Calemander” branding adds a hideBranding option to the generated snippet, which removes the footer from the embedded widget. Removing that footer from your own booking pages — as opposed to an embed — is a Pro feature, set on your profile. See Billing and plans.

Prefilling the form

If you already know who is booking, you can fill the form in for them by adding query parameters to the booking page URL: name, email, phone and notes. A custom question of your own is prefilled with q_<question id>=value.

Adding slot with an ISO timestamp opens the page with that time already selected, which is useful when you are linking to a specific opening from an email.

These work on the booking page and on the embedded page alike, but the generator does not put them into the snippet for you — you build the URL yourself.

Getting started — event types and their links.

Last checked 2026-08-28.