Sizing

The widget fills the space it's given and adapts its own layout to that space. Two options let you constrain it.

A number is treated as pixels, so maxWidth: 900 and maxWidth: "900px" are equivalent. Any CSS length works — "48rem", "90vw", "100%".

Inline mode

By default an inline widget takes the full width of its container and grows to fit its content. Set maxHeight when you want it to stay inside a fixed region — the inner content scrolls instead of the page.

<div id="medos-booking"></div>

<script>
  MedosBooking.init({
    apiKey: "mk_your_publishable_key",
    mode: "inline",
    containerId: "medos-booking",
    maxWidth: 900,
    maxHeight: 720,
  });
</script>

Modal mode

In modal mode the widget renders inside a centered card. maxWidth and maxHeight override that card's defaults of 600px and 90vh.

MedosBooking.init({
  apiKey: "mk_your_publishable_key",
  mode: "modal",
  maxWidth: 720,
  maxHeight: "85vh",
});

Keep maxHeight in viewport units for modals. A fixed pixel height can overflow small screens, while vh adapts.

Responsive behaviour

You don't need media queries or separate mobile config. The widget switches to a single-column layout, compacts its header, and adjusts spacing based on the width available to it.

To see this, open the Playground and use the device buttons — they resize the preview frame, which is the same as resizing a browser window.

Picking values

• Dedicated booking page — leave both unset and let the widget fill your layout's content column.
• Sidebar or narrow column — no special config needed; the widget goes single-column on its own.
• Inside a fixed-height panel or a kiosk screen — set maxHeight to that panel's height so the widget scrolls internally.
• Wide marketing page — set maxWidth (700–900px) so the booking card doesn't stretch uncomfortably wide.