De embed-widget is een JavaScript-snippet op Premium-tier accounts. Wanneer hij niet rendert, ligt het probleem meestal aan één van deze.
1. Zit je op Premium?
De widget is Premium-only. Als je op Free of Pro zit, geeft het script een lege response terug.
Check /studio/settings/billing. Als je niet op Premium zit, upgrade.
2. Is de snippet correct geplakt
De snippet heeft twee delen:
<script src="https://movementors.com/embed.js" data-studio="your-slug" data-mode="list" async></script>
<div id="movementors-embed"></div>
Beide regels moeten aanwezig zijn. Het script laadt de widget-code; de div is waar de widget rendert.
Veelvoorkomende fouten:
- Alleen de script-tag is geplakt, de div ontbreekt.
- Het
data-studioattribuut heeft een typefout (het zou je studio-slug moeten zijn). - De script-src URL is fout (moet exact
https://movementors.com/embed.jszijn).
Kopieer opnieuw vanuit /studio/settings/embed om zeker te zijn.
3. Open browser-console
Als de snippet correct is maar er rendert niets, open je browser-developerconsole (F12 of rechtsklikken → Inspect → Console).
Zoek naar rode foutmeldingen. Veelvoorkomende:
"Refused to load the script..."
Het Content Security Policy (CSP) van je site blokkeert ons. Je moet movementors.com toestaan in:
script-src(voor de JavaScript).frame-src(voor de iframe waarin de widget rendert).connect-src(voor API-calls die de widget maakt).
Werk je CSP-header op je site bij om deze te bevatten. Als je de CSP niet beheert (je zit op Squarespace / Wix), check hun docs voor "Custom CSP" of whitelisting van externe scripts.
"Failed to fetch"
Je netwerk blokkeert het verzoek. Veelvoorkomende oorzaken:
- Corporate proxy / firewall.
- Browser-extensie die trackers blokkeert (Privacy Badger, enz.).
- Adblockers.
Test in een Incognito / Private venster met extensies uitgeschakeld. Als het daar werkt, is een extensie de oorzaak.
"Cross-Origin Resource Sharing (CORS) error"
Je domein mag mogelijk niet door ons CORS-beleid. We staan standaard alle origins toe; CORS-fouten duiden meestal op een ander probleem (de response zelf faalde, en de browser rapporteert als CORS).
Check het network-tabblad voor de werkelijke responsestatus. Een 403 of 404 betekent dat de script-URL fout is.
4. Studio-slug is fout
Het data-studio attribuut moet exact matchen met je studio-slug. Hoofdlettergevoelig.
Als je je slug hebt gewijzigd, werk de snippet op je site bij.
5. JavaScript-fouten op je eigen site
De widget veronderstelt een werkende JavaScript-omgeving. Als je site een JavaScript-fout heeft VOOR de widget laadt, kan de widget niet initialiseren.
Check de console voor niet-MoveMentors fouten. Repareer die eerst; de widget komt vaak terug.
6. De container-div is verborgen
Zorg dat de <div id="movementors-embed"></div> op de pagina staat en niet is verborgen door CSS.
Inspect element op de div; check dat hij dimensies heeft (height > 0) en zichtbaar is. Soms heeft een parent-container display: none of height: 0.
7. De widget rendert maar op de verkeerde plek
De widget rendert in de <div id="movementors-embed">. Als die div op de verkeerde plek op je pagina staat, is de widget dat ook.
Verplaats de div naar waar je de widget wilt. Vernieuw.
8. Lay-out ziet er kapot uit
De widget is responsive maar kan botsen met de CSS van je site. Check:
- De container heeft genoeg breedte (minstens 320px voor mobiel; 600px+ aanbevolen).
- De CSS van je site stelt geen
* { display: block }of vergelijkbare overrides in op de interne elementen van de widget. - De container heeft geen
overflow: hiddendie de widget afsnijdt.
Probeer de snippet in een container met reset CSS te wrappen:
<div style="all: revert; width: 100%; min-height: 600px;">
<script src="..." ...></script>
<div id="movementors-embed"></div>
</div>
9. Squarespace / Wix / Webflow specifiek
Elke builder heeft een eigen manier om custom HTML in te bedden:
- Squarespace: Gebruik een "Code Block" element. Plak de snippet.
- Wix: Gebruik het "HTML Embed" element.
- Webflow: Gebruik het "Embed" element.
- WordPress (Gutenberg): Gebruik het "Custom HTML" blok.
Als je builder beperkt welke domeinen kunnen worden ingebed, kun je een betaald plan nodig hebben dat externe scripts toelaat. Check hun docs.
10. Mobiele rendering
Als de widget werkt op desktop maar niet op mobiel:
- Test in mobiel-specifieke browsers (Mobile Safari, Chrome op Android).
- Check viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">zou op je pagina moeten staan. - Check de mobiele breedte van de container.
De widget is ontworpen voor mobiel maar veronderstelt een verstandige viewport-setup.
Veelgestelde vragen
Kan ik meerdere widgets op één pagina hebben?
Ja. Elke <div id="movementors-embed"> heeft een unieke ID nodig. Gebruik movementors-embed-1, movementors-embed-2, enz., en verwijs naar dezelfde in een bijbehorend data-target attribuut op elke script-tag. Zie embed-widget geavanceerd voor de details.
De widget laadt maar lessen verschijnen niet. Check of je studio actieve lessen heeft. De widget filtert inactieve lessen eruit. Check ook de filters geconfigureerd in /studio/settings/embed; je hebt mogelijk te agressief gefilterd.
Kan ik het uiterlijk van de widget verder aanpassen? Ja, via CSS-variabelen. Zie embed-widget geavanceerd.
Werkt de widget als MoveMentors plat ligt?
Nee. De widget laadt scripts van movementors.com. Als wij plat liggen, faalt de widget. De andere content van je site wordt niet beïnvloed.
Volgende stappen
- Embed-widget: de basis.
- Embed-widget geavanceerd: aanpassing en edge cases.