Gatsby

Gatsby pre-renders pages at build time, so the widget script must only load in the browser. Guard the window access.

src/pages/book.jsx

import * as React from "react";

const CDN_URL = "https://widgets.medos.one/v2/unified.js";

export default function BookPage() {
  React.useEffect(() => {
    if (typeof window === "undefined") return;

    const script = document.createElement("script");
    script.src = CDN_URL;
    script.async = true;
    script.onload = () => {
      window.MedosBooking?.init({
        apiKey: "mk_your_publishable_key",
        mode: "inline",
        containerId: "medos-booking-gatsby",
      });
    };
    document.body.appendChild(script);
    return () => script.remove();
  }, []);

  return (
    <main>
      <h1>Book an appointment</h1>
      <div id="medos-booking-gatsby" style={{ minHeight: 600 }} />
    </main>
  );
}

`gatsby-ssr.js` alternative

If you'd rather ship the script tag via SSR APIs, wrap it in setHeadComponents and guard the init call the same way — you still need useEffect to run MedosBooking.init().

gatsby-ssr.js alternative

On this page

`gatsby-ssr.js` alternative