Description: The following article mainly has the topic about mindbody login, in which youy will learn how to use mindbody branded web tools to add a buy now button on your Squarespace website. A buy now link is tied to a specific contract in your mindbody software.
This is Connie from pixality design, today I’m going to show you how to use mind body’s branded web tools to put buy now links on your website, so people can purchase from you, they don’t even need to leave your website, to do that you’re going to need the mindbody pro plan or hire.
You’ll create a account with their branded web tools, that would be at managerial.code.com, once you get logged in to this portion of your mindbody account, you’re going to want to go up to the links tab at the top, then we’re going to create our first link.
For this first one we’re going to choose the log in register type link, this is going to bring up an overlay that lets your user login to their mindbody account with your studio or register for one if they’re a new user, we can change the text that is going to be on that link, I’m going to leave it at login register, you could also change it to something a little more specific like click here to create or access your account.
You can type that in there if you want to say something like that, then we’re going to go down and click the green button copy to clipboard, we’re copying this big chunk of code which is now custom to your account and the settings that you put up.
We’re going to head over to your Squarespace website, you can create a new page if you don’t have one, I’ve got a page down in the not linked section that I’ve got already for us that’s blank, I’m going to click into the page content, find an insertion point, click that to bring up the menu of blocks.
Then I’m going to scroll down past the gallery and the summary into the more section, I’m looking for this code block, it’s to the right of the net block, but I’m going to select a code block, I’m going to delete the default text, I have an empty block in the code block.
I’m going to paste that code in that I copied over from the branded web manager, I’m going to click apply, click Save on the page and then refresh that page, once we do that, we will see a text link that says login register, when I click on that link, I’m going to get the nice branded web overlay on my own website where I can log into my account or I can register for in a new account.
That’s the first type of link, that’s the plain text link, let’s go back to the branded web manager, I’m going to show you how to put a Buy Now button in, it’s a similar process, we’re going to go up to link type including buy now pricing options.
They’re going to need to click the target that we want that link to go to, what are you selling with that link? What are you buying? For this one let’s choose the drop-in swim, I can change what that text says on the link, I’m going to keep it as buy now.
Then I’m going to copy to clipboard again, back over to my Squarespace website I’m going to click Edit to get into my page content, I’m going to find an insertion point, I’m going to add another code block, it is the same thing to delete the default and paste in that new script there, click apply, click Save, refresh the page.
We’re going to have two different links on this page, we’ve got a log in register one, it brings up the overlay with the login register screen, then we have buy now which is going to bring up the overlay but it’s going to bring the consumer cart up in the overlay.
All I need to do is to click through and purchase it on your website in the overlay, then you need to repeat that for every different purchasing options you want on your website, here’s an example of how that can look, we’ve got Buy Now buttons for each one of the things that they’re selling on their website.
If I click this Buy Now button, it’s going to add the 12-class pass to my consumer cart overlay, I click this Buy Now button, it’s going to add in a drop-in class, you can lay out your website with the series of purchasing options and use a text block next to them to describe what they’re purchasing.
You will notice that on this website all we’ve got is text links, these are functioning, they look like text links, but they function to bring up that overlay, you can stop and you can keep those text links, you can use those code blocks with text links on your website, it functions great, it works great, it looks clean and good, it’s fine.
You can stop here if you’re feeling good, if you want to hang with me, next I’m going to show you how you can make these buttons, we’re going to make them look like buttons that would match all the other buttons on your current website.
To do that we are going to go into design, custom CSS, we’re going to paste a bunch of code, CSS stands for cascading style sheets, it is the code on a website that makes things look different, it’s what controls colors, spacing, fonts and all the things that make things look different on a website.
I’m not going to ask you to write the code, I’m going to give you this chunk of code that I want you to paste into your website in the custom CSS spot to make these look like buttons, I will put this text file on my website, be sure to click over to my website to get this code that you can use on your own website.
I’m going to copy it, I’m going to come back over it, I’m going to paste it into the custom CSS, like magic I have buttons over there, then I would click Save, click out of the design tab, these are going to work the same way they did before as text links, but now they look like buttons, they’re harder to miss on your website.
You can style up these to look like buttons, let me go through a little bit and show you what that code is in case you need to change some things, because you’re going to want to change at least the color so that it matches your own website.
We’ve got the first color, in this code it says color, then it’s got hashtag ffff, that is the white color code, that’s for the text link there, if you want white on a colored background, you’re going to leave that white, this is the one you’re going to be looking for, it says background hashtag, there’s a six digit hex code number there.
You’re going to want to find the color on your own website, your buttons are what you want your buttons to be, you’re going to type that in there, that’s going to change the background colors of that, if you’re using both login register and buy now buttons, you’re going to need to do that in two places.
This top section of the code is for the login register, the bottom section with another background item is for the Buy Now button, so you’re going to want to change both of those to change the background color.
All you need to do is to change the background color and keep a white text, that would probably match your website well, if you want to get fancy and start playing around with these things, you can play around with them, if it doesn’t end up looking good, delete it and go back to my original code.
There’s padding top, there’s padding bottom, the padding is the spacing between the text and the edge of the button, you can make it a bigger, fatter button or a slimmer button if you want to, I have text transform to uppercase, I have this text all in uppercase but you can delete that line if you don’t want it in uppercase.
I deleted that line and it went to normal sentence casing, you can play around with that as well, if you want to letter spacing, there’s another thing in there, I spread out the letters a little bit, it gave a little more presence on the webpage, so you can play around with that as well.
Mess around with it, you’re not going to hurt anything with those if you delete it, hit cancel, don’t save and go back to the original code file that I’ve given you, that is all to make your mindbody branded web links look like buttons on your Squarespace website, if you have any questions, let me know in the comments below, thanks.