Building blocksInstall

CDN

Install the widget with a single script tag.

The CDN bundle is a self-contained IIFE. It ships React, MUI, and every other dependency inside the bundle, so you don't need a build step.

The script tag

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

This is the production endpoint. It's the same URL for every site — there's nothing to configure per environment.

What's inside

The bundle includes React 19, MUI v7, TanStack Query, Zustand, and every other runtime dependency, so there's nothing else to install.

It's roughly 970 KB uncompressed, served gzipped from CloudFront with a one-year immutable cache (max-age=31536000). Because the URL is versioned, returning visitors get it straight from cache.

Where to put the tag

  • <head> with deferwindow.MedosBooking is then ready by the time DOMContentLoaded fires:

    <script defer src="https://widgets.medos.one/v2/unified.js"></script>
  • End of <body> — also fine, and doesn't require defer.

  • Anywhere via document.createElement("script") — for SPAs that load the script only on pages that need it.

After it loads

The bundle exposes exactly one global:

interface Window {
  MedosBooking: {
    init: (config: MedosBookingConfig) => void;
    open: (config?: Partial<MedosBookingConfig>) => void;
    close: () => void;
  };
}

Every option and callback is documented in Configure options.

Checking the script actually loaded

If MedosBooking is undefined at runtime, the script failed to load. Add an error handler to the tag:

<script
  src="https://widgets.medos.one/v2/unified.js"
  onerror="console.error('Medos Booking failed to load')"
></script>

On this page