Multiple instances on one page

window.MedosBooking is a singleton. That's fine for the 99% case — one booking widget per page. But two use cases need independent widgets on the same page:

Different workspaces — a directory page listing clinics from multiple Medos workspaces (different API keys per clinic).
Comparison views — side-by-side calendars for two doctors.

The iframe pattern

The cleanest way to run independent widgets is inside <iframe> tags. Each iframe gets its own window, so each has its own MedosBooking.

clinic-a.html (hosted on your site)

<!doctype html>
<html>
  <head>
    <script src="https://widgets.medos.one/v2/unified.js"></script>
  </head>
  <body>
    <div id="widget"></div>
    <script>
      MedosBooking.init({
        apiKey: "mk_clinic_a_key",
        mode: "inline",
        containerId: "widget",
      });
    </script>
  </body>
</html>

parent page

<div class="clinic-grid">
  <iframe src="/clinic-a.html" width="100%" height="700"></iframe>
  <iframe src="/clinic-b.html" width="100%" height="700"></iframe>
</div>

Each iframe holds an independent widget. Callbacks fire inside the iframe; use postMessage from the iframe if the parent page needs to react.

Even inline widgets in different containerIds share the same MedosBooking singleton (same API key, same session token, same client state). That's a deliberate design choice — it keeps the bundle small and avoids doubled network usage.

For most pages, this is what you want. When it isn't, use iframes.

The iframe pattern

Why not a shared page?

On this page