O widget integrável coloca sua agenda reservável no seu próprio site com um único script tag. O gerador de snippets em /mentor/settings/embed monta o tag pra você, com seletor de tipo (Tudo, Aulas, Eventos, Retiros, Vídeos), controles de tema e cor de destaque, e pré-visualização ao vivo. Este artigo documenta tudo o que o widget pode fazer além desses defaults.
O widget é uma função Premium. Em outros planos o script carrega do mesmo jeito, mas mostra um aviso curto de "embed indisponível" no lugar da sua agenda.
O snippet
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" async></script>
Um script tag e nada mais. Não há iframe: o widget monta num Shadow DOM, então o CSS do seu site não vaza pro widget e o CSS do widget não vaza pro seu site. Por padrão ele renderiza exatamente onde você cola o tag.
MENTOR_ID é o seu ID de mentor. O gerador de snippets preenche; você nunca precisa procurar à mão.
Todos os atributos
| Atributo | O que faz |
|---|---|
data-mentor | Obrigatório. Seu ID de mentor, preenchido pelo gerador de snippets. |
data-mode | Tema: light, dark ou auto (default). auto segue a preferência de sistema do visitante. |
data-accent | Cor de destaque para botões e realces. Qualquer cor CSS, por exemplo #4F8C5E. |
data-target | Um seletor CSS onde montar o widget, por exemplo #my-container. Default: o widget renderiza onde o script tag está. |
data-kind | Filtra o catálogo: all (default), classes, events, retreats ou videos. videos renderiza só sua biblioteca de vídeos. |
data-layout | list (default) ou cards. |
data-locale | Idioma do widget: en, es, pt, de, fr, it ou nl. Default: o idioma da página anfitriã, depois o do navegador do visitante. |
data-detail-mode | Como uma aula abre: inline, modal ou page. Sobrepõe o default que você salvou no configurador. page navega pro padrão de página que você configurou. |
data-detail-target | Só no modo page: _self (default) ou _blank para abrir em nova aba. |
data-class | Um slug de aula. Modo só-reserva: o widget pula o catálogo e monta a vista de detalhe daquela aula. |
data-schedule | Um ID de sessão. Fixa o widget numa data específica de uma aula e abre o formulário de reserva direto nessa sessão. |
data-show-icon | true ou false. Mostra ou esconde sua foto de perfil no cabeçalho do widget. |
data-show-name | true ou false. Mostra ou esconde seu nome no cabeçalho. |
data-show-location | true ou false. Mostra ou esconde sua localização no cabeçalho. |
data-show-language | true ou false. Mostra ou esconde os chips de idioma nas aulas. |
Erros de digitação caem em valores seguros: um data-kind desconhecido renderiza all em vez de um widget vazio, e um data-detail-mode desconhecido volta pro seu default salvo.
O que os visitantes podem fazer no widget
O widget roda o mesmo fluxo de reserva da sua página MoveMentors:
- Explorar suas próximas aulas, eventos e retiros. Retiros mostram um cartão com intervalo de datas e compartilham um único limite de vagas entre seus dias.
- Reservar como convidado só com nome e email, ou iniciar sessão: um popup conecta a pessoa ao movementors.com e o widget continua com a conta dela. Assinaturas, packs de aulas e códigos promo passam a valer com a sessão iniciada. A senha é digitada no movementors.com, nunca no site anfitrião.
- Pagar com cartão (o checkout hospedado do Stripe abre e depois volta) ou com qualquer método fora da plataforma que você aceite, como transferência, dinheiro ou carteiras digitais, com suas instruções de pagamento mostradas ali mesmo. Aulas online são só com cartão.
- Reservar em grupo com tamanho de grupo e participantes nomeados, adicionar add-ons por aula e deixar gorjeta.
- Resgatar códigos promo (só com sessão iniciada).
- Pagar um retiro em parcelas quando ele tem plano de parcelamento: a primeira é cobrada no checkout, as demais são cobradas automaticamente no cartão salvo nas datas do plano, com lembrete por email antes de cada cobrança e recibo depois.
Reservas feitas no widget são reservas MoveMentors normais: mesmos emails de confirmação, mesmo dashboard, mesmos fluxos de cancelamento.
A biblioteca de vídeos no widget
Com data-kind="videos" (ou como parte de all), seus vídeos publicados renderizam como cartões, grátis ou com preço:
- Visitantes logados (pelo popup de login do widget) resgatam vídeos grátis ou compram com cartão via Stripe sem sair da página; o vídeo fica salvo na conta MoveMentors deles. Você fica com 100 por cento de cada venda.
- Visitantes sem login são levados pelo widget pra página do vídeo no movementors.com, onde fazem login, ou criam uma conta MoveMentors gratuita, e resgatam ou compram lá. Nos dois casos o vídeo fica na conta, pronto pra assistir em qualquer dispositivo em que façam login.
A exibição acontece no movementors.com, então o site anfitrião nunca precisa de um player de vídeo. Veja Venda vídeos da sua biblioteca.
Setups com vários widgets
O widget carrega uma vez por página: um segundo script tag na mesma página é ignorado. Pra ter widgets diferentes, coloque-os em páginas diferentes do seu site e varie os atributos.
Uma biblioteca só de vídeos na sua página /videos:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="videos" async></script>
Um widget de eventos na sua página /workshops, em cartões:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="events" data-layout="cards" async></script>
Se o seu construtor de sites só deixa adicionar scripts num lugar fixo (um bloco de rodapé, por exemplo), use data-target pra montar o widget onde você realmente quer:
<div id="schedule"></div>
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-target="#schedule" async></script>
Modo só-reserva
Para uma landing sobre uma única oferta, pule o catálogo. data-class monta a vista de detalhe de uma só aula, com seu seletor de sessões e formulário de reserva:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-class="sunrise-yoga" async></script>
Para fixar uma sessão específica ("reserve a aula de sexta"), use o ID da sessão. O formulário de reserva abre direto naquela data, sem escolher nada:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-schedule="SCHEDULE_ID" async></script>
Se data-class e data-schedule estiverem os dois definidos, data-schedule ganha.
A allowlist de origens
Por padrão, qualquer site com o seu snippet pode integrar o seu widget. Para restringir, adicione as origens dos seus sites em /mentor/settings/embed (até 20). Uma origem é esquema mais domínio, por exemplo https://www.pamelaspilates.com. Com pelo menos uma origem na lista, qualquer outro site vê um estado claro de "não autorizado" no lugar da sua agenda.
Atenção: https://example.com e https://www.example.com são origens diferentes. Se o seu site responde nas duas, liste as duas.
Analíticas do embed
/mentor/settings/embed mostra o que o widget está fazendo por você: visualizações (carregamentos do widget), aberturas de aulas, reservas iniciadas e completadas, mais os sites de onde vieram. As reservas em si aparecem no seu dashboard normal com todo o resto.
O que o widget ainda não pode fazer
- Não há widget de estúdio. O widget integra a agenda de um mentor; estúdios ainda não podem integrar sua agenda multi-instrutor.
- Não há injeção de CSS personalizado. O Shadow DOM sela os estilos nas duas direções; use
data-accentedata-modepra combinar com a sua marca.
Próximos passos
- Widget integrável não carrega: a checklist quando nada renderiza.
- Planos de mentor: o plano que desbloqueia o widget.