Embed-widget

De embed-widget is een JavaScript-snippet die je in je bestaande website plakt. Hij rendert het lesrooster van je studio direct op je pagina, met volledige boekingsfunctionaliteit, zonder dat studenten je site verlaten.

Premium-tier feature. Pro- en gratis tiers hebben geen toegang; upgrade als je hem wilt.

Waarom de embed-widget gebruiken

Studio's met eigen websites (yourstudio.com) willen doorgaans dat studenten op hun eigen site boeken om merkredenen. Zonder de widget is de keuze:

• Studenten doorsturen naar MoveMentors. Verliest je branding, studenten kunnen weglopen.
• Je eigen boekingssysteem bouwen. Duur, ingewikkeld, duurt maanden.
• De widget gebruiken. 5-minuten setup, volledige boekingsflow binnen je site.

De widget rendert dezelfde boekingsflow als de MoveMentors site (filters, leskaarten, boekings-sidebar, betaling) maar binnen een iframe op je site. De boeking wordt geregistreerd als een MoveMentors-boeking; de student wordt door MoveMentors gemaild; jij beheert boekingen in je gebruikelijke dashboard.

Hoe het eruitziet

Een paar standaard rendermodi:

• Lijstweergave: een verticale lijst van aankomende lessen. Beste voor "alle aankomende" op een dedicated boekingspagina.
• Rasterweergave: een 2- of 3-koloms raster van leskaarten.
• Enkele les: gewoon één specifieke les, met de boekings-sidebar inline.
• Agendaweergave: een week- of maandkalender met lesblokken. Beste voor studio's met dichte roosters.

Je kiest de modus in de widget-configuratie. Je kunt meerdere widgets op dezelfde site hebben (bijv. een uitgelichte les op de homepage, een volledige lijst op /book).

Setup

1. 1

   Ga naar /studio/settings/embed

   De instellingenpagina voor de embed-widget.

2. 2

   Kies een widget-modus

   Lijst, raster, enkele les of agenda.

3. 3

   Configureer filters

   Filter optioneel de embedded weergave op specifieke locaties, categorieën of leraren. Bijvoorbeeld "toon alleen lessen op de Brooklyn-locatie" of "toon alleen yoga, geen pilates".

4. 4

   Pas de styling aan

   De widget erft een standaard uiterlijk. Je kunt overschrijven:

   • Primaire kleur (matcht je merk).
   • Font family.
   • Border radius.
   • Padding-dichtheid.
   • Dark mode (als je site donker is).

   CSS-variabelen laten je de meeste aanpassingen doen zonder code te schrijven.

5. 5

   Kopieer de snippet

   De pagina genereert een snippet zoals:

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

   Plak beide regels in de HTML van je site waar je wilt dat de widget rendert.

6. 6

   Verifieer op je site

   Laad je site in een browser. De widget zou binnen 1 tot 2 seconden moeten verschijnen.

   Als hij niet verschijnt, zie Embed-widget laadt niet.

Waar te plaatsen

Een paar veelvoorkomende plaatsingen:

• Een dedicated /book of /schedule pagina. Meest voorkomend. Op maat van het content-gebied van je site.
• De homepage in een "featured classes" sectie. Een raster van 3 tot 6 aankomende lessen.
• Individuele les-promopagina's. Een "Boek deze workshop" inline enkele-les widget.
• Een zwevende sticky knop. "Boek een les" die bij klik uitvouwt naar de widget.

De widget is responsive; hij past zich aan de containerbreedte aan.

Wat gebeurt er wanneer een student via de widget boekt

De boekingsflow is identiek aan boeken op MoveMentors direct:

1. Student kiest een les en een sessie.
2. Student vult de boekings-sidebar in (plekken, deelnemers, betaalmethode, enz.).
3. Student betaalt (Stripe Checkout opent in een nieuw tabblad; handmatige methoden werken hetzelfde).
4. Bevestiging verschijnt in de widget.
5. Student krijgt een boekingsbevestigingsmail van MoveMentors.

De boeking wordt geregistreerd in MoveMentors. Je ziet hem in je normale dashboard op /studio/bookings. Stripe-betalingen gaan naar je Stripe Connect-account precies alsof de student direct op MoveMentors had geboekt.

De widget is gewoon een UI-laag. De data en businesslogica zijn dezelfde als de rest van het platform.

Widget-boekingen tracken

Het dashboard tagt elke boeking met de bron: "Web" (MoveMentors direct), "Embed" (via je widget), "MCP" (via een AI-assistent), "Walk-in" (handmatig toegevoegd).

Filter de boekingenlijst op bron om "alle boekingen die via mijn eigen site binnenkwamen" te zien. Handig voor het meten van de impact van de widget.

Je kunt ook Google Analytics / vergelijkbare event tracking op de widget opzetten; we zenden gestandaardiseerde events uit (widget_loaded, class_viewed, booking_started, booking_completed) die je analytics kan vangen.

Beveiliging en embedding

De widget draait onder de motorkap in een iframe. Dit isoleert de JavaScript van je site van de JavaScript van MoveMentors (cross-frame scripting-bescherming geldt).

We gebruiken sandboxing op de iframe met sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox", geen allow-same-origin. De widget kan geen cookies op je site lezen of andere cross-origin trucs proberen.

CSP-vriendelijk: als je site een strikt Content-Security-Policy heeft, moet je movementors.com toestaan in frame-src en script-src.

Branding en aanpassing

De widget kan gestyled worden om bij je site te passen. CSS-variabelen die je kunt overschrijven:

• --mm-primary-color: de knop- en accentkleur.
• --mm-font-family: lettertype.
• --mm-border-radius: hoeken.
• --mm-spacing-unit: dichtheid.
• --mm-card-shadow: kaartdiepte.

Voor diepere aanpassing (andere lay-outs, custom logica), zie Embed-widget geavanceerd.

Wat je niet via de widget kunt doen

• Custom boekingsvelden buiten wat MoveMentors ondersteunt.
• Custom prijsregels (bijv. site-specifieke kortingscodes die niet bestaan op MoveMentors).
• Boekingsbevestigingen / bonnetjes verbergen (MoveMentors stuurt ze nog steeds).

Dit zijn platform-niveau beperkingen; de widget is een dunne UI over de standaard boekingsflow.

Veelgestelde vragen

Kan ik de widget gebruiken zonder op Premium te zitten? Nee. Premium-only feature.

Vertraagt de widget mijn site? De widget laadt asynchroon (het async attribuut op de script-tag). Hij blokkeert geen pagina-rendering. Initiële widget-render duurt ongeveer 1 tot 2 seconden; gebruikers zien gedurende die tijd een placeholder-skelet.

Kan ik op meerdere sites embedden? Ja. Dezelfde snippet werkt op een willekeurig aantal sites. Elke boeking gaat nog steeds terug naar je studio's MoveMentors-account.

Kan ik de widget themen voor white-label gebruik (met een custom logo, volledig ander merk)? De "powered by MoveMentors" indicator is standaard vereist. We kunnen een white-label optie voor enterprise klanten toevoegen; momenteel niet beschikbaar.

Werkt de embedded widget op Squarespace / Wix / enz.? Ja. De meeste no-code sitebouwers laten custom HTML embed-blokken toe. Plak de snippet in een van die blokken.

Volgende stappen

• Embed-widget geavanceerd voor diepere aanpassing.
• Studio-abonnementstiers: de tier die dit ontgrendelt.