Quickstart · CDN · Medos Booking Docs

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):

index.html

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

CDN URL is a placeholder

Replace https://widgets.medos.one/v2/unified.js with the URL your team gave you. If you don't have one yet, you can host dist/v2/unified.js from the SDK build output locally while you develop.

Initialize it

Pick modal or inline mode.

Modal (opens over the page)

<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>

Inline (renders inside a container)

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

<script>
  MedosBooking.init({
    apiKey: "mk_your_publishable_key",
    mode: "inline",
    containerId: "booking-container",
  });
</script>

Open the page. The widget will fetch your workspace, list your doctors, and start the booking flow. The system type (SCHEDULED, SCHEDULED_WITH_PACKAGES, or QMS) is auto-detected per doctor — see How the widget adapts.

Complete example

Everything on one page, ready to paste:

index.html

<!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.

Quickstart · CDN