Il widget di embed copre la maggior parte dei casi d'uso senza configurazione. Questo articolo illustra le opzioni di personalizzazione più avanzate.
Variabili CSS
Il widget espone variabili CSS che puoi sovrascrivere:
| Variabile | Predefinita | Scopo |
|---|---|---|
--mm-primary-color | #1a1813 | Colore di bottoni e accenti |
--mm-primary-fg | #fff | Testo sul colore primario |
--mm-bg | #fff | Sfondo del widget |
--mm-fg | #1a1813 | Colore del testo predefinito |
--mm-muted-fg | #5a5550 | Testo secondario |
--mm-border | #e5e1d8 | Bordi delle card |
--mm-radius | 1rem | Raggio dei bordi |
--mm-font-family | system-ui | Carattere |
--mm-spacing | 1rem | Densità del padding |
--mm-shadow | minima | Ombra delle card |
Impostale sul div contenitore:
<div id="movementors-embed" style="
--mm-primary-color: #c4533c;
--mm-radius: 0;
--mm-font-family: 'Helvetica Neue', sans-serif;
"></div>
Oppure nel foglio di stile del tuo sito:
#movementors-embed {
--mm-primary-color: #c4533c;
--mm-radius: 0;
}
Widget multipli per pagina
Puoi avere più istanze del widget sulla stessa pagina. Ognuna ha bisogno di un ID contenitore univoco e di un data-target corrispondente sullo script.
<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>
<!-- altrove nella stessa pagina -->
<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>
Entrambi i widget condividono lo stesso caricamento dello script (il browser deduplica), ma si renderizzano nei rispettivi contenitori.
Filtrare la vista incorporata
La pagina di configurazione del widget ti permette di filtrare cosa viene mostrato. Puoi anche sovrascrivere tramite attributi data-*:
| Attributo | Effetto |
|---|---|
data-location | Filtra per uno slug di location specifico |
data-category | Filtra per uno slug di categoria (es. "yoga") |
data-teacher | Filtra per un insegnante specifico (slug per mentor di piattaforma, ID per personalizzato) |
data-limit | Limita il numero di lezioni mostrate |
data-from | Mostra lezioni che iniziano dopo questa data (formato ISO) |
data-to | Mostra lezioni che iniziano prima di questa data |
Esempio: un widget per homepage che mostra solo le lezioni di yoga dei "prossimi 7 giorni" nella tua location principale:
<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>
Tracking degli eventi
Il widget emette eventi personalizzati che puoi ascoltare:
movementors:loaded: il DOM del widget è pronto.movementors:class-viewed: l'utente ha cliccato una card di lezione.movementors:booking-started: l'utente ha aperto il modulo di prenotazione.movementors:booking-completed: la prenotazione è andata a buon fine.movementors:booking-failed: la prenotazione è fallita.
Ascolta con:
window.addEventListener('movementors:booking-completed', (e) => {
console.log('booking completed', e.detail);
// e.detail contiene: { bookingId, classId, classTitle, amountCents, currency }
});
Utile per:
- Google Analytics: registrare un evento di conversione quando una prenotazione si completa.
- Facebook Pixel: tracciare le prenotazioni completate.
- Analytics interna: registrare sul tuo backend.
Integrazione CSP
Se il tuo sito ha una Content Security Policy, devi consentire MoveMentors in queste direttive:
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:;
Il widget stesso utilizza internamente il sandboxing degli iframe; la tua CSP deve solo consentire il framing.
Passaggio di autenticazione
Il widget supporta una modalità "preauth": se un utente è già autenticato sul tuo sito, puoi passarlo a MoveMentors senza richiedergli di nuovo nome ed email.
<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>
I valori pre-compilano il modulo di prenotazione. L'utente può modificarli; è una comodità, non un confine di sicurezza. (Non dare per scontato che l'utente sia "autenticato" solo perché hai pre-compilato i valori; la prenotazione effettiva richiede comunque la conferma via email.)
Rendering lato server
Il widget è solo client-side. Non esiste una versione SSR (server-side rendered) che emette HTML a fini SEO.
Se vuoi che la tua pagina di prenotazione sia indicizzata dai motori di ricerca con il contenuto delle lezioni completamente visibile ai crawler, collega le corrispondenti pagine di dettaglio delle lezioni MoveMentors (che SONO renderizzate lato server) invece di affidarti al widget per la SEO.
Per mostrare "le prossime 5 lezioni" sulla tua homepage in modo che i crawler le vedano, valuta anche di linkare la directory MoveMentors; il widget offre l'interfaccia di prenotazione, il link offre valore SEO.
Prestazioni
Il bundle del widget è di circa 80KB gzippato. Si carica in modo asincrono (attributo async) quindi non blocca il rendering della tua pagina.
Rendering iniziale: circa 1-2 secondi su una connessione decente.
Dopo il caricamento:
- Interazioni con le card di lezione: istantanee (stato client-side).
- Apertura del modulo di prenotazione: istantanea.
- Invio della prenotazione: dipende dal metodo di pagamento (Stripe Checkout aggiunge circa 1 secondo di overhead per il redirect).
Se per il tuo sito le prestazioni sono critiche, potresti preferire il lazy-loading del widget (montarlo solo dopo un'interazione dell'utente). Schema:
<button id="open-booking">Sfoglia lezioni</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>
Il widget si carica solo al click. Compromesso: un piccolo ritardo extra per gli utenti che cliccano.
Considerazioni mobile
Il widget è responsive. Si adatta:
- Layout a colonna singola sotto i 640px.
- Aree di tap touch-friendly (44×44 minimo).
- Il modulo di prenotazione usa le tastiere mobile native (numerica per i prezzi, email per le email).
Se il tuo sito ha un layout specifico per mobile (diverso dal desktop), il widget può essere configurato per layout: usa attributi data-mode diversi sui tag script desktop e mobile, gestiti tramite media query CSS.
Domande frequenti
Posso ottenere una versione completamente white-label con il mio logo e senza branding MoveMentors? I clienti enterprise possono richiederlo. La versione predefinita include un piccolo footer "powered by MoveMentors".
Posso usare il widget su più domini? Sì. Il widget non ha una whitelist di domini. Chiunque conosca lo slug del tuo studio può incorporarlo.
Posso impedire ad altri di incorporare il mio widget? Al momento no. Il widget mostra dati pubblici delle lezioni; chiunque conosca il tuo slug può incorporarlo. Potremmo aggiungere il filtraggio per dominio come funzione enterprise.
Posso personalizzare i campi del modulo di prenotazione? Al momento no. I campi sono gli stessi del sito MoveMentors. La personalizzazione dei campi è in roadmap.
Le prenotazioni dal widget contano per la mia visibilità / ranking su MoveMentors? Sì. Una prenotazione è una prenotazione indipendentemente dalla fonte. Le prenotazioni provenienti dall'embed contano per i totali del tuo studio, le tue recensioni si aggregano allo stesso modo, ecc.
Prossimi passi
- Widget di embed: le basi.
- Widget di embed non si carica: diagnostica.