Add online table reservations to any website

// BookingWidget.jsx
import { useEffect, useState } from "react";

// Auto-detects environment: localhost -> dev API, otherwise production.
function getWidgetOrigin() {
  const host = window.location.hostname;
  if (host === "localhost" || host === "127.0.0.1") return "http://localhost:3001";
  return "https://table214.com";
}

export default function BookingWidget() {
  const [origin] = useState(getWidgetOrigin);

  useEffect(() => {
    // The widget posts booking events back to the host page.
    function handleMessage(event) {
      if (event.origin !== origin) return;
      console.log("TABLE214 widget event:", event.data && event.data.type, event.data);
    }
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [origin]);

  // src is rebuilt whenever origin/slug/colors change.
  const src = `${origin}/r/de-gouden-lepel?embed=true&primaryColor=%23da3743`;

  return (
    <iframe
      src={src}
      title="TABLE214 booking widget"
      style={{ border: "none", width: "100%", height: 640 }}
    />
  );
}

// index.html
<div
  data-t214-widget
  data-slug="de-gouden-lepel"
  data-size="floating"
  data-theme="light"
  data-primary-color="#da3743"
  data-button-label="Book a table"
  data-position="bottom-right"
  data-button-color="#da3743"
  data-inherit-font="true"
></div>
<script type="module" src="/src/main.js"></script>

// src/main.js — Vite entry point
// import.meta.env.MODE is Vite's build-time equivalent of a
// hostname-based origin check.
const widgetOrigin = import.meta.env.MODE === "development"
  ? "http://localhost:3001"
  : "https://table214.com";

const script = document.createElement("script");
script.src = widgetOrigin + "/widget-embed.js";
script.async = true;
document.head.appendChild(script);