Description: The following passage mainly focuses on mindbody login, which shows you how to use the branded web tools to put scheduling widgets on your Squarespace website. The Schedule Widget allows you to include your class schedule directly on your website.
This is Connie from pixality design, I’m going to show you how to use my embodies branded web tools to put scheduling widgets on your Squarespace website, let’s get started with adding a widget to your website.
Once you get logged into the branded web manager for your mindbody account, you’ll be looking at a screen like this, it’ll probably have a few extra little tutorials her that you can watch or you can skip and listen to, but I’m going to tell you that you’ve got three different options.
You have a widgets tab, a links tab and site settings, we’re going to click on the widgets tab, we’re going to look at how to put a schedule on your website, you’re going to go to create new widget, these are all the different widget types that you have.
If you have a class that what you need is, people can sign up for our class, you’re going to go with a schedule widget, that’s the most common, I don’t usually use the staff list widget, I use the registration widget, if you’re talking about registering for workshops or camps or something that’s a one-time thing, that’s going to be a registration widget.
I don’t use prospekt widget, I use enrollment widget for a teacher training or something that is a longer period time thing, I don’t usually use class list widget, sometimes I use an appointment widget, if you offer one-to-one appointments, that is an option, it’s not the greatest widget type, but it is a possibility that you can use the appointment widget.
For this one we’re going to click the schedule widget, we need to name it,o we’re going to put schedule, you’re naming this so that you remember it, you don’t have to display this title, but you can know which one it is, I’m going to click create widget.
You’re looking at all the options that you have for that widget, under view there are two different things, there’s the mindbody classic, there’s the narrow mobile, those are the the main ones that I use, you can use the calendar view but it’s not user-friendly.
The mindbody classic group by class type can get bulky too, there are extra lines that give categories, I usually use the narrow mobile or the mindbody classic, in this case we’re going to use the classic, you can choose how many days you want to display or when the first day you want it to.
There are different options there, we’re going to have the button to sign up for class, this custom CSS stands for cascading style sheets, that’s how designers make things look different to change the colors, the padding and the spacings of things.
If you know how to code, you can put information in there, then it’ll display the widget and make it look a little nicer probably, that’s an option you have, but remember to write down the hex colors for your brand colors, this is where you can change all those.
We’re going to drop this widget in, you can see what it looks like, but you can always come back and you can start putting your custom colors, you can type in what what color you want, it’ll customize it there, I’m going to leave it all its defaults because they’re mostly black and white.
You’ll get a good idea there of what they look like, you can go into Advanced Options, if you want to start playing around with the things you want to hide and the things you want to show, if you want to filter out by different class types or by different instructors and stuff, you have options to do that.
Once you get down there, you’re going to hit click Save, then you’re going to come all the way back down to the bottom, this is the code that you want, I’m showing you how to put it on a Squarespace website today, we’re going to cut and paste this code.
If you use WordPress, you can install the plug-in and you can get it on your website like that, but we’re going to do the Squarespace way today, we’re going to copy to clipboard, it’s going to copy all this code, we’re going to go over to our website.
I’m going to create a page, I’m going to come down to the not link section, I can make a demo page with the plus sign, create a page, I’m going to call it demo and keep it as a blank page, click start editing, we’re going to come into the page and click over one of these little insertion points, little teardrops.
I’m looking for the code block, you might not have scrolled all this way down before, but it’s in the More action, it’s between the map and the menu, it’s a code bloc so that I’m going to delete what it’s got in there by default, I’m going to paste that code that I copied over from the branded web manager.
That’s command V on a mac to paste or you can right-click if you cut the right click enabled on your mouse and paste there, apply, save and wait till the page refreshes, you should see your interactive widget pulled over, you can see that it’s all in grey tones.
I have the link set on this website to this color, that’s why those are showing up in that color, those are links, once you’ve got it on there, you can come back over to your branded web manager, you can put in all your color codes, you can even hit preview.
You don’t need to reinstall, once you install this code one time on that page, it’s there, any changes you make to the colors to the custom CSS to the information that’s in your mindbody account that’s displayed in that widget are automatically going to pull through that code that’s already in there.
You only have to copy from the clipboard and paste it into a code block one time, it’s in there, you can make changes and it’ll automatically update, that’s how you use branded web for mindbody to get a schedule on your website, in the future I’ll show you how to get buttons on as well. Thanks for reading.