Next.js · Medos Booking Docs

The widget mounts client-side. In Next.js App Router, use a Client Component and load the CDN script through next/script.

app/book/page.tsx

import Script from "next/script";
import { BookingButton } from "./booking-button";

export default function BookPage() {
  return (
    <>
      <Script
        src="https://widgets.medos.one/v2/unified.js"
        strategy="afterInteractive"
      />
      <h1>Book an appointment</h1>
      <BookingButton />
    </>
  );
}

app/book/booking-button.tsx

"use client";

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 BookingButton() {
  useEffect(() => {
    if (typeof window === "undefined" || !window.MedosBooking) return;
    window.MedosBooking.init({
      apiKey: process.env.NEXT_PUBLIC_MEDOS_API_KEY!,
      mode: "modal",
    });
  }, []);

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

Environment variables

Prefix client-visible env vars with NEXT_PUBLIC_. Never put a live API key in a non-NEXT_PUBLIC_ variable expecting it to reach the browser — it won't.