El widget integrable pone tu horario reservable en tu propio sitio web con un solo script tag. El generador de snippets en /mentor/settings/embed construye el tag por ti, con selector de tipo (Todo, Clases, Eventos, Retiros, Videos), controles de tema y color de acento, y vista previa en vivo. Este artículo documenta todo lo que el widget puede hacer más allá de esos defaults.
El widget es una función Premium. En otros planes el script carga igual, pero muestra un aviso corto de "embed no disponible" en lugar de tu horario.
El snippet
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" async></script>
Un script tag y nada más. No hay iframe: el widget se monta en un Shadow DOM, así que el CSS de tu sitio no puede filtrarse al widget y el CSS del widget no puede filtrarse a tu sitio. Por defecto se renderiza exactamente donde pegas el tag.
MENTOR_ID es tu ID de mentor. El generador de snippets lo rellena; nunca necesitas buscarlo a mano.
Todos los atributos
| Atributo | Qué hace |
|---|---|
data-mentor | Obligatorio. Tu ID de mentor, rellenado por el generador de snippets. |
data-mode | Tema: light, dark o auto (default). auto sigue la preferencia del sistema del visitante. |
data-accent | Color de acento para botones y destacados. Cualquier color CSS, por ejemplo #4F8C5E. |
data-target | Un selector CSS donde montar el widget, por ejemplo #my-container. Default: el widget se renderiza donde está el script tag. |
data-kind | Filtra el catálogo: all (default), classes, events, retreats o videos. videos renderiza solo tu biblioteca de videos. |
data-layout | list (default) o cards. |
data-locale | Idioma del widget: en, es, pt, de, fr, it o nl. Default: el idioma de la página anfitriona, luego el del navegador del visitante. |
data-detail-mode | Cómo se abre una clase: inline, modal o page. Anula el default que guardaste en el configurador. page navega al patrón de página que configuraste. |
data-detail-target | Solo en modo page: _self (default) o _blank para abrir en pestaña nueva. |
data-class | Un slug de clase. Modo solo-reserva: el widget se salta el catálogo y monta la vista de detalle de esa clase. |
data-schedule | Un ID de sesión. Fija el widget a una fecha concreta de una clase y abre el formulario de reserva directamente en esa sesión. |
data-show-icon | true o false. Muestra u oculta tu foto de perfil en el encabezado del widget. |
data-show-name | true o false. Muestra u oculta tu nombre en el encabezado. |
data-show-location | true o false. Muestra u oculta tu ubicación en el encabezado. |
data-show-language | true o false. Muestra u oculta los chips de idioma en las clases. |
Los typos caen en valores seguros: un data-kind desconocido renderiza all en vez de un widget vacío, y un data-detail-mode desconocido vuelve a tu default guardado.
Qué pueden hacer los visitantes en el widget
El widget corre el mismo flujo de reserva que tu página de MoveMentors:
- Explorar tus próximas clases, eventos y retiros. Los retiros muestran una tarjeta con rango de fechas y comparten un solo límite de plazas entre sus días.
- Reservar como invitado con solo nombre y email, o iniciar sesión: un popup los conecta a movementors.com y el widget continúa con su cuenta. Las suscripciones, los packs de clases y los códigos promo aplican una vez iniciada la sesión. La contraseña se escribe en movementors.com, nunca en el sitio anfitrión.
- Pagar con tarjeta (se abre el checkout alojado de Stripe y luego vuelve) o con cualquier método fuera de la plataforma que aceptes, como transferencia, efectivo o wallets, con tus instrucciones de pago mostradas ahí mismo. Las clases online son solo con tarjeta.
- Reservar en grupo con tamaño de grupo y asistentes con nombre, añadir add-ons por clase y dejar propina.
- Canjear códigos promo (solo con sesión iniciada).
- Pagar un retiro en cuotas cuando tiene plan de cuotas: la primera se cobra en el checkout, el resto se cobra automáticamente a la tarjeta guardada en las fechas del plan, con recordatorio por email antes de cada cobro y recibo después.
Las reservas hechas en el widget son reservas MoveMentors normales: mismos emails de confirmación, mismo dashboard, mismos flujos de cancelación.
La biblioteca de videos en el widget
Con data-kind="videos" (o como parte de all), tus videos publicados se renderizan como tarjetas, gratis o con precio:
- Los visitantes con sesión iniciada (vía el popup de inicio de sesión del widget) reclaman los videos gratis o compran con tarjeta vía Stripe sin salir de la página; el video se guarda en su cuenta de MoveMentors. Te quedas con el 100 por ciento de cada venta.
- A los visitantes sin sesión, el widget los lleva a la página del video en movementors.com para iniciar sesión, o crear una cuenta gratuita de MoveMentors, y reclamar o comprar allí. En ambos casos el video queda en su cuenta, listo para verse en cualquier dispositivo donde inicien sesión.
El visionado ocurre en movementors.com, así que el sitio anfitrión nunca necesita un reproductor de video. Mira Vende videos desde tu biblioteca.
Setups con varios widgets
El widget carga una vez por página: un segundo script tag en la misma página se ignora. Para tener widgets distintos, ponlos en páginas distintas de tu sitio y varía los atributos.
Una biblioteca solo de videos en tu página /videos:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="videos" async></script>
Un widget de eventos en tu página /workshops, en tarjetas:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-kind="events" data-layout="cards" async></script>
Si tu site builder solo te deja añadir scripts en un lugar fijo (un bloque de footer, por ejemplo), usa data-target para montar el widget donde realmente lo quieres:
<div id="schedule"></div>
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-target="#schedule" async></script>
Modo solo-reserva
Para una landing sobre una sola oferta, sáltate el catálogo. data-class monta la vista de detalle de una sola clase, con su selector de sesiones y su formulario de reserva:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-class="sunrise-yoga" async></script>
Para fijar una sesión concreta ("reserva la clase del viernes"), usa el ID de sesión. El formulario de reserva se abre directamente en esa fecha, sin elegir nada:
<script src="https://movementors.com/embed.js" data-mentor="MENTOR_ID" data-schedule="SCHEDULE_ID" async></script>
Si data-class y data-schedule están puestos los dos, gana data-schedule.
La allowlist de orígenes
Por defecto, cualquier sitio web con tu snippet puede integrar tu widget. Para restringirlo, añade los orígenes de tus sitios en /mentor/settings/embed (hasta 20). Un origen es esquema más dominio, por ejemplo https://www.pamelaspilates.com. Con al menos un origen en la lista, cualquier otro sitio ve un estado claro de "no autorizado" en lugar de tu horario.
Ojo: https://example.com y https://www.example.com son orígenes distintos. Si tu sitio responde en los dos, lista los dos.
Analíticas del embed
/mentor/settings/embed muestra qué está haciendo el widget por ti: vistas (cargas del widget), aperturas de clases, reservas iniciadas y completadas, más los sitios de donde vinieron. Las reservas en sí aparecen en tu dashboard normal con todo lo demás.
Qué no puede hacer el widget todavía
- No hay widget de estudio. El widget integra el horario de un mentor; los estudios todavía no pueden integrar su horario multi-instructor.
- No hay inyección de CSS personalizado. El Shadow DOM sella los estilos en ambas direcciones; usa
data-accentydata-modepara encajar con tu marca.
Próximos pasos
- Widget integrable no carga: la checklist cuando no se renderiza nada.
- Planes de mentor: el plan que desbloquea el widget.