Il widget di embed porta il tuo calendario prenotabile sul tuo sito con un solo tag script. Il generatore di snippet su /mentor/settings/embed costruisce il tag per te, con selettore del tipo (Tutto, Lezioni, Eventi, Ritiri, Video), controlli per tema e colore accento e anteprima dal vivo. Questo articolo documenta tutto quello che il widget sa fare oltre quei default.
Il widget è una funzione Premium. Sugli altri piani lo script si carica comunque, ma mostra un breve avviso "embed non disponibile" al posto del tuo calendario.
Lo snippet
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" async></script>
Un solo tag script fa tutto il lavoro. Non c'è iframe: il widget si monta in uno Shadow DOM, quindi il CSS del tuo sito non può filtrare nel widget e il CSS del widget non può filtrare nel tuo sito. Di default viene renderizzato esattamente dove incolli il tag.
Il generatore di snippet aggiunge un'altra riga sotto il tag script: un semplice link alla tua pagina MoveMentors, per esempio "Prenota le lezioni con Keva Price su MoveMentors". Compare sotto il widget e mantiene raggiungibile il tuo link di prenotazione per chi ha gli script bloccati nel browser. Puoi cambiare il testo o rimuovere la riga.
MENTOR_ID è il tuo ID mentor. Il generatore di snippet lo compila; non devi mai cercarlo a mano.
Tutti gli attributi
| Attributo | Cosa fa |
|---|---|
data-mentor | Obbligatorio. Il tuo ID mentor, compilato dal generatore di snippet. |
data-mode | Tema: light, dark o auto (default). auto segue l'impostazione di sistema del visitatore. |
data-accent | Colore accento per pulsanti ed evidenziazioni. Qualsiasi colore CSS, per esempio #4F8C5E. |
data-target | Un selettore CSS in cui montare il widget, per esempio #my-container. Default: il widget viene renderizzato dove sta il tag script. |
data-kind | Filtra il catalogo: all (default), classes, events, retreats o videos. videos renderizza solo la tua libreria video. |
data-layout | list (default) o cards. |
data-locale | Lingua del widget: en, es, pt, de, fr, it o nl. Default: la lingua della pagina ospite, poi quella del browser del visitatore. |
data-detail-mode | Come si apre una lezione: inline, modal o page. Sovrascrive il default che hai salvato nel configuratore. page naviga verso il pattern di pagina che hai configurato. |
data-detail-target | Solo in modalità page: _self (default) o _blank per aprire in una nuova scheda. |
data-class | Uno slug di lezione. Modalità solo prenotazione: il widget salta il catalogo e monta la vista di dettaglio di quella sola lezione. |
data-schedule | Un ID di sessione. Fissa il widget a una data precisa di una lezione e apre il modulo di prenotazione direttamente su quella sessione. |
data-show-icon | true o false. Mostra o nasconde la tua foto profilo nell'intestazione del widget. |
data-show-name | true o false. Mostra o nasconde il tuo nome nell'intestazione. |
data-show-location | true o false. Mostra o nasconde la tua posizione nell'intestazione. |
data-show-language | true o false. Mostra o nasconde i chip delle lingue sulle lezioni. |
I refusi cadono su valori sicuri: un data-kind sconosciuto renderizza all invece di un widget vuoto, e un data-detail-mode sconosciuto torna al default che hai salvato.
Cosa possono fare i visitatori nel widget
Il widget esegue lo stesso flusso di prenotazione della tua pagina MoveMentors:
- Sfogliare le tue prossime lezioni, eventi e ritiri. I ritiri mostrano una card con intervallo di date e condividono un unico tetto di posti su tutti i loro giorni.
- Prenotare come ospite con solo nome ed email, oppure accedere: un popup li fa entrare su movementors.com e il widget prosegue con il loro account. Abbonamenti, pacchetti lezioni e codici promo valgono una volta effettuato l'accesso. La password si digita su movementors.com, mai sul sito ospite.
- Pagare con carta (si apre il checkout ospitato di Stripe, poi si torna) o con qualsiasi metodo fuori piattaforma che accetti, come bonifico, contanti o wallet, con le tue istruzioni di pagamento mostrate lì. Le lezioni online a pagamento sono solo con carta; quelle gratuite non richiedono alcun pagamento.
- Prenotare per un gruppo con numero di persone e partecipanti con nome, aggiungere extra per lezione e lasciare una mancia.
- Riscattare codici promo (solo con accesso).
- Pagare un ritiro a rate quando ha un piano di rateizzazione: la prima rata viene addebitata al checkout, le altre vengono addebitate automaticamente sulla carta salvata alle date del piano, con un promemoria email prima di ogni addebito e una ricevuta dopo.
Le prenotazioni fatte nel widget sono normali prenotazioni MoveMentors: stesse email di conferma, stessa dashboard, stessi flussi di cancellazione.
La libreria video nel widget
Con data-kind="videos" (o come parte di all), i tuoi video pubblicati vengono renderizzati come card, gratis o a pagamento:
- I visitatori che hanno effettuato l'accesso (tramite il popup di accesso del widget) riscattano i video gratis o comprano con carta via Stripe senza lasciare la pagina; il video si salva nel loro account MoveMentors. Tieni il 100 per cento di ogni vendita.
- I visitatori non connessi vengono portati dal widget alla pagina del video su movementors.com, dove accedono o creano un account MoveMentors gratuito e lì riscattano o comprano. In entrambi i casi il video finisce nel loro account, pronto da guardare su qualsiasi dispositivo dove accedono.
La visione avviene su movementors.com, quindi il sito ospite non ha mai bisogno di un player video. Vedi Vendi video dalla tua libreria.
Setup multi-widget
Il widget si carica una volta per pagina: un secondo tag script sulla stessa pagina viene ignorato. Per avere widget diversi, mettili su pagine diverse del tuo sito e varia gli attributi.
Una libreria di soli video sulla tua pagina /videos:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="videos" async></script>
Un widget di eventi sulla tua pagina /workshops, in card:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="events" data-layout="cards" async></script>
Se il tuo site builder ti lascia aggiungere script solo in un punto fisso (un blocco footer, per esempio), usa data-target per montare il widget dove lo vuoi davvero:
<div id="schedule"></div>
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-target="#schedule" async></script>
Modalità solo prenotazione
Per una landing su una singola offerta, salta del tutto il catalogo. data-class monta la vista di dettaglio di una sola lezione, con il suo selettore di sessioni e il modulo di prenotazione:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-class="sunrise-yoga" async></script>
Per fissare una sessione precisa ("prenota la lezione di venerdì"), usa l'ID della sessione. Il modulo di prenotazione si apre direttamente su quella data, senza scegliere nulla:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-schedule="SCHEDULE_ID" async></script>
Se data-class e data-schedule sono impostati entrambi, vince data-schedule.
La allowlist delle origini
Di default, qualsiasi sito con il tuo snippet può incorporare il tuo widget. Per limitarlo, aggiungi le origini dei tuoi siti su /mentor/settings/embed (fino a 20). Un'origine è schema più dominio, per esempio https://www.pamelaspilates.com. Con almeno un'origine in lista, ogni altro sito vede un chiaro stato "non autorizzato" al posto del tuo calendario.
Occhio: https://example.com e https://www.example.com sono origini diverse. Se il tuo sito risponde su entrambe, mettile in lista entrambe.
Statistiche dell'embed
/mentor/settings/embed mostra cosa sta facendo il widget per te: visualizzazioni (caricamenti del widget), aperture di lezioni, prenotazioni avviate e completate, più i siti da cui sono arrivate. Le prenotazioni stesse compaiono nella tua dashboard normale insieme a tutto il resto.
Cosa il widget non sa ancora fare
- Non c'è un widget per gli studi. Il widget incorpora il calendario di un mentor; gli studi non possono ancora incorporare il loro calendario multi-insegnante.
- Non c'è iniezione di CSS personalizzato. Lo Shadow DOM sigilla gli stili in entrambe le direzioni; usa
data-accentedata-modeper intonarti al tuo brand.
Prossimi passi
- Widget di embed non si carica: la checklist quando non si renderizza nulla.
- Piani mentor: il piano che sblocca il widget.