How to add a “Join Waitlist” button to your website’s Mindbody schedule

As you look to reopen your studio in the coming months, local regulations and social distancing precautions will likely mean reduced class capacity and waitlists. Devoted clients who never miss your Monday morning class may now find themselves without a reformer, mat, rower or treadmill. Managing expectations and clearly communicating capacity is critical to keeping your clients frustration level low.

While we all love the Mindbody class booking widget for making on-site scheduling easy, it’s easy to miss the small text notification that a class is waitlisted. This can lead to confusion amongst clients who might think they are confirmed for the class instead of being on the waitlist….and that’s never fun!

Solution? Add a small bit of code to your website to change the button text to read “Join Waitlist” when the class is full! This will allow waitlisted classes to easily stand out, and makes the button text match the action it initiates. Pretty cool, huh?! Let’s get to it...

Here’s how to change the Mindbody “book” button to “Join Waitlist” on your Squarespace website:

1. Copy the code below and paste it into the site-wide code injection footer area: Settings → Advanced → Code Injection → Footer (it looks like a lot but don’t worry, you don’t have to know what it means, just copy everything that’s in the box below.

2. Now hit ‘Save’ and refresh your Schedule page. Any waitlisted classes should have a button that says “Join Waitlist” while classes with availability maintain your regular “Book” button text

*note: these instructions are for Squarespace 7.0 websites, although the code will work for 7.0 or 7.1 sites. Not on Squarespace? Check with your website developer on how to install it on your platform.

<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    var hasSchedule = document.querySelector("healcode-widget[data-type='schedules']");
    if (hasSchedule) {
      var callback = function(mutationsList, observer) {
        mutationsList.forEach(function(mutation) {
          if (mutation.type === 'childList' && Array.from(mutation.target.classList).includes("bw-session__availability")) {
            if (mutation.target.innerHTML.includes("hc_waitlist")) {
              var classDetails = mutation.target.closest(".bw-session");
              classDetails.querySelectorAll(".bw-widget__signup-now").forEach(function(button) {
                button.textContent = "Join Waitlist";
              })
              
            }
          }
        }) 
      };

      var observer = new MutationObserver(callback);
      observer.observe(hasSchedule, { attributes: false, childList: true, subtree: true });
    }
  });
</script>

Whala! Now your clients will have absolute clarity about their class status the next time they go to book a class!

Small things like this make a difference! Ready to take your website to the next level? Contact me to discuss a website design project.