Widget integrable

El widget integrable es un snippet de JavaScript que pegas en tu sitio existente. Renderiza tu horario de clases directo en tu página, con booking completo, sin salir de tu sitio.

Función Premium-tier solo. Pro y gratis no acceden.

Por qué usar el widget

Estudios con sus propios sitios (tuestudio.com) típicamente quieren bookings en su sitio por brand. Sin widget:

• Enviar a MoveMentors. Pierde branding, bounces.
• Construir tu propio booking. Caro, complicado, meses.
• Usar widget. Setup 5 min, booking flow completo en tu sitio.

Widget renderiza el mismo flow (filtros, cards, sidebar, pago) pero inside an iframe en tu sitio.

Cómo se ve

Modos default:

• Lista: vertical de próximas. Mejor para "todas" en página dedicada.
• Grid: 2-3 columnas.
• Clase única: una específica con sidebar inline.
• Calendar view: semana/mes con bloques.

Picks modo en config. Múltiples widgets en mismo sitio OK.

Setup

1. 1

   Ve a /studio/settings/embed
2. 2

   Pick modo

   List, grid, single class, calendar.

3. 3

   Configura filtros

   Opcionalmente filtra: ubicaciones específicas, categorías, profesores.

4. 4

   Customiza styling

   Hereda look default. Override:

   • Color primario.
   • Font family.
   • Border radius.
   • Spacing density.
   • Dark mode.

   CSS variables.

5. 5

   Copia snippet

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

6. 6

   Verifica en tu sitio

   Carga tu sitio. Widget debe aparecer en 1-2 segundos.

   Si no, ver widget no carga.

Dónde ponerlo

• Página dedicada /book o /schedule. Más común.
• Homepage en "featured classes".
• Páginas de promo individuales. "Reserva este taller" inline.
• Sticky botón flotante. "Reservar" que expande al click.

Widget responsive; se adapta al container.

Qué pasa cuando estudiante reserva

Idéntico a reservar en MoveMentors directo:

1. Pick clase y sesión.
2. Llena sidebar (asientos, asistentes, método).
3. Paga (Stripe Checkout en tab nueva; manuales igual).
4. Confirmación aparece en widget.
5. Email de confirmación de MoveMentors.

Booking registrado en MoveMentors. Lo ves en /studio/bookings. Stripe va a tu Connect.

Widget es solo capa UI.

Tracking de bookings widget

Dashboard tagua source: "Web" (MoveMentors directo), "Embed" (vía widget), "MCP" (vía AI), "Walk-in".

Filter para medir impacto del widget.

GA / similar tracking: emitimos eventos estándar (widget_loaded, class_viewed, booking_started, booking_completed).

Seguridad e incrustación

Iframe sandboxed con sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox", sin allow-same-origin. No lee cookies de tu sitio.

CSP-friendly: permitir movementors.com en frame-src y script-src.

Branding y customización

CSS variables override:

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

Customización más profunda en widget advanced.

Lo que NO puede el widget

• Campos custom más allá de lo que MoveMentors soporta.
• Reglas de precio site-specific (discount codes que no existen en MoveMentors).
• Ocultar confirmaciones / recibos (MoveMentors envía igual).

Preguntas frecuentes

¿Sin ser Premium? No.

¿Lentitud en mi sitio? Asíncrono. No bloquea render. Render inicial ~1-2 seg con skeleton.

¿Múltiples sitios? Sí. Mismo snippet en cualquier número.

¿White-label con mi logo, sin "powered by MoveMentors"? "Powered by" required por default. Enterprise puede pedir white-label.

¿Funciona en Squarespace / Wix? Sí. Custom HTML embed blocks.

Próximos pasos

• Widget advanced.
• Niveles de estudio.