Das Embed-Widget ist ein JavaScript-Snippet auf Premium-Stufen-Konten. Wenn es nicht rendert, ist das Problem normalerweise eines davon.
1. Bist du auf Premium?
Das Widget ist nur Premium. Wenn du auf Free oder Pro bist, gibt das Skript eine leere Antwort zurück.
Prüfe /studio/settings/billing. Wenn du nicht auf Premium bist, upgrade.
2. Ist das Snippet korrekt eingefügt
Das Snippet hat zwei Teile:
<script src="https://movementors.com/embed.js" data-studio="your-slug" data-mode="list" async></script>
<div id="movementors-embed"></div>
Beide Zeilen müssen vorhanden sein. Das Skript lädt den Widget-Code; das Div ist dort, wo das Widget rendert.
Häufige Fehler:
- Nur der Skript-Tag ist eingefügt, das Div fehlt.
- Das
data-studio-Attribut hat einen Tippfehler (es sollte der Slug deines Studios sein). - Die Skript-src-URL ist falsch (sollte genau
https://movementors.com/embed.jssein).
Kopiere erneut aus /studio/settings/embed, um sicher zu sein.
3. Browser-Konsole öffnen
Wenn das Snippet korrekt ist, aber nichts rendert, öffne die Entwicklerkonsole deines Browsers (F12 oder Rechtsklick, Untersuchen, Konsole).
Suche nach roten Fehlermeldungen. Übliche:
"Refused to load the script..."
Die Content Security Policy (CSP) deiner Seite blockiert uns. Du musst movementors.com erlauben in:
script-src(für das JavaScript).frame-src(für das Iframe, in dem das Widget rendert).connect-src(für API-Aufrufe, die das Widget macht).
Aktualisiere den CSP-Header auf deiner Seite, um diese einzuschließen. Wenn du die CSP nicht kontrollierst (du bist auf Squarespace / Wix), prüfe ihre Docs für "Custom CSP" oder das Whitelisten externer Skripte.
"Failed to fetch"
Dein Netzwerk blockiert die Anfrage. Häufige Ursachen:
- Firmenproxy / Firewall.
- Browser-Erweiterung, die Tracker blockiert (Privacy Badger usw.).
- Adblocker.
Teste in einem Inkognito- / Privatfenster mit deaktivierten Erweiterungen. Wenn es dort funktioniert, ist eine Erweiterung die Ursache.
"Cross-Origin Resource Sharing (CORS) error"
Deine Domain ist möglicherweise nicht von unserer CORS-Richtlinie erlaubt. Wir erlauben standardmäßig alle Origins; CORS-Fehler weisen normalerweise auf ein anderes Problem hin (die Antwort selbst ist fehlgeschlagen, und der Browser meldet als CORS).
Prüfe den Netzwerk-Tab auf den tatsächlichen Antwortstatus. Ein 403 oder 404 bedeutet, dass die Skript-URL falsch ist.
4. Studio-Slug ist falsch
Das data-studio-Attribut muss exakt mit dem Slug deines Studios übereinstimmen. Case-sensitiv.
Wenn du deinen Slug geändert hast, aktualisiere das Snippet auf deiner Seite.
5. JavaScript-Fehler auf deiner eigenen Seite
Das Widget setzt eine funktionierende JavaScript-Umgebung voraus. Wenn deine Seite einen JavaScript-Fehler hat, BEVOR das Widget lädt, initialisiert das Widget eventuell nicht.
Prüfe die Konsole auf Nicht-MoveMentors-Fehler. Behebe die zuerst; das Widget kommt oft zurück.
6. Das Container-Div ist ausgeblendet
Stelle sicher, dass <div id="movementors-embed"></div> auf der Seite ist und nicht von CSS ausgeblendet wird.
Inspiziere das Element am Div; prüfe, dass es Dimensionen hat (Höhe > 0) und sichtbar ist. Manchmal hat ein Eltern-Container display: none oder height: 0.
7. Das Widget rendert, aber am falschen Ort
Das Widget rendert innerhalb des <div id="movementors-embed">. Wenn dieses Div am falschen Ort auf deiner Seite ist, ist es das Widget auch.
Verschiebe das Div dorthin, wo du das Widget möchtest. Aktualisiere.
8. Layout sieht kaputt aus
Das Widget ist responsiv, kann aber mit dem CSS deiner Seite kollidieren. Prüfe:
- Der Container hat genug Breite (mindestens 320 px für Mobile; 600 px+ empfohlen).
- Das CSS deiner Seite setzt nicht
* { display: block }oder ähnliche Overrides auf die internen Elemente des Widgets. - Der Container hat nicht
overflow: hidden, das das Widget abschneidet.
Versuche, das Snippet in einen Container mit Reset-CSS zu wickeln:
<div style="all: revert; width: 100%; min-height: 600px;">
<script src="..." ...></script>
<div id="movementors-embed"></div>
</div>
9. Squarespace / Wix / Webflow-Spezifika
Jeder Builder hat seinen eigenen Weg, Custom-HTML einzubetten:
- Squarespace: Verwende ein "Code Block"-Element. Snippet einfügen.
- Wix: Verwende das "HTML Embed"-Element.
- Webflow: Verwende das "Embed"-Element.
- WordPress (Gutenberg): Verwende den "Custom HTML"-Block.
Wenn dein Builder einschränkt, welche Domains eingebettet werden können, brauchst du eventuell einen kostenpflichtigen Plan, der externe Skripte erlaubt. Prüfe ihre Docs.
10. Mobile-Rendering
Wenn das Widget auf Desktop, aber nicht auf Mobile funktioniert:
- Teste in mobil-spezifischen Browsern (Mobile Safari, Chrome auf Android).
- Prüfe den Viewport-Meta-Tag:
<meta name="viewport" content="width=device-width, initial-scale=1">sollte auf deiner Seite sein. - Prüfe die Mobile-Breite des Containers.
Das Widget ist für Mobile konzipiert, setzt aber ein vernünftiges Viewport-Setup voraus.
Häufige Fragen
Kann ich mehrere Widgets auf einer Seite haben?
Ja. Jedes <div id="movementors-embed"> braucht eine eindeutige ID. Verwende movementors-embed-1, movementors-embed-2 usw. und referenziere dasselbe in einem entsprechenden data-target-Attribut an jedem Skript-Tag. Siehe Embed-Widget für Fortgeschrittene für die Details.
Das Widget lädt, aber Kurse erscheinen nicht. Prüfe, ob dein Studio aktive Kurse hat. Das Widget filtert inaktive Kurse heraus. Prüfe auch die in /studio/settings/embed konfigurierten Filter; du hast eventuell zu aggressiv gefiltert.
Kann ich das Aussehen des Widgets weiter anpassen? Ja, über CSS-Variablen. Siehe Embed-Widget für Fortgeschrittene.
Funktioniert das Widget, wenn MoveMentors ausgefallen ist?
Nein. Das Widget lädt Skripte von movementors.com. Falls wir ausgefallen sind, schlägt das Widget fehl. Der andere Inhalt deiner Seite ist unbeeinträchtigt.
Nächste Schritte
- Embed-Widget: die Grundlagen.
- Embed-Widget für Fortgeschrittene: Anpassung und Sonderfälle.