Widget integrável

O widget integrável é um snippet JavaScript que você cola no seu site. Renderiza sua agenda de aulas direto na sua página, com booking completo, sem sair do seu site.

Função Premium-tier só. Pro e gratis não acessam.

Por que usar o widget

Estúdios com sites próprios (seuestudio.com) tipicamente querem bookings no site por marca. Sem widget:

• Enviar pro MoveMentors. Perde branding, bounces.
• Construir próprio booking. Caro, complicado, meses.
• Usar widget. Setup 5 min, booking flow completo no seu site.

Widget renderiza o mesmo flow (filtros, cards, sidebar, pagamento) mas dentro de um iframe no seu site.

Como aparece

Modos default:

• Lista: vertical de próximas. Melhor pra "todas" em página dedicada.
• Grid: 2-3 colunas.
• Aula única: uma específica com sidebar inline.
• Calendar view: semana/mês com blocos.

Escolhe modo na config. Múltiplos widgets no mesmo site OK.

Setup

1. 1

   Vá em /studio/settings/embed
2. 2

   Escolha modo

   List, grid, single class, calendar.

3. 3

   Configure filtros

   Opcionalmente filtre: localizações específicas, categorias, professores.

4. 4

   Customize styling

   Herda look default. Override:

   • Cor primária.
   • Font family.
   • Border radius.
   • Spacing density.
   • Dark mode.

   CSS variables.

5. 5

   Copie snippet

   <script src="https://movementors.com/embed.js" data-studio="seu-slug" data-mode="list" async></script>
   <div id="movementors-embed"></div>
   

6. 6

   Verifique no seu site

   Carregue seu site. Widget deve aparecer em 1-2 segundos.

   Se não, ver widget não carrega.

Onde colocar

• Página dedicada /book ou /schedule. Mais comum.
• Homepage em "featured classes".
• Páginas de promo individuais. "Reserve este workshop" inline.
• Sticky botão flutuante. "Reservar" que expande ao clique.

Widget responsive; adapta ao container.

O que acontece quando estudante reserva

Idêntico a reservar no MoveMentors direto:

1. Escolhe aula e sessão.
2. Preenche sidebar (assentos, attendees, método).
3. Paga (Stripe Checkout em nova aba; manuais igual).
4. Confirmação aparece no widget.
5. E-mail de confirmação do MoveMentors.

Booking registrado no MoveMentors. Vê em /studio/bookings. Stripe vai pro seu Connect.

Widget é só camada UI.

Rastreamento de bookings widget

Dashboard taga source: "Web" (MoveMentors direto), "Embed" (via widget), "MCP" (via AI), "Walk-in".

Filtre pra medir impacto do widget.

GA / similar tracking: emitimos eventos padrão (widget_loaded, class_viewed, booking_started, booking_completed).

Segurança e embedding

Iframe sandboxed com sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox", sem allow-same-origin. Não lê cookies do seu site.

CSP-friendly: permita movementors.com em frame-src e script-src.

Branding e customização

CSS variables override:

• --mm-primary-color
• --mm-font-family
• --mm-border-radius
• --mm-spacing-unit
• --mm-card-shadow

Customização mais profunda em widget advanced.

O que NÃO dá pelo widget

• Campos custom além do que MoveMentors suporta.
• Regras de preço site-specific (discount codes que não existem no MoveMentors).
• Esconder confirmações / recibos (MoveMentors envia igual).

Perguntas comuns

Sem ser Premium? Não.

Lentidão no meu site? Assíncrono. Não bloqueia render. Render inicial ~1-2 seg com skeleton.

Múltiplos sites? Sim. Mesmo snippet em qualquer número.

White-label com meu logo, sem "powered by MoveMentors"? "Powered by" obrigatório por default. Enterprise pode pedir white-label.

Funciona no Squarespace / Wix? Sim. Custom HTML embed blocks.

Próximos passos

• Widget advanced.
• Níveis de estúdio.