Architecture at a glance
What ships in the box, and how the pieces fit together.
You don't need to know the internals to use the widget. This page exists so you can reason about what the widget owns, what it doesn't touch, and how it isolates itself from your app.
What ships
The widget is distributed as a single CDN JavaScript bundle
(unified.js) — a self-contained IIFE that mounts React into a container
you provide. Load it with a <script> tag and it exposes exactly one
global:
window.MedosBooking: {
init(config): void;
open(config?): void;
close(): void;
}React, MUI, TanStack Query, Zustand, and every other runtime dependency are bundled inside. Your page doesn't need a build step, doesn't need to install anything from npm, and doesn't need to serve the SDK's assets.
Isolation guarantees
The widget is designed to run inside sites you don't fully control, so it takes deliberate steps to stay out of your way.
Per-widget instance isolation
Every mounted widget gets its own React tree, its own TanStack Query client, and its own Zustand store. Two widgets on the same page never share state. Your host page's own React setup — if it has one — is never touched.
- HTTP layer — the widget uses its own axios instance, authenticated with a session token exchanged from your API key on init.
- Styles — scoped styles + CSS variables prefixed with
--medos-*so they can't clash with your site's CSS. - MUI internals — the widget uses MUI v7 for its own controls, wrapped
in its own
ThemeProvider. If your site also uses MUI, nothing collides.
What the widget doesn't do
- It doesn't take over your page layout — modal mode overlays, inline mode mounts into a container you provide.
- It doesn't inject global styles into
<body>or<html>. - It doesn't read cookies or localStorage from other origins.
- It doesn't make network calls before
init()is called.
The one caveat
window.MedosBooking is a singleton. That's fine 99% of the time —
you usually have one booking widget per page. For two independent widgets
on the same page (different API keys or different pre-selected doctors),
load the widget inside two separate iframes. See
Multiple instances for the pattern.