Add ClassFlow to Your Showit Site

Prerequisites

• ✓ A Showit plan that includes Embed Code elements.
• ✓ A ClassFlow studio account.
• ✓ Your studio slug from Website widgets.
• ✓ Your ClassFlow schedule visible on its hosted booking page.

Step-by-step install

1. 1

   Copy the Showit iframe from Website widgets

   Go to classflow.studio → your studio → Marketing → Website widgets. Choose Schedule, then choose Showit. 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

   Make the Embed Code element about 760 px tall. Adjust its height after publishing if the schedule is clipped.

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 schedule and sign-in controls load.

Embed snippet

<iframe src="https://classflow.studio/book/your-studio-slug/schedule" title="Class schedule" loading="lazy" width="100%" height="760" style="border:0;display:block" allow="payment"></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 schedule placement. This guide covers the schedule; other widget types need their own supported Showit instructions.

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.