Add ClassFlow to Your Carrd Site

Prerequisites

• ⚠Your current Carrd plan must include the Embed element. Check Carrd’s current plan comparison because plan names and prices change.
• ✓ A ClassFlow studio account.
• ✓ Your studio slug from Website widgets.
• ✓ Your Carrd custom domain (or the.carrd.cosubdomain) added to the Approved websites list.

Step-by-step install

1. 1

   Copy your snippet from Website widgets

   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 Website widgets → 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-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. Check your current Carrd element limit if you add several widgets.

Common gotchas

• Embed element grayed out.Your current Carrd plan does not include 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, add it to the Approved websites list. 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.