Add your schedule to your website

You can put your live class schedule right on your own website. Visitors see your real upcoming classes — the same ones on your KADRE storefront — and tapping Book sends them to your studio page to sign in and reserve. Nothing but a small snippet lives on your site; no member data and no account ever touch it.

You generate the snippet in Settings → Embed. Turn the widget on, pick a default view and theme, and copy one of the three snippets below. Any change you make in KADRE — a new class, a cancellation — shows up automatically; you never re-paste.

Three snippets — pick the one that fits your site

• Script tag (recommended). Works on any website — WordPress, Squarespace, Wix, Shopify, PHP, plain HTML. It resizes itself to fit your classes and can match your site’s light or dark theme. Use this one unless you have a reason not to.
• Plain iframe. For sites that strip out <script> tags (some Squarespace and Wix blocks do), or if you simply prefer an iframe. It works fine but has a fixed height and won’t auto-resize.
• React / JSX. For sites built with React (Next.js, Vite, Create React App). It drops an <iframe> into a component. Because no loader script runs, it uses a fixed minHeight you can tune — or add the script tag for auto-resize.

WordPress

1. Edit the page or post where you want the schedule.
2. Add a Custom HTML block (in the block editor, “+” → Custom HTML).
3. Paste the Script tag snippet and update/publish. The schedule appears where the block sits.

Shopify

1. In your theme editor, add a Custom Liquid section (or a Custom Liquid block) to the page.
2. Paste the Script tag snippet into it and save.
3. Prefer not to edit the theme? Add a page in Online Store → Pages, switch the content box to </> (Show HTML), and paste the Plain iframe snippet.

Squarespace / Wix

1. Add an Embed or Code block where you want the schedule.
2. Paste the Script tag snippet.
3. If the builder strips the script or the schedule doesn’t appear, use the Plain iframe snippet instead — some Squarespace and Wix blocks block scripts.

Any other site — PHP, custom, React, static HTML

• PHP, static HTML, or a custom CMS: paste the Script tag snippet into your page’s HTML wherever you want the schedule to render.
• React (Next.js, Vite, CRA): paste the React / JSX snippet into a component. Adjust the minHeight to suit, or drop in the script tag if you want it to resize on its own.

Customize what shows

The snippet carries a few settings. Change them in the Embed tab (the snippet updates), or edit them by hand:

• View (data-view): schedule shows your full day-tabbed schedule; next_up shows a compact “up next” list. Great for a sidebar or footer.
• Theme (data-theme): auto follows your visitor’s site or system; light or dark pins it.
• Studio (data-studio): your studio’s slug — the address your storefront lives at, like yourstudio in yourstudio.kadre.fit. The snippet fills this in for you.

When someone taps Book, your real storefront opens in a new tab so they can sign in and reserve — booking never happens inside the widget on your page. That keeps their sign-in on your secure KADRE page, never on your marketing site.

Troubleshooting

• The schedule doesn’t appear. Your site builder is probably stripping the script. Use the Plain iframe snippet instead.
• The height looks cut off or won’t resize. Only the Script tag auto-resizes. With the plain iframe or React snippet, raise the fixed height (min-height / minHeight) until your classes fit.
• It says to configure your studio first. The snippet needs your studio to be set up and the widget switched on in the Embed tab. Turn it on there, then copy the snippet again.

Still stuck? Email support@kadre.fit.