Add ClassFlow to Your WordPress Site

Prerequisites

• ⚠WordPress.com hosting: Custom HTML and third-party scripts require the Business plan or higher ($25+/mo). Free, Personal, and Starter plans block custom code.
• ✓Self-hosted WordPress.org:Any plan works - you control the server and no restrictions apply.
• ✓ A ClassFlow studio account with Widget Studio enabled.
• ✓ Your domain added to the Widget Studio allowlist.

Block editor (Gutenberg) - recommended

Used by WordPress 5.0+ by default. If you see a block-based editor with a+ button, this is your path.

1. 1

   Copy your snippet from Widget Studio

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

2. 2

   Open the page or post

   In WordPress admin, go to Pages (or Posts) and open the page where you want the widget. Click Edit.

3. 3

   Add a Custom HTML block

   Click + to add a block. Search for Custom HTML and select it. A code editor block will appear.

4. 4

   Paste the snippet

   Click inside the Custom HTML block and paste the full embed snippet.

5. 5

   Update and preview

   Click Update (or Publish) in the top-right corner. Click View Page to see the live result - the block editor preview may not render the widget.

Classic editor (TinyMCE)

If your site uses the Classic Editor plugin or an older WordPress version, follow these steps instead.

1. 1

   Switch to Text mode

   In the editor toolbar, click the Text tab (next toVisual). This shows raw HTML.

2. 2

   Paste and update

   Place your cursor where you want the widget, paste the snippet, and clickUpdate.

Self-hosted: adding to theme templates

On a self-hosted WordPress.org site you can also paste directly into theme template files. This is useful for embedding on every page or in a widget-style sidebar.

<?php /* In page.php, single.php, or a template part */ ?>
<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>

Alternatively, enqueue the script viawp_enqueue_script()infunctions.phpfor proper WordPress asset management.

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

WordPress injects the widget inline - your theme's CSS may affect spacing. Override with CSS custom properties in your theme's Additional CSS panel (Appearance → Customize → Additional CSS):

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

Common gotchas

• Script stripped by editor.Always paste in Text/HTML mode in the classic editor, not Visual mode.
• Security plugins blocking scripts.Plugins like Wordfence or WP Rocket may block or defer external scripts. Whitelistwidget.classflow.studioin their settings.
• WordPress.com plan restriction.If you see an upsell nag when adding a Custom HTML block, you need to upgrade to Business plan.
• Caching plugins. After embedding, purge your page cache (WP Super Cache, W3 Total Cache, etc.) so the live page includes the new code.