Modal or inline

A widget can render either as an overlay (modal) or embedded in a container (inline). Pick based on how the page is designed.

The examples use MedosBooking; the portal and enquiry form take the same mode and containerId options. The enquiry form's open() can also be the first call — see its methods.

Modal mode

Opens the widget as a centered card over a dimmed backdrop. A close button sits in the top-right; clicking the backdrop also closes it.

init({ mode: "modal" }) opens the modal as soon as it runs. To open it from a button, call init() on the first click and open() after that — open() on its own can't start the widget, because init() is what exchanges your key for a session.

let started = false;

function openBooking() {
  if (started) return MedosBooking.open();
  started = true;
  MedosBooking.init({ apiKey: "mk_...", mode: "modal" });
}

document.querySelector("#book-btn").onclick = openBooking;

Use modal when:

• The page is a marketing landing page and booking is a call-to-action.
• You have limited layout space.
• You want booking to feel like a detour rather than the destination.

document.querySelector("#book-btn").onclick = () => {
  document.body.style.overflow = "hidden";
  openBooking(); // from the example above
};
// and set it back in onClose

Inline mode

Mounts the widget into a <div> you provide. The widget fills the container's width and expands to its content height.

<div id="booking" style="min-height: 600px;"></div>

<script>
  MedosBooking.init({
    apiKey: "mk_...",
    mode: "inline",
    containerId: "booking",
  });
</script>

Use inline when:

• The whole page is dedicated to booking (e.g. a /book route).
• You want the widget to sit alongside other content (like doctor bios).
• You need the widget to be scrollable in the page's flow.

Container height

Switching modes after init

You can't change modes on the fly — init() locks the mode for that page load. If you genuinely need to switch (e.g. show inline on desktop, modal on mobile), pick the mode based on the environment before calling init():

const isMobile = window.matchMedia("(max-width: 640px)").matches;

MedosBooking.init({
  apiKey: "mk_...",
  mode: isMobile ? "modal" : "inline",
  containerId: isMobile ? undefined : "booking",
});