Quickstart · CDN
Add the widget to any website in five minutes with one script tag.
The fastest way to add booking to a site. Works in vanilla HTML, PHP, Vue, Angular, Svelte, and anywhere else that renders HTML.
What you'll build
A page with a button that opens the Medos Booking widget as a modal, plus an inline version mounted into a container.
Get your API key
Sign in to your Medos dashboard and copy your publishable API key
(starts with mk_). If you don't have one yet, see
Get your API key.
Add the script tag
Paste this into your page's <head> (or just before the closing </body> tag):
<script src="https://widgets.medos.one/v2/unified.js"></script>That's the production endpoint — no build step and nothing to install.
Initialize it
Pick modal or inline mode.
<button onclick="MedosBooking.open()">Book appointment</button>
<script>
MedosBooking.init({
apiKey: "mk_your_publishable_key",
mode: "modal",
theme: "default",
onSuccess: (data) => {
console.log("Booking confirmed", data);
},
});
</script><div id="booking-container" style="min-height: 600px;"></div>
<script>
MedosBooking.init({
apiKey: "mk_your_publishable_key",
mode: "inline",
containerId: "booking-container",
});
</script>That's it
Open the page. The widget will fetch your workspace, list your doctors, and start the booking flow — scheduled or queue-based, matching how each doctor is set up. See How the widget adapts.
Complete example
Everything on one page, ready to paste:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Book an appointment</title>
<script src="https://widgets.medos.one/v2/unified.js"></script>
</head>
<body>
<h1>Book an appointment</h1>
<button onclick="MedosBooking.open()">Open booking</button>
<script>
MedosBooking.init({
apiKey: "mk_your_publishable_key",
mode: "modal",
theme: "default",
onSuccess: (data) => {
alert("Booking confirmed! ID: " + JSON.stringify(data));
},
onError: (error) => {
console.error("Booking error:", error);
},
});
</script>
</body>
</html>Next steps
- Configure options — every
init()field explained. - Theming — match the widget to your brand.
- Framework guides — Next.js, Vue, Angular, Svelte, and more.