Personalitzar el widget de Mindbody a WordPress

Has enganxat el widget de Mindbody al teu web WordPress i no s’assembla a la resta. Obres el CSS del tema, escrius unes regles… i no canvia res. T’expliquem per què, què pots personalitzar de veritat i on és el límit.

Per què el teu CSS no arriba al widget

Mira el codi que et dona Mindbody per a un horari. És una etiqueta <healcode-widget data-type="schedules"> acompanyada d’un script. Quan es carrega la pàgina, l’script insereix un iframe que apunta a go.mindbodyonline.com.

Un iframe és una pàgina separada, d’un domini separat, mostrada dins de la teva. Els navegadors l’aïllen expressament: el teu full d’estils no pot donar estil al que conté i els teus scripts no el poden llegir ni modificar. És una regla de seguretat, no un error, i cap plugin de WordPress se la pot saltar.

Així que tot el que hi ha dins del marc (la maquetació de l’horari, els filtres, la fitxa de la classe, l’inici de sessió, el pagament) té l’aspecte que decideix Mindbody.

El que sí que pots canviar

A l’editor de Branded Web, abans de copiar el codi:

• els colors (botons, accents, textos);
• les tipografies, entre les que ofereix Mindbody;
• algunes opcions de visualització segons el tipus de widget (quines classes, quins centres, quants dies).

A WordPress, al voltant del widget:

• La pàgina mateixa: una capçalera amb la teva marca, una breu introducció, text real sobre les teves classes. Aquest text és teu i Google l’indexa; el contingut de l’iframe no forma part de la teva pàgina.
• L’espai que ocupa: dona al bloc una alçada mínima perquè la pàgina no salti quan arriba l’iframe, i prou espai al mòbil per evitar un «scroll dins de l’scroll» estret.
• Quan es carrega: en pàgines llargues, carrega el widget només quan el visitant hi arriba, o darrere d’un botó «Veure l’horari». Comprova que el teu plugin d’optimització no endarrereix indefinidament l’script de Healcode.

Els widgets d’enllaç són diferents. Alguns widgets, com l’enllaç d’accés al compte, no creen cap iframe: insereixen un simple enllaç a la teva pàgina, amb una classe que pots fer servir al teu CSS. A aquests els dones estil com a qualsevol altre enllaç del teu web.

El que no pots canviar

• L’estructura de l’horari (graella, llista, filtres, presentació d’una classe).
• Els passos de la reserva: inici de sessió, tria de tarifa, pagament, confirmació.
• La pàgina de pagament i els seus textos.
• El que el widget de Mindbody no ofereix, com triar un lloc concret en un plànol de sala o pagar a terminis.
• El seguiment de les compres: la venda passa dins del marc de Mindbody, així que GA4 i Google Ads no la veuen.

Els trucs que s’intenten, i per què fallen

• Injectar CSS a l’iframe: bloquejat pel navegador, com hem vist.
• Copiar l’horari a mà a WordPress: queda desfasat amb el primer canvi de classe, i la reserva continua enviant a Mindbody.
• Superposar els teus propis botons sobre el marc: fràgil, es trenca al mòbil i confon qui reserva.

Quan cal fer el pas següent

El widget és un bon punt de partida: gratuït, fiable i mantingut per Mindbody. Deixa de ser suficient quan la teva marca importa en el moment de la compra, quan inverteixes en publicitat i necessites mesurar les vendes, o quan perds gent al pagament.

Les opcions són llavors un plugin de Mindbody per a WordPress (el teu horari al teu tema, la reserva encara a Mindbody) o una integració a mida en què tot el recorregut funciona al teu tema, sobre l’API de Mindbody. Expliquem les tres vies pas a pas a Com afegir la reserva Mindbody a WordPress.

Vols saber què et costa el teu widget actual? Envia’ns la pàgina, l’auditoria és gratuïta.