Embed widget

The embed widget is a JavaScript snippet you paste into your existing website. It renders your studio's class schedule directly on your page, with full booking functionality, without students leaving your site.

Premium-tier feature. Pro and free tiers do not have access; upgrade if you want it.

Why use the embed widget

Studios with their own websites (yourstudio.com) typically want students to book on their own site for brand reasons. Without the widget, the choice is:

• Send students off to MoveMentors. Loses your branding, students may bounce.
• Build your own booking system. Expensive, complicated, takes months.
• Use the widget. 5-minute setup, full booking flow inside your site.

The widget renders the same booking flow as the MoveMentors site (filters, class cards, booking sidebar, payment) but inside an iframe on your site. The booking is recorded as a MoveMentors booking; the student gets emailed by MoveMentors; you manage bookings in your usual dashboard.

How it looks

A few default rendering modes:

• List view: a vertical list of upcoming classes. Best for "all upcoming" on a dedicated booking page.
• Grid view: a 2 or 3-column grid of class cards.
• Single class: just one specific class, with the booking sidebar inline.
• Calendar view: a week or month calendar with class blocks. Best for studios with dense schedules.

You pick the mode in the widget configuration. You can have multiple widgets on the same site (e.g. a featured class on the homepage, a full list on /book).

Setup

1. 1

   Go to /studio/settings/embed

   The embed widget settings page.

2. 2

   Pick a widget mode

   List, grid, single class, or calendar.

3. 3

   Configure filters

   Optionally filter the embedded view to specific locations, categories, or teachers. For example, "only show classes at the Brooklyn location" or "only show yoga, not pilates".

4. 4

   Customise the styling

   The widget inherits a default look. You can override:

   • Primary color (matches your brand).
   • Font family.
   • Border radius.
   • Spacing density.
   • Dark mode (if your site is dark).

   CSS variables let you do most customisations without writing code.

5. 5

   Copy the snippet

   The page generates a snippet like:

   <script src="https://movementors.com/embed.js" data-studio="your-slug" data-mode="list" async></script>
   <div id="movementors-embed"></div>
   

   Paste both lines into your site's HTML where you want the widget to render.

6. 6

   Verify on your site

   Load your site in a browser. The widget should appear in 1-2 seconds.

   If it does not appear, see Embed widget not loading.

Where to put it

A few common placements:

• A dedicated /book or /schedule page. Most common. Sized to fit your site's content area.
• The homepage in a "featured classes" section. A grid of 3-6 upcoming classes.
• Individual class promo pages. A "Book this workshop" inline single-class widget.
• A floating sticky button. "Book a class" that expands to the widget on click.

The widget is responsive; it adapts to the container width.

What happens when a student books via the widget

The booking flow is identical to booking on MoveMentors directly:

1. Student picks a class and a session.
2. Student fills in the booking sidebar (seats, attendees, payment method, etc).
3. Student pays (Stripe Checkout opens in a new tab; manual methods work the same).
4. Confirmation appears in the widget.
5. Student gets a booking confirmation email from MoveMentors.

The booking is recorded in MoveMentors. You see it in your normal dashboard at /studio/bookings. Stripe payments go to your Stripe Connect account exactly as if the student had booked on MoveMentors directly.

The widget is just a UI layer. The data and business logic are the same as the rest of the platform.

Tracking widget bookings

The dashboard tags each booking with its source: "Web" (MoveMentors directly), "Embed" (via your widget), "MCP" (via an AI assistant), "Walk-in" (manually added).

Filter the bookings list by source to see "all bookings that came in via my own site". Useful for measuring the widget's impact.

You can also set up Google Analytics / similar event tracking on the widget; we emit standardised events (widget_loaded, class_viewed, booking_started, booking_completed) that your analytics can capture.

Security and embedding

The widget runs in an iframe under the hood. This isolates your site's JavaScript from MoveMentors's JavaScript (cross-frame scripting protections apply).

We use sandboxing on the iframe with sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox", no allow-same-origin. The widget cannot read cookies on your site or attempt other cross-origin shenanigans.

CSP-friendly: if your site has a strict Content-Security-Policy, you need to allow movementors.com in frame-src and script-src.

Branding and customisation

The widget can be styled to fit your site. CSS variables you can override:

• --mm-primary-color: the button and accent color.
• --mm-font-family: typeface.
• --mm-border-radius: corners.
• --mm-spacing-unit: density.
• --mm-card-shadow: card depth.

For deeper customisation (different layouts, custom logic), see Embed widget advanced.

What you cannot do via the widget

• Custom booking fields beyond what MoveMentors supports.
• Custom pricing rules (e.g. site-specific discount codes that do not exist on MoveMentors).
• Hide booking confirmations / receipts (MoveMentors still sends them).

These are platform-level constraints; the widget is a thin UI over the standard booking flow.

Common questions

Can I use the widget without being on Premium? No. Premium-only feature.

Will the widget slow down my site? The widget loads asynchronously (the async attribute on the script tag). It does not block page rendering. Initial widget render takes ~1-2 seconds; users see a placeholder skeleton during that time.

Can I embed on multiple sites? Yes. The same snippet works on any number of sites. Each booking still goes back to your studio's MoveMentors account.

Can I theme the widget for white-label use (with a custom logo, completely different brand)? The "powered by MoveMentors" indicator is required by default. We may add a white-label option for enterprise customers; not currently available.

Does the embedded widget work on Squarespace / Wix / etc? Yes. Most no-code site builders allow custom HTML embed blocks. Paste the snippet into one of those blocks.

Next steps

• Embed widget advanced for deeper customisation.
• Studio subscription tiers: the tier that unlocks this.