All articles

Adding your booking widget to a Wix site

You can put the booking widget on a Wix page today, with Wix's Embed HTML element. Inline is the mode that works there. Wix runs embedded code inside a frame whose size you set by dragging it, so the widget will not resize itself, and the popup and floating-button modes stay inside that frame instead of covering the page. Below is the recipe that works, and a plain account of what does not.

Add the widget

There is no Calemander app in the Wix App Market. The Embed HTML element is the install.

  1. Open Embed in the Calemander dashboard sidebar, under Customize.
  2. Choose the Event Type you want and set Widget Mode to Inline.
  3. Click Copy under Code Snippet.
  4. In the Wix editor, click Add Elements, then Embed Code, then Popular Embeds, then Embed HTML.
  5. Paste the snippet into the element's code box and apply it.
  6. Drag the element to the size you want it on the page, then Publish.

The snippet is the same one every site gets — a div for the widget to land in, our script, and one call:

<!-- 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'
});
</script>

Set the height by hand

Wix's Embed element is an iframe whose size is a property of your page, set in the editor, and nothing running inside that iframe can change it. Wix says as much: “The HTML and URL elements in our editor are iFrames. Therefore, the code or site you are embedding won't be responsive, even if it is originally.”

Our widget does measure itself and report its height, but that message reaches only the frame Wix wraps it in. The Wix page has no listener for it, and we cannot add one to a document we do not own. So the space the widget takes up is the size you dragged it to, and it stays that size as the visitor moves from picking a date to filling in the form. On Squarespace, WordPress or a hand-written page the same widget grows and shrinks with its content; on Wix it does not.

Size the element to the tallest step of the flow, which is usually the form — name, email and any questions you ask. Too short and the visitor scrolls inside a box inside your page; too tall and there is empty space under the widget on the earlier steps. If your form is long, give the widget a page of its own and set the element tall, rather than fitting it into a section between other content.

Popup and floating button on Wix

Both of those modes work by adding an overlay to the page's own document and pinning it to the browser viewport. Inside Wix's Embed element, “the page's own document” is the element's own small document — so a full-screen modal covers the element rather than the screen, and the floating button pins to the corner of the embed box rather than the corner of the browser window. That is worth knowing before you publish rather than after.

On Wix today, use inline. If what you want is a button, make it a Wix button that links to your booking page — yourworkspace.calemander.com/your-event, or your own booking domain if you have one. A link out reads better than a modal confined to a box, and it works on every Wix plan.

The same cause has one more effect worth naming: if the event type has a Redirect after booking URL set under Confirmation page, that page loads inside the embed element instead of in the browser. If you send people to a thank-you page of your own, link out to the booking page rather than embedding it.

What the widget looks like

The snippet generator's Widget theme has a Plain option — a white card with no styling of its own — which is the one to pick when the Wix site already has a strong design. My booking page theme uses your Appearance settings instead, and Brand Color overrides the accent for this embed alone.

Those options apply inside our frame, so they behave on Wix exactly as they do anywhere else. Embedding your booking page has the full list.

Related

Last checked 2026-09-15.

Still stuck? Email support@calemander.com · Privacy · Terms