Playground
Try the booking widget right here — switch themes, customize your brand, change the view, and copy the generated code.
Configure the widget with the controls below and watch it update live. Every change is reflected in the generated snippet, so once it looks right you can copy it straight into your page.
Theme
Custom theme
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.
<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: (data) => console.log("Booked", data),
onError: (err) => console.error(err),
});
</script>What you're looking at
The preview is a real widget running against a demo workspace, so the doctors, locations, and availability you see are sample data. You don't need a key to use this page — everything is already wired up.
The generated snippet shows apiKey: "mk_your_publishable_key" as a
placeholder. Swap it for your own key when you
paste the code into your site, and the same config will render your workspace.
What the controls map to
| Control | Config option | Reference |
|---|---|---|
| Theme presets | theme, primaryColor, secondaryColor, borderRadius | Theming |
| Override brand colours | primaryColor, secondaryColor | Brand colours |
borderRadius slider | borderRadius | Brand colours |
| Font picker | fontFamily + fontUrl | Brand colours |
| Inline / Modal | mode (+ containerId for inline) | Modal vs inline |
| Full / Compact / Calendar | compact, calendarOnly | Calendar-only and compact |
maxHeight slider | maxHeight | Sizing |
| Device buttons | — preview only, the widget is responsive by default | — |
The device buttons don't map to a config option. The widget adapts its own layout to the space it's given, so resizing the preview frame is the same as resizing a browser window.