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 with Widget Studio enabled.
  • ✓ Your studio slug (visible in Widget Studio under the embed snippet).
  • ✓ Your domain added to the Widget Studio allowlist (or leave it empty to allow all).

Step-by-step install

  1. 1

    Generate your snippet in Widget Studio

    Go to classflow.studio → your studio → Marketing → Embeds. Choose your widget type (Schedule, Reviews, Pricing, etc.) and theme. The snippet in the “Install” 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 with thedeferattribute.

  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 Widget Studio

    Back in Widget Studio, 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 Widget Studio.

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

Theming

The widget inherits your brand color from Widget Studio. To override colors from the host page, set CSS custom properties on any ancestor element:

:root { --cf-primary: #0f766e; /* buttons, links */ --cf-bg: #ffffff; /* widget background */ --cf-text: #111827; /* body 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 Widget Studio allowlist 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, whitelistwidget.classflow.studioandapi.getclassflow.cominscript-srcandconnect-src.
  • Local dev won't load.Browsers block mixed content onlocalhost- use Widget Studio's built-in preview pane for development.

Configure your widget

Choose widget type, theme, and get your personalized snippet in Widget Studio.

Open Widget Studio
← All install guides