Put the timetable on Squarespace

Squarespace keeps the site header. The booking widget sits inside it, the way Acuity did. Paste this into a Code Block on the booking page. The script listens for the widget’s height and grows the frame, so there is no inner scrollbar.

Preview it under a stand-in of the Squarespace header.

<iframe
  id="booking-frame"
  src="https://book.theyogaball.co.uk/embed"
  title="Book your mat with The Yoga Ball"
  scrolling="no"
  style="width:100%;border:0;display:block;background:#FBEAD9;height:720px;overflow:hidden"
></iframe>
<script>
  (function () {
    var origin = "https://book.theyogaball.co.uk";
    function bind() {
      var frame = document.getElementById("booking-frame");
      if (!frame || frame.getAttribute("data-booking-bound")) return;
      frame.setAttribute("data-booking-bound", "1");
      window.addEventListener("message", function (event) {
        if (event.origin !== origin) return;
        var data = event.data;
        if (!data || event.source !== frame.contentWindow) return;
        if (data.type === "booking:book") {
          frame.scrollIntoView({ block: "start", inline: "nearest" });
          return;
        }
        if (data.type !== "booking:resize") return;
        var height = Number(data.height);
        if (height > 80) frame.style.height = Math.ceil(height) + "px";
      });
    }
    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", bind);
    bind();
  })();
</script>

When you deploy, set NEXT_PUBLIC_APP_URL to the live site address so this snippet uses that domain instead of localhost. The embed page allows being framed.