init() options

MedosBooking.init(config) bootstraps the widget. MedosBooking.open(config?) opens it as a modal (and accepts a partial config that merges with the last init call). MedosBooking.close() closes the modal.

Want to try these before writing any code? Use the Playground — it generates the exact snippet as you change options.

Core

Option	Type	Required	Default	Description
`apiKey`	`string`	Yes	—	Your Medos publishable API key. See API keys.
`mode`	`"modal"` \| `"inline"`	Yes	—	Modal opens over the page; inline mounts into `containerId`. See Modal vs inline.
`containerId`	`string`	For inline	—	DOM id of the element the widget mounts into. Ignored in modal mode.

Booking scope

Option	Type	Default	Description
`externalMemberId`	`string`	—	Lock the widget to one doctor by their external member id. The picker is skipped. See Lock to a single doctor.
`calendarOnly`	`boolean`	`false`	Strip back to the calendar: no profile panel, picker, filters, or headers. See Calendar-only and compact.
`compact`	`boolean`	`false`	Hide only the doctor profile panel; picker and headers stay. See Calendar-only and compact.
`doctorInfo`	`DoctorOverrideInfo`	—	Override the fetched doctor's profile fields.
`doctorInfoByDoctorId`	`Record<string, DoctorOverrideInfo>`	—	Per-doctor profile overrides, keyed by doctor id.

Appearance

Option	Type	Default	Description
`theme`	`"default"` \| `"modern"` \| `MedosTheme` \| `PartialTheme`	`"default"`	Built-in theme name, a full theme object, or a partial override. See Theming.
`primaryColor`	`string`	From theme	Brand colour shortcut. Hover and active shades are derived automatically.
`secondaryColor`	`string`	From theme	Secondary brand colour. Hover shade derived automatically.
`borderRadius`	`string` \| `number`	From theme	Corner radius for the widget's surfaces. A number is treated as `px`.
`fontFamily`	`string`	From theme	CSS font stack applied across the widget.
`fontUrl`	`string`	—	Stylesheet URL (e.g. Google Fonts) loaded so `fontFamily` resolves.

Brand shortcuts win over `theme`

primaryColor, secondaryColor, borderRadius, and fontFamily are top-level shortcuts that layer on top of whatever theme you pass. You can start from "modern" and just override the primary colour. See Brand colours.

Sizing

Option	Type	Default	Description
`maxWidth`	`number` \| `string`	`600px` in modal mode	Cap the widget width. A number is treated as `px`.
`maxHeight`	`number` \| `string`	`90vh` in modal mode	Cap the widget height; inner content scrolls. A number is treated as `px`.

See Sizing for guidance on picking values.

Callbacks

Option	Type	Description
`onSuccess`	`(data?: any) => void`	Not currently invoked. Intended payload depends on the booking flow — see onSuccess.
`onError`	`(error: Error) => void`	Fired when the initial workspace load fails. In-flow errors don't reach it — see onError.
`onClose`	`() => void`	Fired when the modal closes. Modal mode only.

There is no `baseUrl` option

The API endpoint is compiled into the widget bundle, so there's nothing to point anywhere. If you're carrying a baseUrl over from older config, delete it.

Minimal example

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

Full example

MedosBooking.init({
  apiKey: "mk_your_publishable_key",
  mode: "inline",
  containerId: "medos-booking",

  // appearance
  theme: "modern",
  primaryColor: "#4f46e5",
  secondaryColor: "#6366f1",
  borderRadius: 12,
  fontFamily: "'Inter', sans-serif",
  fontUrl:
    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",

  // sizing
  maxWidth: 900,
  maxHeight: 720,

  // booking scope
  externalMemberId: "your-doctor-external-id",
  calendarOnly: false,
  compact: false,

  // callbacks
  onSuccess: (data) => {
    console.log("Booked", data);
    window.location.href = "/booking-confirmed";
  },
  onError: (err) => console.error("Booking error", err),
  onClose: () => console.log("Modal closed"),
});

Methods

`init(config)`

Initializes the widget. Call once per page (or per iframe).

Modal mode: opens the modal immediately.
Inline mode: mounts into containerId.

Throws if:

apiKey is missing → "API key is required"
Inline mode without containerId → "containerId is required for inline mode"
Inline mode with an unknown containerId → "Container with id ... not found"

Call init() only once

Calling init() a second time mounts a second widget instance in the same container, which can double-render the booking UI. To re-open in modal mode use open(). To re-render inline, clear the container's HTML first, then call init() again — or mount each instance in its own iframe (see Multiple instances).

`open(config?)`

Opens the widget as a modal. The optional config merges into the last-known config, so you can call init() once and open later with just tweaks:

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

// later, on a button click:
MedosBooking.open({ externalMemberId: "your-doctor-external-id" });

Throws if no apiKey has ever been set.

`close()`

Closes the currently open modal. No-op if the widget is inline or the modal isn't open. Fires onClose if it was provided.

`DoctorOverrideInfo` shape

Used by doctorInfo and doctorInfoByDoctorId to override profile fields the API returns.

interface DoctorOverrideInfo {
  fullName?: string;
  intro?: string;
  qualifications?: Array<{
    degree: string;
    institution?: string;
    year?: number;
  }>;
  awards?: string[];
  availableDays?: string;
  designation?: string;
  experience?: string;
  languages?: string[];
  registrationNumber?: string;
  registrationAuthority?: string;
  specialization?: string[];
  services?: string[];
  expertise?: string[];
  mode?: string[];
  gender?: string;
  profileImageUrl?: string;
  email?: string;
  phoneNumber?: string;
}

Any field you omit falls back to the API value. See Override doctor info for common patterns.

On this page