Skip to main content

HTML / Static sites

Add ClassFlow to Any HTML Page

If you hand-code your site, use a static site generator (Eleventy, Hugo, Jekyll, Astro), or host on GitHub Pages or Netlify Drop, this guide is for you. No build step required.

Prerequisites

  • ✓ A ClassFlow studio account.
  • ✓ Your studio slug (visible in Website widgets under the embed snippet).
  • ✓ Your domain added to Approved websites. An empty list permits all hosts and is not recommended for a production install.

Step-by-step install

  1. 1

    Generate your snippet in Website widgets

    Go to classflow.studio → your studio → Marketing → Embeds. Choose your widget type (Schedule, Reviews, Pricing, etc.) and theme. The snippet in the “Embed code” panel auto-fills your studio slug.

  2. 2

    Open your HTML file

    Open the.htmlfile where you want the widget to appear in your code editor.

  3. 3

    Paste the snippet where you want the widget

    Place the<div>element at the exact location in your page body where the widget should render. The<script>tag can go anywhere in<body>- we recommend near the closing</body>tag. Because the loader is atype="module"script it is deferred automatically - addingdeferdoes nothing.

  4. 4

    Save, deploy, and verify

    Deploy or save the file as you normally would. Open the page in a browser - the widget should mount within one or two seconds. If nothing appears, open DevTools (F12) → Console and look for any errors.

  5. 5

    Confirm the installation in Website widgets

    Back in Website widgets, scroll to Where your widget is live. Your domain and widget type should appear within a few minutes of the first page load.

Embed snippet

Replaceyour-studio-slugwith your actual slug from Website widgets.

<div data-classflow="schedule" data-studio="your-studio-slug" data-studio-url="https://your-studio.classflow.studio" data-days="14">
</div>
<script type="module" src="https://widget.classflow.studio/v1/loader.js"></script>

Theming

The widget inherits your studio logo, name, and primary color from Settings → Branding. To override colors from the host page, set CSS custom properties on any ancestor element:

:root { --cf-primary: #0f766e; /* buttons, links */ --cf-primary-foreground: #ffffff; /* text on buttons */ --cf-card-bg: #ffffff; /* card background */ --cf-text: #111827; /* body text */ --cf-text-muted: #6b7280; /* secondary text */ --cf-radius: 0.75rem; /* border radius */
}

Multiple widgets on one page

You can add as manydata-classflowcontainers as you like on a single page - one Schedule, one Reviews carousel, one Pricing table. Only include the<script>tag once per page, regardless of how many containers you have.

Common gotchas

  • Allowlist your domain.If you added domains to the Approved websites list but the widget shows nothing, check that the domain matches exactly (e.g.example.com, notwww.example.com- add both if needed).
  • Content Security Policy (CSP) headers.If your server sets a strict CSP, merge the origins below into your existing policy - they are additions, not a complete policy. Checkout widgets load Stripe, and a missingconnect-srcentry lets the payment form render but fails confirmation with no visible error.
    # Always
script-src   https://widget.classflow.studio
connect-src  https://widget.classflow.studio https://api.getclassflow.com
connect-src  https://errors.getclassflow.com   # error reporting

# Checkout widgets only (Buy, Gift card, Pricing)
script-src   https://js.stripe.com https://*.js.stripe.com
connect-src  https://api.stripe.com
frame-src    https://js.stripe.com https://*.js.stripe.com https://hooks.stripe.com
img-src      https://*.stripe.com

# Only if you enabled tracking pixels in Marketing > Embeds
script-src   https://www.googletagmanager.com https://connect.facebook.net
    The Stripe entries are the Stripe.js set published by Stripe; check there if you also use Link or the Address Element.
  • Local development works.localhostand127.0.0.1are always permitted and never need to be on the Approved websites list. Browsers also treathttp://localhostas a secure origin, so loading the widget over plain HTTP is fine. If nothing renders locally, check that widgets are switched on under Marketing → Embeds → Availability.

Configure your widget

Choose widget type, theme, and get your personalized snippet in Website widgets.

Open Website widgets
← All install guides