Das Embed-Widget bringt deinen buchbaren Stundenplan mit einem einzigen Script-Tag auf deine eigene Website. Der Snippet-Generator unter /mentor/settings/embed baut den Tag für dich, mit Auswahl der Art (Alles, Kurse, Events, Retreats, Videos), Reglern für Thema und Akzentfarbe und einer Live-Vorschau. Dieser Artikel dokumentiert alles, was das Widget über diese Standardwerte hinaus kann.
Das Widget ist ein Premium-Feature. Auf anderen Stufen lädt das Script zwar, zeigt aber einen kurzen Hinweis "Embed nicht verfügbar" statt deines Stundenplans.
Das Snippet
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" async></script>
Ein Script-Tag erledigt die Arbeit. Es gibt kein Iframe: das Widget hängt sich in ein Shadow DOM, dadurch kann das CSS deiner Seite nicht ins Widget durchsickern und das CSS des Widgets nicht in deine Seite. Standardmäßig rendert es genau dort, wo du den Tag einfügst.
Der Snippet-Generator fügt unter dem Script-Tag eine weitere Zeile hinzu: einen einfachen Link zu deiner MoveMentors-Seite, zum Beispiel "Kurse bei Keva Price auf MoveMentors buchen". Er steht unter dem Widget und hält deinen Buchungslink erreichbar, wenn der Browser eines Besuchers Skripte blockiert. Du kannst den Text ändern oder die Zeile entfernen.
MENTOR_ID ist deine Mentor-ID. Der Snippet-Generator trägt sie ein; du musst sie nie von Hand nachschlagen.
Alle Attribute
| Attribut | Was es tut |
|---|---|
data-mentor | Pflicht. Deine Mentor-ID, vom Snippet-Generator eingetragen. |
data-mode | Thema: light, dark oder auto (Standard). auto folgt der Systemeinstellung des Besuchers. |
data-accent | Akzentfarbe für Buttons und Hervorhebungen. Jede CSS-Farbe, zum Beispiel #4F8C5E. |
data-target | Ein CSS-Selektor, in den das Widget montiert wird, zum Beispiel #my-container. Standard: das Widget rendert dort, wo der Script-Tag sitzt. |
data-kind | Filtert den Katalog: all (Standard), classes, events, retreats oder videos. videos rendert nur deine Videobibliothek. |
data-layout | list (Standard) oder cards. |
data-locale | Widget-Sprache: en, es, pt, de, fr, it oder nl. Standard: die Sprache der Host-Seite, danach die Browsersprache des Besuchers. |
data-detail-mode | Wie sich ein Kurs öffnet: inline, modal oder page. Überschreibt den Standard, den du im Konfigurator gespeichert hast. page navigiert zu dem Seitenmuster, das du konfiguriert hast. |
data-detail-target | Nur im Page-Modus: _self (Standard) oder _blank für einen neuen Tab. |
data-class | Ein Kurs-Slug. Nur-Buchen-Modus: das Widget überspringt den Katalog und montiert direkt die Detailansicht dieses einen Kurses. |
data-schedule | Eine Termin-ID. Heftet das Widget an ein bestimmtes Datum eines Kurses und öffnet das Buchungsformular direkt auf diesem Termin. |
data-show-icon | true oder false. Zeigt oder verbirgt dein Profilbild im Widget-Kopf. |
data-show-name | true oder false. Zeigt oder verbirgt deinen Namen im Kopf. |
data-show-location | true oder false. Zeigt oder verbirgt deinen Standort im Kopf. |
data-show-language | true oder false. Zeigt oder verbirgt die Sprach-Chips an den Kursen. |
Tippfehler fallen auf sichere Werte zurück: ein unbekannter data-kind-Wert rendert all statt eines leeren Widgets, und ein unbekannter data-detail-mode fällt auf deinen gespeicherten Standard zurück.
Was Besucher im Widget tun können
Das Widget fährt denselben Buchungsablauf wie deine MoveMentors-Seite:
- Deine kommenden Kurse, Events und Retreats durchstöbern. Retreats zeigen eine Karte mit Datumsbereich und teilen sich ein gemeinsames Platzlimit über ihre Tage.
- Als Gast buchen, nur mit Name und E-Mail, oder sich anmelden: ein Popup meldet sie bei movementors.com an und das Widget macht mit ihrem Konto weiter. Abos, Kurspakete und Promo-Codes gelten, sobald sie angemeldet sind. Das Passwort wird auf movementors.com eingetippt, nie auf der Host-Seite.
- Mit Karte zahlen (der gehostete Stripe-Checkout öffnet sich und kehrt danach zurück) oder mit jeder Zahlungsart außerhalb der Plattform, die du akzeptierst, etwa Überweisung, bar oder Wallets, mit deinen Zahlungshinweisen direkt an Ort und Stelle. Bezahlte Online-Kurse sind nur per Karte buchbar; kostenlose Online-Kurse brauchen keine Zahlung.
- Für eine Gruppe buchen, mit Gruppengröße und namentlich genannten Teilnehmern, Add-ons pro Kurs dazunehmen und Trinkgeld geben.
- Promo-Codes einlösen (nur angemeldet).
- Ein Retreat in Raten zahlen, wenn es einen Ratenplan hat: die erste Rate wird beim Checkout abgebucht, die übrigen automatisch von der hinterlegten Karte an den Terminen des Plans, mit einer E-Mail-Erinnerung vor jeder Abbuchung und einer Quittung danach.
Buchungen aus dem Widget sind ganz normale MoveMentors-Buchungen: gleiche Bestätigungs-E-Mails, gleiches Dashboard, gleiche Stornoabläufe.
Die Videobibliothek im Widget
Mit data-kind="videos" (oder als Teil von all) rendern deine veröffentlichten Videos als Karten, gratis oder mit Preis:
- Angemeldete Besucher (über das Anmelde-Popup des Widgets) lösen Gratis-Videos ein oder kaufen per Karte über den Stripe-Checkout, ohne die Seite zu verlassen; das Video wird in ihrem MoveMentors-Konto gespeichert. Du behältst 100 Prozent jedes Verkaufs.
- Nicht angemeldete Besucher schickt das Widget zur Videoseite auf movementors.com, wo sie sich anmelden oder ein kostenloses MoveMentors-Konto erstellen und dort einlösen oder kaufen. So oder so landet das Video in ihrem Konto, abspielbar auf jedem Gerät, auf dem sie sich anmelden.
Angesehen wird auf movementors.com, die Host-Seite braucht also nie einen Videoplayer. Siehe Videos aus deiner Bibliothek verkaufen.
Setups mit mehreren Widgets
Das Widget lädt einmal pro Seite: ein zweiter Script-Tag auf derselben Seite wird ignoriert. Für unterschiedliche Widgets legst du sie auf unterschiedliche Seiten deiner Website und variierst die Attribute.
Eine reine Videobibliothek auf deiner /videos-Seite:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="videos" async></script>
Ein Event-Widget auf deiner /workshops-Seite, als Karten:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="events" data-layout="cards" async></script>
Wenn dein Website-Baukasten Scripts nur an einer festen Stelle zulässt (zum Beispiel in einem Footer-Block), nutze data-target, um das Widget dort zu montieren, wo du es wirklich haben willst:
<div id="schedule"></div>
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-target="#schedule" async></script>
Nur-Buchen-Modus
Für eine Landingpage zu einem einzelnen Angebot überspringst du den Katalog ganz. data-class montiert die Detailansicht eines einzigen Kurses, mit Terminauswahl und Buchungsformular:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-class="sunrise-yoga" async></script>
Um einen bestimmten Termin festzunageln ("buch den Freitagskurs"), nimmst du stattdessen die Termin-ID. Das Buchungsformular öffnet direkt auf diesem Datum, ohne Auswahl:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-schedule="SCHEDULE_ID" async></script>
Sind data-class und data-schedule beide gesetzt, gewinnt data-schedule.
Die Origin-Allowlist
Standardmäßig kann jede Website mit deinem Snippet dein Widget einbetten. Um das einzuschränken, trägst du die Origins deiner Seiten unter /mentor/settings/embed ein (bis zu 20). Ein Origin ist Schema plus Domain, zum Beispiel https://www.pamelaspilates.com. Sobald mindestens ein Origin gelistet ist, sieht jede andere Seite einen klaren "nicht autorisiert"-Zustand statt deines Stundenplans.
Achtung: https://example.com und https://www.example.com sind verschiedene Origins. Wenn deine Seite auf beiden antwortet, liste beide.
Embed-Statistiken
/mentor/settings/embed zeigt, was das Widget für dich tut: Aufrufe (Widget-Ladevorgänge), Kursöffnungen, gestartete und abgeschlossene Buchungen, plus die Seiten, von denen sie kamen. Die Buchungen selbst erscheinen in deinem normalen Dashboard, zusammen mit allem anderen.
Was das Widget noch nicht kann
- Es gibt kein Studio-Widget. Das Widget bettet den Stundenplan eines Mentors ein; Studios können ihren Stundenplan mit mehreren Lehrern noch nicht einbetten.
- Es gibt keine eigene CSS-Injektion. Das Shadow DOM versiegelt Styles in beide Richtungen; nutze
data-accentunddata-mode, um zu deiner Marke zu passen.
Nächste Schritte
- Embed-Widget lädt nicht: die Checkliste, wenn nichts rendert.
- Mentor-Stufen: die Stufe, die das Widget freischaltet.