Il widget di embed è uno snippet JavaScript sugli account piano Premium. Quando non viene renderizzato, il problema è di solito uno di questi.
1. Sei su Premium?
Il widget è solo Premium. Se sei su Free o Pro, lo script restituisce una risposta vuota.
Controlla /studio/settings/billing. Se non sei su Premium, fai upgrade.
2. Lo snippet è incollato correttamente
Lo snippet ha due parti:
<script src="https://movementors.com/embed.js" data-studio="your-slug" data-mode="list" async></script>
<div id="movementors-embed"></div>
Entrambe le righe devono essere presenti. Lo script carica il codice del widget; il div è dove il widget si renderizza.
Errori comuni:
- È stato incollato solo il tag script, manca il div.
- L'attributo
data-studioha un refuso (dovrebbe essere lo slug del tuo studio). - L'URL src dello script è sbagliato (dovrebbe essere esattamente
https://movementors.com/embed.js).
Ricopia da /studio/settings/embed per sicurezza.
3. Apri la console del browser
Se lo snippet è corretto ma nulla viene renderizzato, apri la console di sviluppo del browser (F12 o clic destro → Ispeziona → Console).
Cerca messaggi di errore in rosso. Comuni:
"Refused to load the script..."
La Content Security Policy (CSP) del tuo sito ci sta bloccando. Devi consentire movementors.com in:
script-src(per il JavaScript).frame-src(per l'iframe in cui il widget si renderizza).connect-src(per le chiamate API che il widget fa).
Aggiorna l'header CSP sul tuo sito per includerli. Se non controlli la CSP (sei su Squarespace / Wix), controlla la loro documentazione per "CSP personalizzata" o whitelist di script esterni.
"Failed to fetch"
La tua rete sta bloccando la richiesta. Cause comuni:
- Proxy / firewall aziendale.
- Estensione del browser che blocca i tracker (Privacy Badger, ecc.).
- Adblocker.
Testa in una finestra Incognito / Privata con le estensioni disabilitate. Se funziona lì, un'estensione è la causa.
"Cross-Origin Resource Sharing (CORS) error"
Il tuo dominio potrebbe non essere consentito dalla nostra policy CORS. Consentiamo tutte le origini per default; gli errori CORS di solito indicano un problema diverso (la risposta stessa è fallita, e il browser segnala come CORS).
Controlla la tab di rete per lo stato della risposta effettiva. Un 403 o 404 significa che l'URL dello script è sbagliato.
4. Lo slug dello studio è sbagliato
L'attributo data-studio deve corrispondere esattamente allo slug del tuo studio. Case-sensitive.
Se hai cambiato il tuo slug, aggiorna lo snippet sul tuo sito.
5. Errori JavaScript sul tuo sito
Il widget assume un ambiente JavaScript funzionante. Se il tuo sito ha un errore JavaScript PRIMA che il widget si carichi, il widget potrebbe non inizializzarsi.
Controlla la console per eventuali errori non-MoveMentors. Aggiusta quelli prima; il widget spesso torna.
6. Il div contenitore è nascosto
Assicurati che il <div id="movementors-embed"></div> sia nella pagina e non sia nascosto dal CSS.
Ispeziona l'elemento sul div; controlla che abbia dimensioni (altezza > 0) e sia visibile. A volte un contenitore padre ha display: none o height: 0.
7. Il widget si renderizza ma nel posto sbagliato
Il widget si renderizza dentro <div id="movementors-embed">. Se quel div è nel posto sbagliato sulla tua pagina, anche il widget lo sarà.
Sposta il div dove vuoi il widget. Ricarica.
8. Il layout sembra rotto
Il widget è responsive ma può scontrarsi con il CSS del tuo sito. Controlla:
- Il contenitore ha abbastanza larghezza (almeno 320px per mobile; 600px+ consigliato).
- Il CSS del tuo sito non sta impostando
* { display: block }o override simili sugli elementi interni del widget. - Il contenitore non ha
overflow: hiddenche taglia il widget.
Prova ad avvolgere lo snippet in un contenitore con CSS reset:
<div style="all: revert; width: 100%; min-height: 600px;">
<script src="..." ...></script>
<div id="movementors-embed"></div>
</div>
9. Specifiche di Squarespace / Wix / Webflow
Ogni builder ha il proprio modo di incorporare HTML personalizzato:
- Squarespace: Usa un elemento "Code Block". Incolla lo snippet.
- Wix: Usa l'elemento "HTML Embed".
- Webflow: Usa l'elemento "Embed".
- WordPress (Gutenberg): Usa il blocco "Custom HTML".
Se il tuo builder limita quali domini possono essere incorporati, potresti aver bisogno di un piano a pagamento che consenta script esterni. Controlla la loro documentazione.
10. Rendering mobile
Se il widget funziona su desktop ma non mobile:
- Testa in browser specifici per mobile (Mobile Safari, Chrome su Android).
- Controlla il meta tag viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">dovrebbe essere sulla tua pagina. - Controlla la larghezza mobile del contenitore.
Il widget è progettato per mobile ma assume una configurazione viewport sensata.
Domande frequenti
Posso avere più widget su una pagina?
Sì. Ogni <div id="movementors-embed"> ha bisogno di un ID univoco. Usa movementors-embed-1, movementors-embed-2, ecc., e fai riferimento allo stesso in un attributo data-target corrispondente su ogni tag script. Vedi widget di embed avanzato per i dettagli.
Il widget si carica ma le lezioni non appaiono. Controlla che il tuo studio abbia lezioni attive. Il widget filtra le lezioni inattive. Controlla anche i filtri configurati in /studio/settings/embed; potresti aver filtrato troppo aggressivamente.
Posso personalizzare ulteriormente l'aspetto del widget? Sì, tramite variabili CSS. Vedi widget di embed avanzato.
Il widget funzionerà se MoveMentors è offline?
No. Il widget carica gli script da movementors.com. Se siamo offline, il widget fallisce. Gli altri contenuti del tuo sito non sono interessati.
Prossimi passi
- Widget di embed: le basi.
- Widget di embed avanzato: personalizzazione e casi limite.