Embed-Widget

Das Embed-Widget ist ein JavaScript-Snippet, das du in deine bestehende Website einfügst. Es rendert den Stundenplan deines Studios direkt auf deiner Seite, mit voller Buchungsfunktionalität, ohne dass Schüler deine Seite verlassen.

Premium-Stufen-Feature. Pro- und Free-Stufen haben keinen Zugang; upgrade, wenn du es willst.

Warum das Embed-Widget nutzen

Studios mit eigenen Websites (yourstudio.com) wollen typischerweise, dass Schüler auf ihrer eigenen Seite buchen, aus Markengründen. Ohne das Widget ist die Wahl:

• Schüler zu MoveMentors schicken. Verliert dein Branding, Schüler springen eventuell ab.
• Dein eigenes Buchungssystem bauen. Teuer, kompliziert, dauert Monate.
• Das Widget nutzen. 5-Minuten-Setup, voller Buchungsflow innerhalb deiner Seite.

Das Widget rendert denselben Buchungsflow wie die MoveMentors-Seite (Filter, Kurskarten, Buchungs-Seitenleiste, Zahlung), aber innerhalb eines Iframes auf deiner Seite. Die Buchung wird als MoveMentors-Buchung erfasst; der Schüler erhält eine E-Mail von MoveMentors; du verwaltest Buchungen in deinem üblichen Dashboard.

Wie es aussieht

Ein paar Standard-Rendering-Modi:

• Listenansicht: eine vertikale Liste kommender Kurse. Am besten für "alle kommenden" auf einer dedizierten Buchungsseite.
• Rasteransicht: ein 2- oder 3-spaltiges Raster mit Kurskarten.
• Einzelkurs: nur ein bestimmter Kurs, mit der Buchungs-Seitenleiste inline.
• Kalenderansicht: ein Wochen- oder Monatskalender mit Kursblöcken. Am besten für Studios mit dichten Stundenplänen.

Du wählst den Modus in der Widget-Konfiguration. Du kannst mehrere Widgets auf derselben Seite haben (z. B. einen hervorgehobenen Kurs auf der Homepage, eine vollständige Liste auf /book).

Einrichtung

1. 1

   Gehe zu /studio/settings/embed

   Die Einstellungsseite des Embed-Widgets.

2. 2

   Widget-Modus wählen

   Liste, Raster, Einzelkurs oder Kalender.

3. 3

   Filter konfigurieren

   Filtere die eingebettete Ansicht optional auf bestimmte Standorte, Kategorien oder Lehrer. Zum Beispiel "nur Kurse am Brooklyn-Standort anzeigen" oder "nur Yoga, kein Pilates".

4. 4

   Styling anpassen

   Das Widget erbt ein Standard-Aussehen. Du kannst überschreiben:

   • Primärfarbe (passend zu deiner Marke).
   • Schriftfamilie.
   • Border-Radius.
   • Abstandsdichte.
   • Dark Mode (falls deine Seite dunkel ist).

   CSS-Variablen lassen dich die meisten Anpassungen ohne Code-Schreiben vornehmen.

5. 5

   Snippet kopieren

   Die Seite generiert ein Snippet wie:

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

   Füge beide Zeilen in das HTML deiner Seite ein, wo das Widget gerendert werden soll.

6. 6

   Auf deiner Seite verifizieren

   Lade deine Seite in einem Browser. Das Widget sollte in 1 bis 2 Sekunden erscheinen.

   Wenn es nicht erscheint, siehe Embed-Widget lädt nicht.

Wo platzieren

Ein paar übliche Platzierungen:

• Eine dedizierte /book- oder /schedule-Seite. Am häufigsten. Auf den Inhaltsbereich deiner Seite zugeschnitten.
• Die Homepage in einem "Featured Classes"-Bereich. Ein Raster mit 3 bis 6 kommenden Kursen.
• Einzelne Kurs-Promo-Seiten. Ein "Diesen Workshop buchen"-Inline-Einzelkurs-Widget.
• Ein schwebender Sticky-Button. "Kurs buchen", der sich beim Klick zum Widget ausklappt.

Das Widget ist responsiv; es passt sich an die Containerbreite an.

Was passiert, wenn ein Schüler über das Widget bucht

Der Buchungsflow ist identisch mit der direkten Buchung auf MoveMentors:

1. Schüler wählt einen Kurs und eine Einheit.
2. Schüler füllt die Buchungs-Seitenleiste aus (Plätze, Teilnehmer, Zahlungsmethode usw.).
3. Schüler bezahlt (Stripe Checkout öffnet sich in einem neuen Tab; manuelle Methoden funktionieren gleich).
4. Bestätigung erscheint im Widget.
5. Schüler erhält eine Buchungsbestätigungs-E-Mail von MoveMentors.

Die Buchung wird in MoveMentors erfasst. Du siehst sie in deinem normalen Dashboard unter /studio/bookings. Stripe-Zahlungen gehen auf dein Stripe-Connect-Konto, genau als ob der Schüler direkt auf MoveMentors gebucht hätte.

Das Widget ist nur eine UI-Schicht. Die Daten und Geschäftslogik sind dieselben wie im Rest der Plattform.

Widget-Buchungen tracken

Das Dashboard markiert jede Buchung mit ihrer Quelle: "Web" (MoveMentors direkt), "Embed" (über dein Widget), "MCP" (über einen KI-Assistenten), "Walk-in" (manuell hinzugefügt).

Filtere die Buchungsliste nach Quelle, um "alle Buchungen, die über meine eigene Seite kamen" zu sehen. Nützlich, um die Wirkung des Widgets zu messen.

Du kannst auch Google Analytics / ähnliches Event-Tracking auf dem Widget einrichten; wir geben standardisierte Events aus (widget_loaded, class_viewed, booking_started, booking_completed), die deine Analytics erfassen kann.

Sicherheit und Einbettung

Das Widget läuft unter der Haube in einem Iframe. Das isoliert das JavaScript deiner Seite vom JavaScript von MoveMentors (Cross-Frame-Scripting-Schutz gilt).

Wir verwenden Sandboxing am Iframe mit sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox", kein allow-same-origin. Das Widget kann keine Cookies auf deiner Seite lesen oder andere Cross-Origin-Mätzchen versuchen.

CSP-freundlich: Wenn deine Seite eine strenge Content-Security-Policy hat, musst du movementors.com in frame-src und script-src erlauben.

Branding und Anpassung

Das Widget kann an deine Seite angepasst werden. CSS-Variablen, die du überschreiben kannst:

• --mm-primary-color: die Button- und Akzentfarbe.
• --mm-font-family: Schriftart.
• --mm-border-radius: Ecken.
• --mm-spacing-unit: Dichte.
• --mm-card-shadow: Kartentiefe.

Für tiefere Anpassung (verschiedene Layouts, Custom-Logik) siehe Embed-Widget für Fortgeschrittene.

Was du über das Widget nicht tun kannst

• Custom-Buchungsfelder über das hinaus, was MoveMentors unterstützt.
• Custom-Preisregeln (z. B. seitenspezifische Rabattcodes, die nicht auf MoveMentors existieren).
• Buchungsbestätigungen / Belege ausblenden (MoveMentors sendet sie trotzdem).

Das sind plattformseitige Beschränkungen; das Widget ist eine dünne UI über dem Standard-Buchungsflow.

Häufige Fragen

Kann ich das Widget ohne Premium nutzen? Nein. Nur Premium-Feature.

Verlangsamt das Widget meine Seite? Das Widget lädt asynchron (das async-Attribut am Skript-Tag). Es blockiert das Seiten-Rendering nicht. Das anfängliche Widget-Rendern dauert ca. 1 bis 2 Sekunden; Nutzer sehen währenddessen ein Platzhalter-Skelett.

Kann ich auf mehreren Seiten einbetten? Ja. Dasselbe Snippet funktioniert auf beliebig vielen Seiten. Jede Buchung geht trotzdem zurück zum MoveMentors-Konto deines Studios.

Kann ich das Widget für White-Label-Nutzung (mit Custom-Logo, komplett anderer Marke) thematisieren? Der "powered by MoveMentors"-Indikator ist standardmäßig erforderlich. Wir fügen eventuell eine White-Label-Option für Enterprise-Kunden hinzu; derzeit nicht verfügbar.

Funktioniert das eingebettete Widget auf Squarespace / Wix / usw.? Ja. Die meisten No-Code-Site-Builder erlauben Custom-HTML-Embed-Blöcke. Füge das Snippet in einen dieser Blöcke ein.

Nächste Schritte

• Embed-Widget für Fortgeschrittene für tiefere Anpassung.
• Studio-Abonnement-Stufen: die Stufe, die das freischaltet.