Add ClassFlow to Your Squarespace Site

Prerequisites

• ⚠Squarespace Business plan or higher.Personal plan does not allow custom code blocks. Business, Commerce Basic, and Commerce Advanced plans all work.
• ✓ A ClassFlow studio account with Widget Studio enabled.
• ✓ Your studio slug from Widget Studio.
• ✓ Your Squarespace 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, then copy the snippet from the Install panel.

2. 2

   Open the Squarespace page editor

   In your Squarespace dashboard, go to Pages and click the page where you want the widget. Click Edit.

3. 3

   Add a Code block

   Hover over the section where you want the widget and click the +icon to add a block. In the block picker, scroll to More and chooseCode.

4. 4

   Paste the snippet

   In the Code block editor, make sure HTML is selected in the language dropdown. Paste the full snippet. Ensure Display Source is toggled OFF - otherwise Squarespace shows the raw code instead of rendering it.

5. 5

   Apply and save

   Click Apply in the code block. Then click Save (or the checkmark) in the top bar to save the page. The widget renders live in the editor canvas - you should see it immediately.

6. 6

   Verify in Widget Studio

   Visit the live page, then check Widget Studio →Where your widget is live. Your Squarespace domain will appear within a few minutes.

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

Unlike Wix, Squarespace Code blocks are injected directly into the page DOM - no iframe. Your site's CSS resets can affect the widget layout. If you notice font or spacing issues, wrap the snippet in a container with an isolated reset:

<div style="all: initial; display: block;"> <!-- paste widget snippet here -->
</div>

You can also override ClassFlow CSS variables from your Squarespace site's Custom CSS panel (Design → Custom CSS):

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

Multiple widgets on one page

Add multiple Code blocks - one per widget. Include the full snippet in each block. The script tag can be deduplicated: paste it only in the first block, then omit it from subsequent blocks on the same page.

Common gotchas

• “Display Source” is ON.If you see raw HTML code on your page instead of the widget, edit the Code block and toggle Display Source to OFF.
• Personal plan blocks code.The Code block is grayed out on Squarespace Personal plan - upgrade to Business or above.
• Preview vs. live site discrepancy.Squarespace's page preview (the eye icon) sometimes restricts external scripts. View the actual published page to confirm the widget loads.
• Site-wide header/footer injection.If you want the widget script to load on every page, you can add the<script>tag alone to Settings → Advanced → Code Injection → Header. Then only paste the<div>in Code blocks.