Sizing
Cap a Medos widget's width and height with maxWidth and maxHeight, which widgets accept them, and how each one sizes itself by default.
A widget fills the space it's given and adapts its own layout to that space. Two options let you constrain it.
| Widget | maxWidth / maxHeight |
|---|---|
| Booking | Yes — defaults below |
| Patient portal | Yes — width defaults to 720px |
| Enquiry form | No — size it with your own container |
| Package purchase | No — size it with your own container |
The rest of this page uses the booking widget's defaults.
| Option | Accepts | Default |
|---|---|---|
maxWidth | number (px) or CSS length | 600px in modal mode; container width when inline |
maxHeight | number (px) or CSS length | 90vh in modal mode; content height when inline |
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>Give the container a min-height
The widget's height changes as the patient moves through the steps. Setting
min-height on your container (600px is a reasonable start) prevents the
page from jumping as content grows.
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 booking 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
maxHeightto 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.
Modal or inline
Render a Medos widget as a modal over the page or inline in a container, which widgets support each mode, and how to open a modal from a button.
Patient verification
How Medos widgets verify a patient with a one-time code by phone or email, which widgets verify, and how otpChannels narrows the choice.