React

The widget is client-only. Load the CDN script inside useEffect and initialize on mount.

src/BookingPage.tsx

import { useEffect } from "react";

declare global {
  interface Window {
    MedosBooking: {
      init: (config: Record<string, unknown>) => void;
      open: (config?: Record<string, unknown>) => void;
      close: () => void;
    };
  }
}

export function BookingPage() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://widgets.medos.one/v2/unified.js";
    script.async = true;
    script.onload = () => {
      window.MedosBooking.init({
        apiKey: "mk_your_publishable_key",
        mode: "inline",
        containerId: "medos-booking",
      });
    };
    document.body.appendChild(script);

    return () => {
      script.remove();
    };
  }, []);

  return <div id="medos-booking" style={{ minHeight: 600 }} />;
}

Skip the containerId and switch mode to "modal", then wire a button:

<button onClick={() => window.MedosBooking?.open()}>Book appointment</button>

Modal mode

On this page