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

1. Open Embed in the dashboard sidebar, under Customize.
2. Choose the Event Type to embed.
3. Choose a Widget Mode (below).
4. Set a Brand Color if you want the widget to match your site, and for a floating button, its Button Text and Position.
5. 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.

Password-protected event types

An event type with a booking password does not show its details in an embed. The widget shows an Enter the password button instead, which opens your booking page in a new tab where the visitor enters it and books; browsers do not pass that access back into a widget embedded on another site. Protected event types are also left out of the service-menu snippet.

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. On an event type that allows guests, guests=a@example.com,b@example.com opens the Add guests rows already filled in, up to ten addresses.

If one of your questions asks for someone else's email address, such as a partner's or a parent's, tick Also invite this person to the calendar event on that question in the event type's editor. Their answer is then added to the calendar invitation automatically; the booker sees this under the question and can take the person off before booking. They receive the calendar invitation only, not the confirmation email or reminders.

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.

On Wix and Squarespace

The snippet is the same wherever you paste it, but the two site builders most people are on have their own steps — and on Wix, one real limitation to read before you publish rather than after.

• Adding the widget to a Wix site — inline works. The widget cannot resize itself inside Wix's Embed element, and the popup and floating button stay inside that element rather than covering the page.
• Adding the widget to a Squarespace site — all three modes work, on the Core plan and above.

Related

• Getting started — event types and their links.

Last checked 2026-08-28.