Add ClassFlow to Your Showit Site

Prerequisites

• ✓ Any Showit paid plan - Solo, Basic, Advanced, or Advanced+WordPress. All paid plans support Embed Code elements.
• ✓ A ClassFlow studio account with Widget Studio enabled.
• ✓ Your studio slug from Widget Studio.
• ✓ Your Showit domain added to the Widget Studio allowlist.

Step-by-step install

1. 1

   Copy the Showit iframe from Widget Studio

   Go to classflow.studio → your studio → Marketing → Embeds. Choose Schedule, then choose the Showit tab. Copy the secure hosted iframe code.

2. 2

   Open the Showit app

   Launch the Showit desktop app and open your site. Navigate to the canvas page where you want the widget to appear.

3. 3

   Add an Embed Code element

   Click the + (Add) button in the toolbar. FindEmbed Code under the Advanced orWidgets category and drag it onto the canvas where you want the widget.

4. 4

   Paste the snippet

   With the Embed Code element selected, click the Edit Code button in the right panel (or double-click the element). Paste the hosted iframe into the code editor. Click Save. This keeps account credentials and waiver signing on your studio-branded ClassFlow origin.

5. 5

   Resize the element to match widget height

   Showit is pixel-canvas - drag the Embed Code element to match the intended widget height. Start at 600 px tall for a Schedule widget. The widget fills the element's bounding box. You can adjust after publishing once you see the real content.

6. 6

   Set the element to scroll with page

   In the element settings panel, ensure the element is set to scroll with the page (not fixed) and is not clipped by a container withoverflow: hidden. Showit canvas containers sometimes clip child elements by default.

7. 7

   Publish and verify

   Click Publish in the Showit app toolbar. Open the live URL and confirm the widget loads. Then check Widget Studio →Where your widget is live.

Embed snippet

<iframe src="https://classflow.studio/book/your-studio-slug/schedule" title="Book a class" loading="lazy" style="width:100%;min-height:760px;border:0" allow="payment" referrerpolicy="strict-origin-when-cross-origin"></iframe>

Theming

Showit's embed elements load in an iframe, so your canvas styles do not cascade into the schedule. The hosted page automatically uses your studio logo, name, and primary color from ClassFlow Settings → Branding.

Multiple widgets on one page

Add a separate Embed Code element for each widget. Use the hosted iframe for schedules that need member sign-in; public display widgets such as Reviews can use their direct snippet.

Common gotchas

• Widget cut off / clipped.Check that the Embed Code element's container does not have overflow set to hidden. In Showit, right-click the container → Edit Styles and set Overflow toVisible.
• Widget not visible in canvas preview.Showit's in-app canvas preview blocks external scripts. Always test on the published site.
• Mobile canvas is separate.Showit has independent mobile and desktop canvases. If you want the widget on mobile too, switch to the mobile canvas and add a separate Embed Code element there.
• Height mismatch on mobile.Set the mobile Embed Code element height separately - the Schedule widget is taller on narrow screens. Start with 800 px on mobile and adjust.