Add ClassFlow to Your Webflow Site

Prerequisites

• ✓ Any Webflow paid plan (Basic, CMS, Business, or Enterprise). The Embed element is available on all paid plans.
• ✓ A ClassFlow studio account with Widget Studio enabled.
• ✓ Your studio slug from Widget Studio.
• ✓ Your published Webflow domain (or custom domain) added to the Widget Studio allowlist.

Step-by-step install

1. 1

   Copy your snippet from Widget Studio

   Go to classflow.studio → your studio → Marketing → Embeds. Choose widget type and theme. Copy the snippet.

2. 2

   Open Webflow Designer

   Log in to Webflow and open your project in the Designer. Navigate to the page where you want the widget.

3. 3

   Add an Embed element

   Open the Add panel (the + icon in the left toolbar, or pressA). Search for Embed or find it under theComponents section. Drag it onto the canvas where you want the widget to appear.

4. 4

   Paste the snippet

   Double-click the Embed element to open the code editor. Paste the full snippet (both the div and the script tag). Click Save & Close.

5. 5

   Set element dimensions

   Select the Embed element. In the Style panel, setWidth to100%and Min Height to600px(adjust for non-schedule widgets). The widget fills the container automatically.

6. 6

   Publish the site

   Click Publish in the top-right corner. Select your domain and publish. The widget does not load in the Designer canvas - it only renders on the live published site.

7. 7

   Verify in Widget Studio

   Visit your live published page, then check Widget Studio →Where your widget is live. Your Webflow domain will appear shortly.

Embed snippet

<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

Webflow's global CSS (Normalize, body font, box-sizing) applies to the widget. Override ClassFlow variables in your project's Custom Code (Project Settings → Custom Code → Head Code):

<style> :root { --cf-primary: #0f766e; --cf-bg: #ffffff; --cf-text: #111827; --cf-radius: 0.75rem; }
</style>

Multiple widgets on one page

Drag separate Embed elements for each widget. Webflow Embed elements are independent. You can include the full snippet in each, or put the<script>tag in Project Settings → Custom Code → Body Code (runs on all pages) and only paste the<div>in each Embed.

Common gotchas

• Widget blank in Designer.Expected - the Designer sandbox blocks external scripts. Test only on the published URL.
• webflow.io vs custom domain.If you use a custom domain, allowlist that domain. If you're testing onyoursite.webflow.io, add that too (or leave the allowlist empty during setup).
• CMS page templates. For Webflow CMS collection pages, add the Embed element to the collection template - it will appear on all collection items automatically.