Doctor appointment booking widget for clinics

The appointment widget — window.MedosBooking. Doctor selection, calendar, verification, payment, and confirmation in one embed.

The booking widget handles the whole appointment journey: picking a doctor, picking a slot, verifying the patient, taking payment if your workspace collects it, and confirming.

<script src="https://widgets.medos.one/v2/unified.js"></script>
<div id="medos-booking"></div>
<script>
  MedosBooking.init({
    apiKey: "mk_your_publishable_key",
    mode: "inline",
    containerId: "medos-booking",
  });
</script>

The flow

Schedule — location, doctor, date, and slot on one screen.

Verify — the patient enters a phone number or an email address and confirms the code. Which channels are offered is up to you, via otpChannels.

Patient details — pick an existing patient on the verified contact, or add a new one.

Summary — review, choose how to pay, and optionally redeem a session pack the patient already holds.

Confirmation — an appointment id for a scheduled booking, a token number for a queue booking. Online payments pass through a waiting screen first.

The flow adapts to how each doctor is configured — you don't select it. See How the widget adapts and Booking system types.

Try it

Configure it below and copy the snippet. The preview runs against a demo workspace, so the doctors and availability are sample data.

Booking

The appointment widget — doctor, slot, verification, payment, confirmation.

window.MedosBooking

Theme

Custom theme

Override brand coloursborderRadius8pxfontFamilyfontSize

View

Compact hides the doctor profile panel — a desktop-only difference, since that panel is already hidden on mobile. Calendar also removes the picker, filters and headers.

maxHeight720pxlayout

Horizontal moves the doctor list into a left column. It needs desktop width and a list to show, so it falls back to vertical on the mobile preview and in Compact or Calendar view.

Verification

Which channels the patient can receive their one-time code on. Narrow it when a workspace only supports one — an email option with no sending domain configured never delivers.

Live preview

index.html

<div id="medos-booking" style="min-height: 600px"></div>

<script src="https://widgets.medos.one/v2/unified.js"></script>

<script>
  MedosBooking.init({
    apiKey: "mk_your_publishable_key",
    mode: "inline",
    containerId: "medos-booking",
    theme: "default",
    onSuccess: (result) => console.log("Booked", result),
    onError: (err) => console.error(err),
  });
</script>

Configuration

MedosBooking accepts the full option set: mounting mode, booking scope, theming, sizing, layout, verification channels, and callbacks.

In this section

How the widget adapts

One widget, two flows — picked from each doctor's system type.

Configure

Every option, one doctor, calendar-only and compact layouts, and doctor overrides.

Booking system types

Scheduled appointments, queue tokens, and online payment.

Errors

What throws, what reaches onError, and what the widget handles itself.

Advanced

Doctor visibility and timezones.

Install guides for each framework are under Install, and Theming covers every widget.

Layout presets

layout decides where the doctor list sits relative to the calendar:

MedosBooking.init({
  apiKey: "mk_your_publishable_key",
  mode: "inline",
  containerId: "medos-booking",
  layout: "horizontal",
});

"vertical" (default) — the doctor list is a horizontal strip above the calendar.
"horizontal" — the doctor list is a column to the left of the calendar.

"horizontal" needs desktop width and a list worth showing, so it falls back to "vertical" below the md breakpoint, and whenever there is no list at all — calendarOnly, a single visible doctor, or compact, which pins the body to one calendar column.

Where it appears inside other widgets

The patient portal renders this same widget in place when a signed-in patient books again, so anything you fix in the booking flow is fixed there too. The portal skips the verification step in that case — the patient has already proved the same contact.

Pairing it with the others

Put the enquiry form next to the booking widget for visitors who want a callback rather than a slot.
Link to the patient portal from your confirmation email so patients manage their own appointments.
Use the package purchase widget to sell session packs the booking widget will then let patients redeem.

Booking widget