Le widget d'intégration est un extrait JavaScript sur les comptes du palier Premium. Quand il ne s'affiche pas, le problème est généralement l'un de ceux-ci.
1. Es-tu en Premium ?
Le widget est Premium uniquement. Si tu es en Gratuit ou Pro, le script renvoie une réponse vide.
Vérifie /studio/settings/billing. Si tu n'es pas en Premium, passe au palier supérieur.
2. L'extrait est-il collé correctement
L'extrait a deux parties :
<script src="https://movementors.com/embed.js" data-studio="your-slug" data-mode="list" async></script>
<div id="movementors-embed"></div>
Les deux lignes doivent être présentes. Le script charge le code du widget ; le div est là où le widget s'affiche.
Erreurs courantes :
- Seule la balise de script est collée, le div manque.
- L'attribut
data-studioa une faute de frappe (cela devrait être le slug de ton studio). - L'URL src du script est fausse (devrait être exactement
https://movementors.com/embed.js).
Recopie depuis /studio/settings/embed pour être sûr.
3. Ouvre la console du navigateur
Si l'extrait est correct mais que rien ne s'affiche, ouvre la console développeur de ton navigateur (F12 ou clic droit → Inspecter → Console).
Cherche les messages d'erreur rouges. Les plus courants :
"Refus de charger le script..."
La Content Security Policy (CSP) de ton site nous bloque. Tu dois autoriser movementors.com dans :
script-src(pour le JavaScript).frame-src(pour l'iframe dans laquelle le widget s'affiche).connect-src(pour les appels API que fait le widget).
Mets à jour ton en-tête CSP sur ton site pour inclure cela. Si tu ne contrôles pas la CSP (tu es sur Squarespace / Wix), consulte leurs docs pour "CSP personnalisée" ou liste blanche de scripts externes.
"Failed to fetch"
Ton réseau bloque la requête. Causes courantes :
- Proxy / pare-feu d'entreprise.
- Extension de navigateur bloquant les traqueurs (Privacy Badger, etc.).
- Bloqueurs de pub.
Teste dans une fenêtre privée avec les extensions désactivées. Si ça marche là, une extension est la cause.
"Erreur Cross-Origin Resource Sharing (CORS)"
Ton domaine n'est peut-être pas autorisé par notre politique CORS. Nous autorisons toutes les origines par défaut ; les erreurs CORS indiquent généralement un problème différent (la réponse elle-même a échoué, et le navigateur reporte comme CORS).
Vérifie l'onglet réseau pour le statut de réponse réel. Un 403 ou 404 signifie que l'URL du script est fausse.
4. Le slug du studio est faux
L'attribut data-studio doit correspondre exactement au slug de ton studio. Sensible à la casse.
Si tu as changé ton slug, mets à jour l'extrait sur ton site.
5. Erreurs JavaScript sur ton propre site
Le widget suppose un environnement JavaScript fonctionnel. Si ton site a une erreur JavaScript AVANT que le widget se charge, le widget peut ne pas s'initialiser.
Vérifie la console pour toute erreur non-MoveMentors. Corrige-les d'abord ; le widget revient souvent.
6. Le div conteneur est masqué
Assure-toi que <div id="movementors-embed"></div> est dans la page et n'est pas masqué par CSS.
Inspecte l'élément sur le div ; vérifie qu'il a des dimensions (hauteur > 0) et est visible. Parfois un conteneur parent a display: none ou height: 0.
7. Le widget s'affiche mais au mauvais endroit
Le widget s'affiche à l'intérieur de <div id="movementors-embed">. Si ce div est au mauvais endroit sur ta page, le widget le sera aussi.
Déplace le div là où tu veux le widget. Actualise.
8. La mise en page semble cassée
Le widget est responsive mais peut entrer en collision avec la CSS de ton site. Vérifie :
- Le conteneur a assez de largeur (au moins 320px pour mobile ; 600px+ recommandé).
- La CSS de ton site ne définit pas
* { display: block }ou des surcharges similaires sur les éléments internes du widget. - Le conteneur n'a pas
overflow: hiddenqui coupe le widget.
Essaie d'encapsuler l'extrait dans un conteneur avec CSS reset :
<div style="all: revert; width: 100%; min-height: 600px;">
<script src="..." ...></script>
<div id="movementors-embed"></div>
</div>
9. Spécificités Squarespace / Wix / Webflow
Chaque constructeur a sa propre façon d'intégrer du HTML personnalisé :
- Squarespace : Utilise un élément "Bloc de code". Colle l'extrait.
- Wix : Utilise l'élément "Embed HTML".
- Webflow : Utilise l'élément "Embed".
- WordPress (Gutenberg) : Utilise le bloc "HTML personnalisé".
Si ton constructeur restreint quels domaines peuvent être intégrés, tu pourrais avoir besoin d'un plan payant qui autorise les scripts externes. Consulte leurs docs.
10. Rendu mobile
Si le widget fonctionne sur bureau mais pas sur mobile :
- Teste dans des navigateurs spécifiques mobiles (Safari mobile, Chrome sur Android).
- Vérifie la balise meta viewport :
<meta name="viewport" content="width=device-width, initial-scale=1">devrait être sur ta page. - Vérifie la largeur mobile du conteneur.
Le widget est conçu pour mobile mais suppose une configuration viewport saine.
Questions fréquentes
Puis-je avoir plusieurs widgets sur une page ?
Oui. Chaque <div id="movementors-embed"> a besoin d'un ID unique. Utilise movementors-embed-1, movementors-embed-2, etc., et référence le même dans un attribut data-target correspondant sur chaque balise de script. Voir Widget d'intégration avancé pour les détails.
Le widget se charge mais les cours n'apparaissent pas. Vérifie que ton studio a des cours actifs. Le widget filtre les cours inactifs. Vérifie aussi les filtres configurés dans /studio/settings/embed ; tu as peut-être trop filtré.
Puis-je personnaliser davantage l'apparence du widget ? Oui, via les variables CSS. Voir Widget d'intégration avancé.
Le widget fonctionnera-t-il si MoveMentors est en panne ?
Non. Le widget charge des scripts depuis movementors.com. Si nous sommes en panne, le widget échoue. Le reste du contenu de ton site n'est pas affecté.
Prochaines étapes
- Widget d'intégration : les bases.
- Widget d'intégration avancé : personnalisation et cas limites.