How to Add Mindbody to Your Squarespace Website (Branded Web Guide)
If your studio runs on Mindbody, your website should show your live schedule, let clients book and buy, and look like your brand rather than like Mindbody. Mindbody's Branded Web tools make that possible on Squarespace. Here's how they work, what you need before you start, and how to fix the problems we see most often.
What Branded Web is
Branded Web (formerly HealCode) is Mindbody's set of website widgets. Mindbody describes them as small pieces of software that live on your website, each doing one job. You copy a snippet of code from Mindbody and paste it into your site, and the widget stays in sync with your Mindbody account. When clients book or you change your schedule, your website updates too (Mindbody).
The widgets cover the things clients do most:
Class schedule
Appointment booking, for privates, massage and other one-to-one sessions
Workshop and event enrollment
Pricing, memberships and gift cards
Staff profiles
Account sign-up and login
Before you start
A Branded Web account. Mindbody says you need one alongside your Mindbody account. Check with Mindbody whether it's included in your plan.
The right Squarespace plan. The widgets run on JavaScript, and Squarespace only allows JavaScript in code blocks on the Core, Plus and Advanced plans (and older Business and Commerce plans), not on Basic (Squarespace help).
Your fonts and colors. You'll set the widgets to match your site.
Step by step
Log in to Branded Web with your Mindbody details and create a widget, for example a class schedule.
Style it. Set the fonts and colors to match your site, and choose which classes, staff or locations to show.
Copy the embed code Mindbody gives you.
Add a Code block in Squarespace. Edit the page, add a block, choose Code and paste the snippet. Don't paste it into a Text block, where it won't run.
Check the live page. Squarespace notes that, as a security measure, code sometimes won't appear while you're logged in, even though visitors can see it (Squarespace help). Open the page in a private window or on your phone.
Test it like a client. On your phone, book a class, buy a pass and log in. Fix anything that feels slow or confusing.
Common problems and how to fix them
The widget is cut off or squashed. In Squarespace's newer Fluid Engine layouts, a block only gets the space you give it. Give the code block a full-width row with plenty of height, or put the widget in a section of its own.
It doesn't look like your site. Set fonts and colors in Branded Web first. For finer control, custom CSS can style the widget's buttons and links.
The page is slow or widgets clash. Several widgets on one page can slow it down and sometimes conflict. Give each main widget its own page.
It works on a laptop but not on a phone. Always test on a real phone. Problems usually come from the page layout rather than the widget.
Clients can't find where to log in. Add a "Log in" or "My account" link to your main menu.
A simple page structure that works
Schedule: the class schedule widget, with a short note on levels and what to bring.
Pricing: your intro offer first, then class packs and memberships with buy buttons.
Privates: the appointment widget for one-to-one sessions.
Workshops: the enrollment widget for events and trainings.
Want us to set it up?
Mindbody integration is one of our specialties, and most of our studio clients use it. Our Studio Site ($3,000) includes full Mindbody, WellnessLiving or Momence integration. Already have a site and just need the widgets working properly? Our $350 Site Tune-Up may be all you need. See our services for more.
Book a free 20-minute intro call and we'll look at your current setup.
