De embed-widget zet je boekbare rooster op je eigen website met één script-tag. De snippet-generator op /mentor/settings/embed bouwt de tag voor je, met een soortkiezer (Alles, Lessen, Events, Retraites, Video's), instellingen voor thema en accentkleur en een live voorbeeld. Dit artikel documenteert alles wat de widget kan voorbij die standaardinstellingen.
De widget is een Premium-feature. Op andere abonnementen laadt het script wel, maar toont het een korte melding "embed niet beschikbaar" in plaats van je rooster.
De snippet
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" async></script>
Eén script-tag, verder niets. Er is geen iframe: de widget mount in een Shadow DOM, dus de CSS van je site kan niet de widget in lekken en de CSS van de widget kan niet je site in lekken. Standaard rendert hij precies waar je de tag plakt.
MENTOR_ID is je mentor-ID. De snippet-generator vult hem in; je hoeft hem nooit zelf op te zoeken.
Alle attributen
| Attribuut | Wat het doet |
|---|---|
data-mentor | Verplicht. Je mentor-ID, ingevuld door de snippet-generator. |
data-mode | Thema: light, dark of auto (standaard). auto volgt de systeeminstelling van de bezoeker. |
data-accent | Accentkleur voor knoppen en accenten. Elke CSS-kleur, bijvoorbeeld #4F8C5E. |
data-target | Een CSS-selector om de widget in te mounten, bijvoorbeeld #my-container. Standaard: de widget rendert waar de script-tag staat. |
data-kind | Filtert de catalogus: all (standaard), classes, events, retreats of videos. videos rendert alleen je videobibliotheek. |
data-layout | list (standaard) of cards. |
data-locale | Taal van de widget: en, es, pt, de, fr, it of nl. Standaard: de taal van de hostpagina, daarna de browsertaal van de bezoeker. |
data-detail-mode | Hoe een les opent: inline, modal of page. Overschrijft de standaard die je in de configurator opsloeg. page navigeert naar het paginapatroon dat jij instelde. |
data-detail-target | Alleen in page-modus: _self (standaard) of _blank voor een nieuw tabblad. |
data-class | Een les-slug. Alleen-boeken-modus: de widget slaat de catalogus over en mount de detailweergave van die ene les. |
data-schedule | Een sessie-ID. Pint de widget vast op één datum van een les en opent het boekingsformulier direct op die sessie. |
data-show-icon | true of false. Toont of verbergt je profielfoto in de kop van de widget. |
data-show-name | true of false. Toont of verbergt je naam in de kop. |
data-show-location | true of false. Toont of verbergt je locatie in de kop. |
data-show-language | true of false. Toont of verbergt de taalchips op lessen. |
Typefouten vallen veilig terug: een onbekende data-kind-waarde rendert all in plaats van een lege widget, en een onbekende data-detail-mode valt terug op je opgeslagen standaard.
Wat bezoekers in de widget kunnen doen
De widget draait dezelfde boekingsflow als je MoveMentors-pagina:
- Door je aankomende lessen, events en retraites bladeren. Retraites tonen een kaart met datumbereik en delen één plafond aan plekken over al hun dagen.
- Boeken als gast met alleen naam en e-mail, of inloggen: een popup logt ze in op movementors.com en de widget gaat verder met hun account. Abonnementen, lespakketten en promocodes gelden zodra ze zijn ingelogd. Het wachtwoord wordt getypt op movementors.com, nooit op de hostsite.
- Betalen met kaart (de gehoste Stripe-checkout opent en keert daarna terug) of met elke betaalmethode buiten het platform die jij accepteert, zoals overschrijving, contant of wallets, met jouw betaalinstructies ter plekke getoond. Online lessen zijn alleen met kaart.
- Boeken voor een groep met groepsgrootte en deelnemers op naam, add-ons per les toevoegen en een fooi geven.
- Promocodes inwisselen (alleen ingelogd).
- Een retraite in termijnen betalen wanneer die een termijnplan heeft: de eerste termijn wordt bij de checkout afgeschreven, de rest wordt automatisch van de opgeslagen kaart afgeschreven op de data van het plan, met een e-mailherinnering voor elke afschrijving en een bonnetje erna.
Boekingen uit de widget zijn gewone MoveMentors-boekingen: dezelfde bevestigingsmails, hetzelfde dashboard, dezelfde annuleringsflows.
De videobibliotheek in de widget
Met data-kind="videos" (of als onderdeel van all) renderen je gepubliceerde video's als kaarten, gratis of betaald:
- Ingelogde bezoekers (via de inlogpopup van de widget) claimen gratis video's of rekenen af met kaart via Stripe zonder de pagina te verlaten; de video wordt in hun MoveMentors-account bewaard. Jij houdt 100 procent van elke verkoop.
- Niet-ingelogde bezoekers stuurt de widget naar de videopagina op movementors.com, waar ze inloggen of een gratis MoveMentors-account aanmaken en daar claimen of kopen. In beide gevallen belandt de video in hun account, te bekijken op elk apparaat waarop ze inloggen.
Kijken gebeurt op movementors.com, dus de hostsite heeft nooit een videospeler nodig. Zie Video's verkopen uit je bibliotheek.
Setups met meerdere widgets
De widget laadt één keer per pagina: een tweede script-tag op dezelfde pagina wordt genegeerd. Wil je verschillende widgets, zet ze dan op verschillende pagina's van je site en varieer de attributen.
Een bibliotheek met alleen video's op je /videos-pagina:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="videos" async></script>
Een events-widget op je /workshops-pagina, als kaarten:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="events" data-layout="cards" async></script>
Laat je sitebuilder scripts alleen op een vaste plek toe (een footerblok, bijvoorbeeld), gebruik dan data-target om de widget te mounten waar je hem echt wilt:
<div id="schedule"></div>
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-target="#schedule" async></script>
Alleen-boeken-modus
Voor een landingspagina over één aanbod sla je de catalogus helemaal over. data-class mount de detailweergave van één les, met sessiekiezer en boekingsformulier:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-class="sunrise-yoga" async></script>
Om één specifieke sessie vast te pinnen ("boek de les van vrijdag") gebruik je de sessie-ID. Het boekingsformulier opent direct op die datum, zonder te kiezen:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-schedule="SCHEDULE_ID" async></script>
Zijn data-class en data-schedule allebei gezet, dan wint data-schedule.
De origin-allowlist
Standaard kan elke website met jouw snippet je widget embedden. Wil je dat beperken, voeg dan de origins van je sites toe op /mentor/settings/embed (tot 20). Een origin is schema plus domein, bijvoorbeeld https://www.pamelaspilates.com. Zodra er minstens één origin op de lijst staat, ziet elke andere site een duidelijke "niet geautoriseerd"-status in plaats van je rooster.
Let op: https://example.com en https://www.example.com zijn verschillende origins. Antwoordt je site op allebei, zet ze dan allebei op de lijst.
Embed-statistieken
/mentor/settings/embed laat zien wat de widget voor je doet: weergaven (widget-loads), geopende lessen, gestarte en afgeronde boekingen, plus de sites waar ze vandaan kwamen. De boekingen zelf verschijnen in je gewone dashboard, samen met al het andere.
Wat de widget nog niet kan
- Er is geen studio-widget. De widget embedt het rooster van één mentor; studio's kunnen hun rooster met meerdere docenten nog niet embedden.
- Er is geen eigen CSS-injectie. De Shadow DOM verzegelt stijlen in beide richtingen; gebruik
data-accentendata-modeom bij je merk te passen.
Volgende stappen
- Embed-widget laadt niet: de checklist wanneer er niets rendert.
- Mentor-abonnementen: het abonnement dat de widget ontgrendelt.