Add ClassFlow to Your Carrd Site

Prerequisites

• ⚠Carrd Pro plan required. The Embed element is disabled on the free plan. Any Pro tier (Pro Lite, Pro Standard, Pro Plus) unlocks it. Pro Lite starts at $19/year.
• ✓ A ClassFlow studio account with Widget Studio enabled.
• ✓ Your studio slug from Widget Studio.
• ✓ Your Carrd custom domain (or the.carrd.cosubdomain) 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 the Carrd editor

   Log in to Carrd and click Edit on your site. The canvas editor opens in your browser.

3. 3

   Add an Embed element

   Click the + button to add a new element. ChooseEmbed from the element list. It will appear on your page canvas.

4. 4

   Set embed type to “Code”

   In the Embed element settings panel, change the Type dropdown toCode. (The other option is “URL” which is for iframes from a URL - that is not what you want here.)

5. 5

   Paste the snippet

   Paste the full snippet into the code field that appears. Click Done.

6. 6

   Position and size the element

   Drag the Embed element to the correct position on your page. Resize it to at least600 px tall for a Schedule widget. Carrd will display a placeholder in the editor - the actual widget renders only on the published site.

7. 7

   Publish and verify

   Click Publish (top right). Open the live URL and confirm the widget renders. Then check Widget Studio → Where your widget is live.

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

Carrd Embed elements load in an iframe - your Carrd CSS does not cascade into the widget. Usedata-theme="light"ordata-theme="dark"to match your Carrd site's background. Brand colors from ClassFlow Settings → Branding apply inside the widget automatically.

Multiple widgets on one page

Since Carrd builds single-page sites, you can add multiple Embed elements - one per widget type. Each gets its own Embed element with the full snippet. Carrd's Pro Standard and Pro Plus plans support more elements per site if you hit limits.

Common gotchas

• Embed element grayed out.You're on the free plan. Upgrade to any Carrd Pro plan to unlock Embed elements.
• Widget shows blank in editor.Expected - Carrd shows a placeholder box in the editor. The live widget only loads on the published URL.
• Carrd.co subdomain vs. custom domain.If you use a custom domain (requires Pro Standard or Plus), add the custom domain to the Widget Studio allowlist. If you're usingyoursite.carrd.co, add that instead.
• Widget cut off on short pages.Carrd pages have a fixed height by default. In the site settings, enable scrolling (vertical layout) if your widget is taller than the page.