Styling the Mindbody Widget on WordPress

You have pasted the Mindbody widget into your WordPress site and it doesn’t look like the rest of it. You open the theme’s CSS, write a few rules… and nothing changes. Here is why, what you can actually customise, and where the limit is.

Why your CSS doesn’t reach the widget

Look at the code Mindbody gives you for a schedule. It is a <healcode-widget data-type="schedules"> tag plus a script. When the page loads, the script injects an iframe pointing to go.mindbodyonline.com.

An iframe is a separate page, from a separate domain, displayed inside yours. Browsers deliberately isolate it: your stylesheet cannot style what’s inside, and your scripts cannot read or change it. It is a security rule, not a bug, and no WordPress plugin can get around it.

So everything inside the frame (the schedule layout, the filters, the class details, the sign-in, the checkout) looks the way Mindbody decides.

What you can change

In the Branded Web editor, before copying the code:

• the colours (buttons, accents, text);
• the fonts, from the list Mindbody offers;
• a few display options depending on the widget type (which classes, which locations, how many days).

In WordPress, around the widget:

• The page itself: a branded header, a short intro, real text about your classes. That text is yours and Google indexes it; the iframe content is not part of your page.
• The space it occupies: give the block a minimum height so the page doesn’t jump when the iframe arrives, and enough room on mobile to avoid a cramped “scroll inside a scroll”.
• When it loads: on long pages, load the widget only when the visitor reaches it, or behind a “See the schedule” button. Make sure your optimisation plugin doesn’t delay the Healcode script indefinitely.

Link widgets are different. Some widgets, such as the account login link, don’t create an iframe: they insert a simple link into your page, with a class you can target in CSS. Those you can style like any other link on your site.

What you cannot change

• The structure of the schedule (grid, list, filters, how a class card looks).
• The booking steps: sign in, choose a pricing option, pay, confirm.
• The checkout page and its wording.
• Extras Mindbody’s widget doesn’t offer, such as picking a specific spot on a room map, or paying in instalments.
• Purchase tracking: the sale happens inside Mindbody’s frame, so GA4 and Google Ads don’t see it.

The workarounds people try, and why they fail

• Injecting CSS into the iframe: blocked by the browser, as above.
• Copying the schedule by hand into WordPress: it goes out of date the first time a class changes, and booking still sends people to Mindbody.
• Overlaying your own buttons on top of the frame: fragile, breaks on mobile, and confusing for the people booking.

When it’s time to go further

The widget is a good starting point: free, reliable, maintained by Mindbody. It stops being enough when your brand matters at the moment of purchase, when you invest in ads and need to measure sales, or when you lose people at checkout.

At that point the options are a Mindbody WordPress plugin (your schedule in your theme, booking still on Mindbody) or a custom integration where the whole journey runs in your theme on top of the Mindbody API. We explain the three routes step by step in How to add Mindbody booking to WordPress.

Want to know what your current widget costs you? Send us the page, the audit is free.