Multiple widgets on one page
Each Medos widget global is a single instance. Mix different widgets on a page freely, and use iframes for two of the same widget.
Each widget's global — MedosBooking, MedosPatientPortal, MedosEnquiry —
is a singleton. Different widgets never interfere: a booking widget, a
portal and an enquiry form can share a page, each with its own store and
session. Two of the same widget can't, and two use cases need that:
- 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 copy of the global. The
example uses the booking widget; the pattern is the same for the others.
<!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><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.
Why not a shared page?
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.
Languages and right-to-left
The eight languages the Medos widgets support, how each widget picks one, which widgets let the patient switch, and right-to-left layout.
Analytics and tracking
Send Medos widget events to GA4, Google Tag Manager and Mixpanel from the callbacks, which widget fires what, and how to keep personal data out.