All integrations
Under 1 minute

SitStay on any website

Two lines of HTML. Works on any website you control — static sites, Rails, Next.js, Hugo, whatever.

If you manage your own HTML, this is the fastest path. Paste a container div and a script tag. The widget loads asynchronously, renders your class schedule, and handles the entire booking flow. No dependencies, no build step, no iframe.

Step by step

  1. 1

    Copy the embed snippet

    Copy the two lines below. That's it — a container div and a script tag. Replace YOUR_TRAINER_ID and YOUR_WIDGET_KEY with the values from your SitStay dashboard (Embed Code page).

    <div id="sitstay-widget-container"
     data-trainer-id="YOUR_TRAINER_ID"
     data-widget-key="YOUR_WIDGET_KEY"></div>
<script src="https://app.sitstayschedule.com/widget.min.js" async></script>
  2. 2

    Paste it into your HTML

    Add the snippet to any HTML page, inside the <body> tag, wherever you want the booking widget to appear. The widget fills the width of its container.

    Place the snippet inside a wrapper element if you want to control the max width. For example, a <div style="max-width: 900px; margin: 0 auto;"> works well.

  3. 3

    Deploy and test

    Upload or deploy your updated page. The widget loads asynchronously — it won't block your page render. Visit the page and verify your class schedule appears.

  4. 4

    Override theme with data attributes

    Add any of these optional data attributes to the container div to customize the look. They override whatever you've set in your SitStay dashboard.

    <div id="sitstay-widget-container"
     data-trainer-id="YOUR_TRAINER_ID"
     data-widget-key="YOUR_WIDGET_KEY"
     data-primary-color="#2563EB"
     data-secondary-color="#53EAFD"
     data-accent-color="#F38E36"
     data-font-family="Inter"
     data-font-scale="1"
     data-corner-radius="12px"
     data-mode="light"
     data-success-url="https://yoursite.com/thank-you"
     data-cancel-url="https://yoursite.com/classes"></div>
<script src="https://app.sitstayschedule.com/widget.min.js" async></script>
  5. 5

    Override theme with JavaScript

    For more dynamic control, set a theme config object before the widget loads. This takes priority over data attributes.

    <script>
  window.SitStayWidgetTheme = {
    primaryColor: "#2563EB",
    secondaryColor: "#53EAFD",
    accentColor: "#F38E36",
    fontFamily: "Inter",
    fontScale: 1.2,
    radius: "8px",
    mode: "dark"
  };
</script>
<div id="sitstay-widget-container"
     data-trainer-id="YOUR_TRAINER_ID"
     data-widget-key="YOUR_WIDGET_KEY"></div>
<script src="https://app.sitstayschedule.com/widget.min.js" async></script>
  6. 6

    Override theme with CSS custom properties

    You can also set CSS variables directly on the container. This is useful when you want your existing CSS to drive the widget's appearance.

    <div id="sitstay-widget-container"
     data-trainer-id="YOUR_TRAINER_ID"
     data-widget-key="YOUR_WIDGET_KEY"
     style="--ssw-primary:#2563EB; --ssw-secondary:#53EAFD;"></div>
<script src="https://app.sitstayschedule.com/widget.min.js" async></script>

Things to know

  • ⚠️ The container must have id="sitstay-widget-container" — the widget looks for this specific ID.
  • ⚠️ Load the script with the async attribute so it doesn't block your page render.
  • ⚠️ The widget requires a modern browser (Chrome, Firefox, Safari, Edge). IE11 is not supported.

Test your embed

Common questions

What's the theme priority order?
CSS custom properties (highest) → data attributes → window.SitStayWidgetTheme → SitStay dashboard settings → built-in defaults (lowest). Each level overrides the one below it.
Does the widget work with a Content Security Policy?
Yes. If your site uses a strict CSP, add the widget host to your script-src directive. You can also pass a CSP nonce via the data-csp-nonce attribute on the container.
Can I embed the widget in a React, Vue, or other SPA?
Yes. Add the container div and load the script dynamically after your component mounts. The widget initializes when it finds the container in the DOM.
Does the widget support multiple languages?
Set data-locale and data-currency on the container to control language and currency formatting. The widget supports the locales configured in your SitStay account.

Ready to add bookings to your any website site?

Set up your school, connect Stripe, and publish your first class in one afternoon.

Request Early Access

7 days free · No credit card · Cancel anytime