Modal vs inline

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

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.

MedosBooking.init({
  apiKey: "mk_...",
  mode: "modal",
});

// later:
document.querySelector("#book-btn").onclick = () => MedosBooking.open();

Use modal when:

• The page is a marketing landing page and booking is a call-to-action.
• You have limited layout space.
• The page shouldn't scroll while the user books.

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",
});