De embed-widget dekt de meeste gebruikssituaties direct af. Dit artikel behandelt de diepere aanpassingsopties.
CSS-variabelen
De widget stelt CSS-variabelen beschikbaar die je kunt overschrijven:
| Variabele | Standaard | Doel |
|---|---|---|
--mm-primary-color | #1a1813 | Knop- en accentkleur |
--mm-primary-fg | #fff | Tekst op primaire kleur |
--mm-bg | #fff | Widget-achtergrond |
--mm-fg | #1a1813 | Standaard tekstkleur |
--mm-muted-fg | #5a5550 | Secundaire tekst |
--mm-border | #e5e1d8 | Kaartranden |
--mm-radius | 1rem | Border radius |
--mm-font-family | system-ui | Lettertype |
--mm-spacing | 1rem | Padding-dichtheid |
--mm-shadow | minimaal | Kaartschaduw |
Stel ze in op de container div:
<div id="movementors-embed" style="
--mm-primary-color: #c4533c;
--mm-radius: 0;
--mm-font-family: 'Helvetica Neue', sans-serif;
"></div>
Of in de stylesheet van je site:
#movementors-embed {
--mm-primary-color: #c4533c;
--mm-radius: 0;
}
Meerdere widgets per pagina
Je kunt meerdere widget-instanties op dezelfde pagina hebben. Elk heeft een unieke container-ID en een bijbehorende data-target op het script nodig.
<script src="https://movementors.com/embed.js" data-studio="your-slug" data-mode="single" data-class="yoga-flow" data-target="mm-featured" async></script>
<div id="mm-featured"></div>
<!-- elders op dezelfde pagina -->
<script src="https://movementors.com/embed.js" data-studio="your-slug" data-mode="list" data-target="mm-full-list" async></script>
<div id="mm-full-list"></div>
Beide widgets delen dezelfde script-load (de browser ontdubbelt), maar renderen in hun eigen containers.
Filter de embedded weergave
De configuratiepagina van de widget laat je filteren wat er getoond wordt. Je kunt ook overschrijven via data-* attributen:
| Attribuut | Effect |
|---|---|
data-location | Filter op een specifieke locatie-slug |
data-category | Filter op een categorie-slug (bijv. "yoga") |
data-teacher | Filter op een specifieke leraar (slug voor platform mentor, ID voor custom) |
data-limit | Maximaal aantal getoonde lessen |
data-from | Toon lessen die starten na deze datum (ISO-formaat) |
data-to | Toon lessen die starten voor deze datum |
Voorbeeld: een homepage-widget die alleen yoga-lessen van "de komende 7 dagen" op je hoofdlocatie toont:
<script src="https://movementors.com/embed.js"
data-studio="your-slug"
data-mode="grid"
data-category="yoga"
data-location="main-studio"
data-limit="6"
async></script>
<div id="movementors-embed"></div>
Event tracking
De widget vuurt custom events af waar je naar kunt luisteren:
movementors:loaded: widget-DOM is klaar.movementors:class-viewed: gebruiker heeft op een lesskaart geklikt.movementors:booking-started: gebruiker heeft het boekingsformulier geopend.movementors:booking-completed: boeking is gelukt.movementors:booking-failed: boeking is mislukt.
Luister via:
window.addEventListener('movementors:booking-completed', (e) => {
console.log('booking completed', e.detail);
// e.detail bevat: { bookingId, classId, classTitle, amountCents, currency }
});
Handig voor:
- Google Analytics: vuur een conversie-event af zodra een boeking is voltooid.
- Facebook Pixel: track voltooide boekingen.
- Interne analytics: log naar je eigen backend.
CSP-integratie
Als je site Content Security Policy heeft, moet je MoveMentors toestaan in deze directives:
Content-Security-Policy:
script-src 'self' https://movementors.com;
frame-src https://movementors.com;
connect-src 'self' https://movementors.com https://api.stripe.com;
img-src 'self' https://*.movementors.com https://res.cloudinary.com data:;
De widget zelf gebruikt intern iframe-sandboxing; je CSP hoeft alleen de framing toe te staan.
Authenticatie-handoff
De widget ondersteunt een "preauth" modus: als een gebruiker al is ingelogd op je site, kun je ze doorgeven aan MoveMentors zonder opnieuw om hun naam en e-mail te vragen.
<script src="https://movementors.com/embed.js"
data-studio="your-slug"
data-prefill-name="Jane Doe"
data-prefill-email="jane@example.com"
async></script>
<div id="movementors-embed"></div>
De waarden vullen het boekingsformulier vooraf in. De gebruiker kan ze bewerken; dit is gemak, geen veiligheidsgrens. (Ga er niet vanuit dat de gebruiker is "ingelogd" alleen omdat je waarden hebt voorgevuld; de daadwerkelijke boeking vereist nog steeds e-mailbevestiging.)
Server-side rendering
De widget is alleen client-side. Er is geen server-side gerenderde (SSR) versie die HTML uitzendt voor SEO-doeleinden.
Als je wilt dat je boekingspagina door zoekmachines wordt geïndexeerd met de volledige lesinhoud zichtbaar voor crawlers, link dan naar de bijbehorende MoveMentors les-detailpagina's (die WEL server-side gerenderd zijn) in plaats van te vertrouwen op de widget voor SEO.
Voor zichtbare "volgende 5 lessen" op je homepage die crawlers zouden moeten zien, overweeg ook te linken naar de MoveMentors directory; de widget biedt de boekings-UI, de link biedt SEO-waarde.
Performance
De widget-bundle is ongeveer 80KB gzipped. Hij laadt asynchroon (het async attribuut) en blokkeert dus niet de rendering van je pagina.
Initiële render: ongeveer 1 tot 2 seconden op een fatsoenlijke verbinding.
Na laden:
- Interacties met lesskaarten: direct (client-side state).
- Boekingsformulier openen: direct.
- Boeking indienen: hangt af van betaalmethode (Stripe Checkout voegt ongeveer 1 seconde redirect-overhead toe).
Als je site prestatie-kritisch is, kun je de widget liever lazy-loaden (alleen mounten na gebruikersinteractie). Patroon:
<button id="open-booking">Bekijk lessen</button>
<div id="movementors-embed"></div>
<script>
document.getElementById('open-booking').addEventListener('click', () => {
const s = document.createElement('script');
s.src = 'https://movementors.com/embed.js';
s.dataset.studio = 'your-slug';
s.async = true;
document.body.appendChild(s);
});
</script>
De widget laadt alleen bij een klik. Afweging: een kleine extra vertraging voor gebruikers die klikken.
Mobiele overwegingen
De widget is responsive. Hij past zich aan:
- Eenkolomslay-out onder 640px.
- Touch-vriendelijke tap-doelen (minimaal 44×44).
- Boekingsformulier gebruikt native mobiele toetsenborden (numeriek voor prijzen, e-mail voor e-mails).
Als je site een mobielspecifieke lay-out heeft (anders dan desktop), kan de widget per lay-out geconfigureerd worden: gebruik verschillende data-mode attributen op de desktop versus mobiele script-tags, gestuurd door CSS media queries.
Veelgestelde vragen
Kan ik een volledig white-label versie krijgen met mijn logo en geen MoveMentors-branding? Enterprise-klanten kunnen dit aanvragen. De standaardversie bevat een kleine "powered by MoveMentors" footer.
Kan ik de widget op meerdere domeinen draaien? Ja. De widget zet geen whitelist op domeinen. Iedereen met jouw studio-slug kan embedden.
Kan ik anderen verhinderen mijn widget in te bedden? Op dit moment niet. De widget haalt openbare lesgegevens op; iedereen die je slug kent kan embedden. We kunnen domein-allow-listing als enterprise-functie toevoegen.
Kan ik de velden van het boekingsformulier aanpassen? Op dit moment niet. De velden zijn hetzelfde als op de MoveMentors-site. Veldaanpassing staat op de roadmap.
Tellen widget-boekingen mee voor mijn MoveMentors-zichtbaarheid en ranking? Ja. Een boeking is een boeking, ongeacht de bron. Boekingen via embed tellen mee voor je studio-totalen, je reviews tellen op dezelfde manier op, enzovoort.
Volgende stappen
- Embed-widget: de basis.
- Embed-widget laadt niet: diagnose.