Personalizar el widget de Mindbody en WordPress

Has pegado el widget de Mindbody en tu web WordPress y no se parece al resto. Abres el CSS del tema, escribes unas reglas… y no cambia nada. Te explicamos por qué, qué puedes personalizar de verdad y dónde está el límite.

Por qué tu CSS no llega al widget

Mira el código que te da Mindbody para un horario. Es una etiqueta <healcode-widget data-type="schedules"> acompañada de un script. Al cargarse la página, el script inserta un iframe que apunta a go.mindbodyonline.com.

Un iframe es una página separada, de un dominio separado, mostrada dentro de la tuya. Los navegadores la aíslan a propósito: tu hoja de estilos no puede dar estilo a lo que contiene y tus scripts no pueden leerlo ni modificarlo. Es una regla de seguridad, no un fallo, y ningún plugin de WordPress puede saltársela.

Así que todo lo que hay dentro del marco (la maquetación del horario, los filtros, la ficha de la clase, el inicio de sesión, el pago) tiene el aspecto que decide Mindbody.

Lo que sí puedes cambiar

En el editor de Branded Web, antes de copiar el código:

• los colores (botones, acentos, textos);
• las tipografías, entre las que ofrece Mindbody;
• algunas opciones de visualización según el tipo de widget (qué clases, qué centros, cuántos días).

En WordPress, alrededor del widget:

• La propia página: una cabecera con tu marca, una breve introducción, texto real sobre tus clases. Ese texto es tuyo y Google lo indexa; el contenido del iframe no forma parte de tu página.
• El espacio que ocupa: dale al bloque una altura mínima para que la página no salte cuando llega el iframe, y espacio suficiente en móvil para evitar un «scroll dentro del scroll» apretado.
• Cuándo se carga: en páginas largas, carga el widget solo cuando el visitante llega a él, o detrás de un botón «Ver el horario». Comprueba que tu plugin de optimización no retrasa indefinidamente el script de Healcode.

Los widgets de enlace son distintos. Algunos widgets, como el enlace de acceso a la cuenta, no crean un iframe: insertan un simple enlace en tu página, con una clase que puedes usar en tu CSS. A esos les das estilo como a cualquier otro enlace de tu web.

Lo que no puedes cambiar

• La estructura del horario (rejilla, lista, filtros, presentación de una clase).
• Los pasos de la reserva: inicio de sesión, elección de tarifa, pago, confirmación.
• La página de pago y sus textos.
• Lo que el widget de Mindbody no ofrece, como elegir un sitio concreto en un plano de sala o pagar a plazos.
• El seguimiento de las compras: la venta ocurre dentro del marco de Mindbody, así que GA4 y Google Ads no la ven.

Los trucos que se intentan, y por qué fallan

• Inyectar CSS en el iframe: bloqueado por el navegador, como hemos visto.
• Copiar el horario a mano en WordPress: se queda desfasado con el primer cambio de clase, y la reserva sigue enviando a Mindbody.
• Superponer tus propios botones sobre el marco: frágil, se rompe en móvil y confunde a quien reserva.

Cuándo dar el siguiente paso

El widget es un buen punto de partida: gratuito, fiable y mantenido por Mindbody. Deja de bastar cuando tu marca importa en el momento de la compra, cuando inviertes en publicidad y necesitas medir las ventas, o cuando pierdes gente en el pago.

Las opciones son entonces un plugin de Mindbody para WordPress (tu horario en tu tema, la reserva todavía en Mindbody) o una integración a medida en la que todo el recorrido funciona en tu tema, sobre la API de Mindbody. Explicamos las tres vías paso a paso en Cómo añadir la reserva Mindbody a WordPress.

¿Quieres saber lo que te cuesta tu widget actual? Envíanos la página, la auditoría es gratuita.