Le widget d'intégration met ton planning réservable sur ton propre site web avec une seule balise script. Le générateur d'extraits sur /mentor/settings/embed construit la balise pour toi, avec un sélecteur de type (Tout, Cours, Événements, Retraites, Vidéos), des réglages de thème et de couleur d'accent, et un aperçu en direct. Cet article documente tout ce que le widget sait faire au-delà de ces réglages par défaut.
Le widget est une fonctionnalité Premium. Sur les autres paliers, le script se charge quand même, mais affiche un court message « intégration indisponible » à la place de ton planning.
L'extrait
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" async></script>
Une seule balise script fait le travail. Il n'y a pas d'iframe : le widget se monte dans un Shadow DOM, donc le CSS de ton site ne peut pas fuir dans le widget et le CSS du widget ne peut pas fuir dans ton site. Par défaut, il s'affiche exactement là où tu colles la balise.
Le générateur de snippets ajoute une ligne sous la balise script : un simple lien vers ta page MoveMentors, par exemple "Réserver un cours avec Keva Price sur MoveMentors". Il s'affiche sous le widget et garde ton lien de réservation accessible aux visiteurs dont le navigateur bloque les scripts. Tu peux modifier le texte ou supprimer la ligne.
MENTOR_ID est ton identifiant de mentor. Le générateur d'extraits le remplit ; tu n'as jamais besoin de le chercher à la main.
Tous les attributs
| Attribut | Ce qu'il fait |
|---|---|
data-mentor | Obligatoire. Ton identifiant de mentor, rempli par le générateur d'extraits. |
data-mode | Thème : light, dark ou auto (par défaut). auto suit le réglage système du visiteur. |
data-accent | Couleur d'accent pour les boutons et les surlignages. N'importe quelle couleur CSS, par exemple #4F8C5E. |
data-target | Un sélecteur CSS où monter le widget, par exemple #my-container. Par défaut : le widget s'affiche là où se trouve la balise script. |
data-kind | Filtre le catalogue : all (par défaut), classes, events, retreats ou videos. videos n'affiche que ta bibliothèque de vidéos. |
data-layout | list (par défaut) ou cards. |
data-locale | Langue du widget : en, es, pt, de, fr, it ou nl. Par défaut : la langue de la page hôte, puis celle du navigateur du visiteur. |
data-detail-mode | Comment un cours s'ouvre : inline, modal ou page. Remplace le réglage par défaut enregistré dans le configurateur. page navigue vers le modèle de page que tu as configuré. |
data-detail-target | Mode page uniquement : _self (par défaut) ou _blank pour ouvrir dans un nouvel onglet. |
data-class | Un slug de cours. Mode réservation seule : le widget saute le catalogue et monte directement la vue détaillée de ce cours. |
data-schedule | Un identifiant de séance. Épingle le widget à une date précise d'un cours et ouvre le formulaire de réservation directement sur cette séance. |
data-show-icon | true ou false. Affiche ou masque ta photo de profil dans l'en-tête du widget. |
data-show-name | true ou false. Affiche ou masque ton nom dans l'en-tête. |
data-show-location | true ou false. Affiche ou masque ta localisation dans l'en-tête. |
data-show-language | true ou false. Affiche ou masque les pastilles de langue sur les cours. |
Les fautes de frappe retombent sur des valeurs sûres : un data-kind inconnu affiche all plutôt qu'un widget vide, et un data-detail-mode inconnu retombe sur ton réglage enregistré.
Ce que les visiteurs peuvent faire dans le widget
Le widget déroule le même flux de réservation que ta page MoveMentors :
- Parcourir tes prochains cours, événements et retraites. Les retraites affichent une carte avec plage de dates et partagent un même plafond de places sur l'ensemble de leurs jours.
- Réserver en invité avec juste un nom et un email, ou se connecter : une fenêtre popup les connecte à movementors.com et le widget continue avec leur compte. Abonnements, packs de cours et codes promo s'appliquent une fois connecté. Le mot de passe se tape sur movementors.com, jamais sur le site hôte.
- Payer par carte (le paiement hébergé Stripe s'ouvre, puis revient) ou par n'importe quel moyen hors plateforme que tu acceptes, comme virement, espèces ou portefeuilles électroniques, avec tes instructions de paiement affichées sur place. Les cours en ligne payants sont uniquement par carte ; les cours en ligne gratuits ne demandent aucun paiement.
- Réserver pour un groupe avec une taille de groupe et des participants nommés, ajouter des options par cours et laisser un pourboire.
- Utiliser des codes promo (connecté uniquement).
- Payer une retraite en plusieurs fois quand elle a un plan de versements : le premier versement est débité au moment du paiement, les suivants sont débités automatiquement sur la carte enregistrée aux dates du plan, avec un rappel par email avant chaque débit et un reçu après.
Les réservations faites dans le widget sont des réservations MoveMentors normales : mêmes emails de confirmation, même tableau de bord, mêmes parcours d'annulation.
La bibliothèque de vidéos dans le widget
Avec data-kind="videos" (ou au sein de all), tes vidéos publiées s'affichent en cartes, gratuites ou payantes :
- Les visiteurs connectés (via la fenêtre de connexion du widget) récupèrent les vidéos gratuites ou achètent par carte via Stripe sans quitter la page ; la vidéo est enregistrée dans leur compte MoveMentors. Tu gardes 100 pour cent de chaque vente.
- Les visiteurs non connectés sont envoyés vers la page de la vidéo sur movementors.com pour se connecter, ou créer un compte MoveMentors gratuit, et récupérer ou acheter là-bas. Dans les deux cas la vidéo atterrit dans leur compte, prête à être regardée sur n'importe quel appareil où ils se connectent.
Le visionnage se fait sur movementors.com, donc le site hôte n'a jamais besoin d'un lecteur vidéo. Voir Vendre des vidéos depuis ta vidéothèque.
Configurations multi-widgets
Le widget se charge une fois par page : une deuxième balise script sur la même page est ignorée. Pour avoir des widgets différents, place-les sur des pages différentes de ton site et varie les attributs.
Une bibliothèque vidéos seule sur ta page /videos :
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="videos" async></script>
Un widget d'événements sur ta page /workshops, en cartes :
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="events" data-layout="cards" async></script>
Si ton éditeur de site ne te laisse ajouter des scripts qu'à un endroit fixe (un bloc de pied de page, par exemple), utilise data-target pour monter le widget là où tu le veux vraiment :
<div id="schedule"></div>
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-target="#schedule" async></script>
Mode réservation seule
Pour une page dédiée à une seule offre, saute complètement le catalogue. data-class monte la vue détaillée d'un seul cours, avec son sélecteur de séances et son formulaire de réservation :
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-class="sunrise-yoga" async></script>
Pour épingler une séance précise (« réserve le cours de vendredi »), utilise l'identifiant de la séance. Le formulaire de réservation s'ouvre directement sur cette date, sans rien choisir :
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-schedule="SCHEDULE_ID" async></script>
Si data-class et data-schedule sont tous les deux définis, data-schedule gagne.
La liste d'origines autorisées
Par défaut, n'importe quel site web avec ton extrait peut intégrer ton widget. Pour verrouiller, ajoute les origines de tes sites sur /mentor/settings/embed (jusqu'à 20). Une origine, c'est le schéma plus le domaine, par exemple https://www.pamelaspilates.com. Dès qu'au moins une origine est listée, tout autre site voit un état clair « non autorisé » à la place de ton planning.
Attention : https://example.com et https://www.example.com sont des origines différentes. Si ton site répond sur les deux, liste les deux.
Statistiques de l'intégration
/mentor/settings/embed montre ce que le widget fait pour toi : vues (chargements du widget), ouvertures de cours, réservations commencées et terminées, plus les sites d'où elles viennent. Les réservations elles-mêmes apparaissent dans ton tableau de bord habituel avec tout le reste.
Ce que le widget ne sait pas encore faire
- Il n'y a pas de widget studio. Le widget intègre le planning d'un mentor ; les studios ne peuvent pas encore intégrer leur planning multi-enseignants.
- Il n'y a pas d'injection de CSS personnalisé. Le Shadow DOM scelle les styles dans les deux sens ; utilise
data-accentetdata-modepour coller à ta marque.
Étapes suivantes
- Le widget d'intégration ne se charge pas : la checklist quand rien ne s'affiche.
- Paliers mentor : le palier qui débloque le widget.