Widget d'intégration

Le widget d'intégration est un extrait JavaScript que tu colles dans ton site web existant. Il affiche le planning de cours de ton studio directement sur ta page, avec la fonctionnalité de réservation complète, sans que les élèves quittent ton site.

Fonctionnalité du palier Premium. Les paliers Pro et gratuit n'y ont pas accès ; passe au palier supérieur si tu le souhaites.

Pourquoi utiliser le widget d'intégration

Les studios avec leurs propres sites web (tonstudio.com) veulent généralement que les élèves réservent sur leur propre site pour des raisons de marque. Sans le widget, le choix est :

• Envoyer les élèves vers MoveMentors. Perd ton branding, les élèves peuvent rebondir.
• Construire ton propre système de réservation. Cher, compliqué, prend des mois.
• Utiliser le widget. Configuration en 5 minutes, flux de réservation complet à l'intérieur de ton site.

Le widget affiche le même flux de réservation que le site MoveMentors (filtres, cartes de cours, barre latérale de réservation, paiement) mais à l'intérieur d'une iframe sur ton site. La réservation est enregistrée comme réservation MoveMentors ; l'élève reçoit un e-mail de MoveMentors ; tu gères les réservations dans ton tableau de bord habituel.

À quoi ça ressemble

Quelques modes de rendu par défaut :

• Vue liste : une liste verticale de cours à venir. Idéal pour "tous les à venir" sur une page de réservation dédiée.
• Vue grille : une grille à 2 ou 3 colonnes de cartes de cours.
• Cours unique : juste un cours spécifique, avec la barre latérale de réservation en ligne.
• Vue calendrier : un calendrier semaine ou mois avec des blocs de cours. Idéal pour les studios à plannings denses.

Tu choisis le mode dans la configuration du widget. Tu peux avoir plusieurs widgets sur le même site (par ex. un cours en vedette sur la page d'accueil, une liste complète sur /book).

Configuration

1. 1

   Va sur /studio/settings/embed

   La page des paramètres du widget d'intégration.

2. 2

   Choisis un mode de widget

   Liste, grille, cours unique, ou calendrier.

3. 3

   Configure les filtres

   Filtre éventuellement la vue intégrée sur des lieux, catégories ou profs spécifiques. Par exemple, "n'afficher que les cours au lieu de Brooklyn" ou "n'afficher que le yoga, pas le pilates".

4. 4

   Personnalise le style

   Le widget hérite d'un look par défaut. Tu peux surcharger :

   • Couleur primaire (correspond à ta marque).
   • Famille de police.
   • Rayon de bordure.
   • Densité d'espacement.
   • Mode sombre (si ton site est sombre).

   Les variables CSS te laissent faire la plupart des personnalisations sans écrire de code.

5. 5

   Copie l'extrait

   La page génère un extrait comme :

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

   Colle les deux lignes dans le HTML de ton site où tu veux que le widget s'affiche.

6. 6

   Vérifie sur ton site

   Charge ton site dans un navigateur. Le widget devrait apparaître en 1 à 2 secondes.

   S'il n'apparaît pas, voir Le widget d'intégration ne se charge pas.

Où le placer

Quelques placements courants :

• Une page dédiée /book ou /schedule. Le plus courant. Dimensionné pour s'adapter à la zone de contenu de ton site.
• La page d'accueil dans une section "cours en vedette". Une grille de 3 à 6 cours à venir.
• Pages promotionnelles individuelles de cours. Un widget "Réserver cet atelier" en ligne à cours unique.
• Un bouton flottant collant. "Réserver un cours" qui s'étend vers le widget au clic.

Le widget est responsive ; il s'adapte à la largeur du conteneur.

Que se passe-t-il quand un élève réserve via le widget

Le flux de réservation est identique à la réservation sur MoveMentors directement :

1. L'élève choisit un cours et une séance.
2. L'élève remplit la barre latérale de réservation (places, participants, moyen de paiement, etc.).
3. L'élève paie (Stripe Checkout s'ouvre dans un nouvel onglet ; les moyens manuels fonctionnent pareil).
4. La confirmation apparaît dans le widget.
5. L'élève reçoit un e-mail de confirmation de réservation de MoveMentors.

La réservation est enregistrée dans MoveMentors. Tu la vois dans ton tableau de bord normal à /studio/bookings. Les paiements Stripe vont sur ton compte Stripe Connect exactement comme si l'élève avait réservé sur MoveMentors directement.

Le widget n'est qu'une couche d'UI. Les données et la logique métier sont les mêmes que le reste de la plateforme.

Suivi des réservations widget

Le tableau de bord tague chaque réservation avec sa source : "Web" (MoveMentors directement), "Embed" (via ton widget), "MCP" (via un assistant IA), "Walk-in" (ajoutée manuellement).

Filtre la liste des réservations par source pour voir "toutes les réservations arrivées via mon propre site". Utile pour mesurer l'impact du widget.

Tu peux aussi mettre en place un suivi d'événement Google Analytics / similaire sur le widget ; nous émettons des événements standardisés (widget_loaded, class_viewed, booking_started, booking_completed) que ton analytique peut capter.

Sécurité et intégration

Le widget tourne dans une iframe en interne. Cela isole le JavaScript de ton site du JavaScript de MoveMentors (les protections de scripting inter-frames s'appliquent).

Nous utilisons du sandboxing sur l'iframe avec sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox", pas de allow-same-origin. Le widget ne peut pas lire les cookies sur ton site ou tenter d'autres manigances inter-origines.

Compatible CSP : si ton site a une Content-Security-Policy stricte, tu dois autoriser movementors.com dans frame-src et script-src.

Branding et personnalisation

Le widget peut être stylé pour s'adapter à ton site. Variables CSS que tu peux surcharger :

• --mm-primary-color : la couleur de bouton et d'accent.
• --mm-font-family : police de caractères.
• --mm-border-radius : coins.
• --mm-spacing-unit : densité.
• --mm-card-shadow : profondeur des cartes.

Pour une personnalisation plus poussée (mises en page différentes, logique personnalisée), voir Widget d'intégration avancé.

Ce que tu ne peux pas faire via le widget

• Champs de réservation personnalisés au-delà de ce que MoveMentors supporte.
• Règles de tarification personnalisées (par ex. des codes promo spécifiques au site qui n'existent pas sur MoveMentors).
• Masquer les confirmations de réservation / reçus (MoveMentors les envoie quand même).

Ce sont des contraintes au niveau plateforme ; le widget est une couche UI fine sur le flux de réservation standard.

Questions fréquentes

Puis-je utiliser le widget sans être en Premium ? Non. Fonctionnalité Premium uniquement.

Le widget ralentira-t-il mon site ? Le widget se charge de manière asynchrone (l'attribut async sur la balise de script). Il ne bloque pas le rendu de la page. Le rendu initial du widget prend environ 1 à 2 secondes ; les utilisateurs voient un squelette de placeholder pendant ce temps.

Puis-je l'intégrer sur plusieurs sites ? Oui. Le même extrait fonctionne sur n'importe quel nombre de sites. Chaque réservation revient quand même vers le compte MoveMentors de ton studio.

Puis-je thématiser le widget pour un usage en marque blanche (avec un logo personnalisé, une marque complètement différente) ? L'indicateur "powered by MoveMentors" est requis par défaut. Nous pourrions ajouter une option marque blanche pour les clients entreprise ; pas disponible actuellement.

Le widget intégré fonctionne-t-il sur Squarespace / Wix / etc. ? Oui. La plupart des constructeurs de sites no-code permettent des blocs HTML personnalisés. Colle l'extrait dans l'un de ces blocs.

Prochaines étapes

• Widget d'intégration avancé pour une personnalisation plus poussée.
• Paliers d'abonnement studio : le palier qui débloque cela.