Das Embed-Widget deckt die meisten Anwendungsfälle direkt ab. Dieser Artikel behandelt die tieferen Anpassungsmöglichkeiten.
CSS-Variablen
Das Widget stellt CSS-Variablen bereit, die du überschreiben kannst:
| Variable | Standard | Zweck |
|---|---|---|
--mm-primary-color | #1a1813 | Button- und Akzentfarbe |
--mm-primary-fg | #fff | Text auf Primärfarbe |
--mm-bg | #fff | Widget-Hintergrund |
--mm-fg | #1a1813 | Standardtextfarbe |
--mm-muted-fg | #5a5550 | Sekundärtext |
--mm-border | #e5e1d8 | Kartenränder |
--mm-radius | 1rem | Rundungsradius |
--mm-font-family | system-ui | Schriftart |
--mm-spacing | 1rem | Innenabstand |
--mm-shadow | minimal | Kartenschatten |
Setze sie auf dem Container-Div:
<div id="movementors-embed" style="
--mm-primary-color: #c4533c;
--mm-radius: 0;
--mm-font-family: 'Helvetica Neue', sans-serif;
"></div>
Oder im Stylesheet deiner Website:
#movementors-embed {
--mm-primary-color: #c4533c;
--mm-radius: 0;
}
Mehrere Widgets pro Seite
Du kannst mehrere Widget-Instanzen auf derselben Seite haben. Jede benötigt eine eindeutige Container-ID und ein entsprechendes data-target im Skript.
<script src="https://movementors.com/embed.js" data-studio="your-slug" data-mode="single" data-class="yoga-flow" data-target="mm-featured" async></script>
<div id="mm-featured"></div>
<!-- an anderer Stelle auf derselben Seite -->
<script src="https://movementors.com/embed.js" data-studio="your-slug" data-mode="list" data-target="mm-full-list" async></script>
<div id="mm-full-list"></div>
Beide Widgets teilen sich denselben Skript-Load (der Browser dedupliziert), rendern aber in ihren eigenen Containern.
Eingebettete Ansicht filtern
Auf der Widget-Konfigurationsseite kannst du festlegen, was angezeigt wird. Du kannst auch über data-*-Attribute überschreiben:
| Attribut | Wirkung |
|---|---|
data-location | Filtert nach einem bestimmten Standort-Slug |
data-category | Filtert nach einem Kategorie-Slug (z. B. "yoga") |
data-teacher | Filtert nach einem bestimmten Lehrer (Slug für Plattform-Mentor, ID für Custom) |
data-limit | Begrenzt die Anzahl der angezeigten Kurse |
data-from | Zeigt Kurse, die nach diesem Datum beginnen (ISO-Format) |
data-to | Zeigt Kurse, die vor diesem Datum beginnen |
Beispiel: ein Homepage-Widget, das nur Yoga-Kurse der "nächsten 7 Tage" an deinem Hauptstandort zeigt:
<script src="https://movementors.com/embed.js"
data-studio="your-slug"
data-mode="grid"
data-category="yoga"
data-location="main-studio"
data-limit="6"
async></script>
<div id="movementors-embed"></div>
Event-Tracking
Das Widget löst benutzerdefinierte Events aus, auf die du hören kannst:
movementors:loaded: Widget-DOM ist bereit.movementors:class-viewed: Nutzer hat auf eine Kurskarte geklickt.movementors:booking-started: Nutzer hat das Buchungsformular geöffnet.movementors:booking-completed: Buchung erfolgreich.movementors:booking-failed: Buchung fehlgeschlagen.
Höre mit:
window.addEventListener('movementors:booking-completed', (e) => {
console.log('booking completed', e.detail);
// e.detail enthält: { bookingId, classId, classTitle, amountCents, currency }
});
Nützlich für:
- Google Analytics: Conversion-Event bei abgeschlossener Buchung auslösen.
- Facebook Pixel: abgeschlossene Buchungen tracken.
- Interne Analytics: in dein eigenes Backend loggen.
CSP-Integration
Wenn deine Website eine Content Security Policy hat, musst du MoveMentors in diesen Direktiven erlauben:
Content-Security-Policy:
script-src 'self' https://movementors.com;
frame-src https://movementors.com;
connect-src 'self' https://movementors.com https://api.stripe.com;
img-src 'self' https://*.movementors.com https://res.cloudinary.com data:;
Das Widget selbst nutzt intern Iframe-Sandboxing; deine CSP muss lediglich das Framing erlauben.
Authentifizierungs-Übergabe
Das Widget unterstützt einen "Preauth"-Modus: Wenn ein Nutzer bereits auf deiner Website angemeldet ist, kannst du ihn zu MoveMentors weiterleiten, ohne erneut nach Namen und E-Mail zu fragen.
<script src="https://movementors.com/embed.js"
data-studio="your-slug"
data-prefill-name="Jane Doe"
data-prefill-email="jane@example.com"
async></script>
<div id="movementors-embed"></div>
Die Werte füllen das Buchungsformular vor. Der Nutzer kann sie ändern; das ist eine Komfortfunktion, keine Sicherheitsgrenze. (Gehe nicht davon aus, dass der Nutzer "angemeldet" ist, nur weil du Werte vorgefüllt hast; die eigentliche Buchung erfordert weiterhin eine E-Mail-Bestätigung.)
Server-seitiges Rendering
Das Widget ist ausschließlich clientseitig. Es gibt keine serverseitig gerenderte (SSR) Version, die HTML für SEO-Zwecke ausgibt.
Wenn deine Buchungsseite von Suchmaschinen mit vollständigem Kursinhalt für Crawler indexiert werden soll, verlinke auf die entsprechenden MoveMentors-Kursdetailseiten (die serverseitig gerendert werden), statt dich für SEO auf das Widget zu verlassen.
Für sichtbare "nächste 5 Kurse" auf deiner Homepage, die Crawler sehen sollen, ziehe in Betracht, auch auf das MoveMentors-Verzeichnis zu verlinken; das Widget liefert die Buchungs-UI, der Link bringt den SEO-Boost.
Performance
Das Widget-Bundle ist ca. 80 KB gzipped. Es lädt asynchron (das async-Attribut) und blockiert daher dein Seiten-Rendering nicht.
Erstes Rendern: ca. 1 bis 2 Sekunden bei einer ordentlichen Verbindung.
Nach dem Laden:
- Interaktionen mit Kurskarten: sofort (clientseitiger State).
- Buchungsformular öffnen: sofort.
- Buchungsabsenden: abhängig von der Zahlungsmethode (Stripe Checkout fügt ca. 1 Sekunde Weiterleitungs-Overhead hinzu).
Wenn deine Website performance-kritisch ist, möchtest du das Widget möglicherweise lazy laden (erst nach Nutzerinteraktion mounten). Muster:
<button id="open-booking">Kurse durchsuchen</button>
<div id="movementors-embed"></div>
<script>
document.getElementById('open-booking').addEventListener('click', () => {
const s = document.createElement('script');
s.src = 'https://movementors.com/embed.js';
s.dataset.studio = 'your-slug';
s.async = true;
document.body.appendChild(s);
});
</script>
Das Widget lädt nur beim Klick. Kompromiss: eine kleine zusätzliche Verzögerung für Nutzer, die klicken.
Mobile Überlegungen
Das Widget ist responsiv. Es passt sich an:
- Einspaltiges Layout unter 640 px.
- Touch-freundliche Tap-Targets (mindestens 44×44).
- Buchungsformular nutzt native mobile Tastaturen (numerisch für Preise, E-Mail für E-Mails).
Wenn deine Website ein mobilspezifisches Layout hat (anders als Desktop), kann das Widget pro Layout konfiguriert werden: verwende unterschiedliche data-mode-Attribute auf den Desktop- vs. Mobile-Skript-Tags, gesteuert durch CSS-Media-Queries.
Häufige Fragen
Kann ich eine vollständig white-label Version mit meinem Logo und ohne MoveMentors-Branding bekommen? Enterprise-Kunden können dies anfordern. Der Standard enthält einen kleinen "powered by MoveMentors"-Footer.
Kann ich das Widget auf mehreren Domains betreiben? Ja. Das Widget hat keine Domain-Whitelist. Jeder mit deinem Studio-Slug kann es einbetten.
Kann ich verhindern, dass andere Personen mein Widget einbetten? Aktuell nicht. Das Widget ruft öffentliche Kursdaten ab; jeder, der deinen Slug kennt, kann es einbetten. Wir erwägen Domain-Allow-Listing als Enterprise-Feature.
Kann ich die Felder des Buchungsformulars anpassen? Aktuell nicht. Die Felder sind dieselben wie auf der MoveMentors-Website. Feldanpassung steht auf der Roadmap.
Zählen Widget-Buchungen für meine Sichtbarkeit / Ranking bei MoveMentors? Ja. Eine Buchung ist eine Buchung, unabhängig von der Quelle. Embed-Buchungen zählen zu den Gesamtzahlen deines Studios, deine Bewertungen werden gleich aggregiert usw.
Nächste Schritte
- Embed-Widget: die Grundlagen.
- Embed-Widget lädt nicht: Diagnose.