Personnaliser le widget Mindbody sur WordPress

Vous avez collé le widget Mindbody dans votre site WordPress, et il ne ressemble pas au reste. Vous ouvrez le CSS du thème, vous écrivez quelques règles… et rien ne bouge. Voici pourquoi, ce que vous pouvez réellement personnaliser, et où se trouve la limite.

Pourquoi votre CSS n’atteint pas le widget

Regardez le code que Mindbody vous donne pour un planning. C’est une balise <healcode-widget data-type="schedules"> accompagnée d’un script. Au chargement de la page, le script injecte un iframe qui pointe vers go.mindbodyonline.com.

Un iframe, c’est une page séparée, d’un domaine séparé, affichée à l’intérieur de la vôtre. Les navigateurs l’isolent volontairement : votre feuille de style ne peut pas habiller ce qu’il contient, et vos scripts ne peuvent ni le lire ni le modifier. C’est une règle de sécurité, pas un bug, et aucun plugin WordPress ne peut la contourner.

Tout ce qui se trouve dans le cadre (la mise en page du planning, les filtres, la fiche du cours, la connexion, le paiement) a donc l’apparence que Mindbody décide.

Ce que vous pouvez changer

Dans l’éditeur Branded Web, avant de copier le code :

• les couleurs (boutons, accents, textes) ;
• les polices, parmi la liste proposée par Mindbody ;
• quelques options d’affichage selon le type de widget (quels cours, quels lieux, combien de jours).

Dans WordPress, autour du widget :

• La page elle-même : un en-tête à votre marque, une courte introduction, du vrai texte sur vos cours. Ce texte est à vous et Google l’indexe ; le contenu de l’iframe ne fait pas partie de votre page.
• La place qu’il occupe : donnez au bloc une hauteur minimale pour que la page ne saute pas à l’arrivée de l’iframe, et assez d’espace sur mobile pour éviter un « scroll dans le scroll » étriqué.
• Le moment où il se charge : sur une page longue, chargez le widget seulement quand le visiteur l’atteint, ou derrière un bouton « Voir le planning ». Vérifiez que votre plugin d’optimisation ne retarde pas indéfiniment le script Healcode.

Les widgets « lien » sont différents. Certains widgets, comme le lien de connexion au compte, ne créent pas d’iframe : ils insèrent un simple lien dans votre page, avec une classe que vous pouvez cibler en CSS. Ceux-là, vous les habillez comme n’importe quel lien de votre site.

Ce que vous ne pouvez pas changer

• La structure du planning (grille, liste, filtres, présentation d’un cours).
• Les étapes de réservation : connexion, choix de l’offre, paiement, confirmation.
• La page de paiement et ses textes.
• Ce que le widget Mindbody ne propose pas, comme le choix d’une place précise sur un plan de salle, ou le paiement en plusieurs fois.
• Le suivi des achats : la vente a lieu dans le cadre de Mindbody, donc GA4 et Google Ads ne la voient pas.

Les contournements qu’on tente, et pourquoi ils échouent

• Injecter du CSS dans l’iframe : bloqué par le navigateur, comme vu plus haut.
• Recopier le planning à la main dans WordPress : il est périmé au premier changement de cours, et la réservation renvoie toujours chez Mindbody.
• Superposer vos propres boutons sur le cadre : fragile, cassé sur mobile, et déroutant pour ceux qui réservent.

Quand passer à l’étape suivante

Le widget est un bon point de départ : gratuit, fiable, maintenu par Mindbody. Il ne suffit plus quand votre marque compte au moment de l’achat, quand vous investissez en publicité et devez mesurer les ventes, ou quand vous perdez du monde au paiement.

Les options sont alors un plugin Mindbody WordPress (votre planning dans votre thème, la réservation toujours chez Mindbody) ou une intégration sur-mesure où tout le parcours tourne dans votre thème, au-dessus de l’API Mindbody. Nous détaillons les trois voies pas à pas dans Ajouter la réservation Mindbody à WordPress.

Vous voulez savoir ce que votre widget actuel vous coûte ? Envoyez-nous la page, l’audit est gratuit.