Gray MacKenzie shows how to customize Acuity Scheduling to match your brand using CSS and built-in appearance tools. Learn to change colors, fonts, and layout so your booking page looks like your site, not a generic scheduler.
Welcome back to episode number four of Agency Toolbox. I'm your host, Gray MacKenzie, and in the last two episodes, we've started diving into Acuity scheduling. So I introduced you to why we use the tool at Guavabox, and I also introduced you to the way that we have it set up for our agency. So in episode number two, we talked about why we use it and some of the features in episode number three. Last time, I showed you guys inside our portal and walked you through exactly how we set this up for for our inbound marketing agency. If you missed that, head back over and check those out. And today, what we're going to be talking about is we're going to be talking about how to brand the front end of Acuity Scheduling using custom CSS and the appearance tools inside of Acuity Scheduling to give you the look and feel to match your brand and the look and feel that you want your audience to experience. So let's dive in, and I'm going to share with you guys right now. Page from Guavabox. Here we have the branded scheduling page that I've shared in the last couple episodes, the same chat with Gray on the Guavabox domain here. And what we have is a look and feel that's been customized. So we've got the logo in this box, the colors, the buttons as we go through setting the time zone. Everything that you see here, it hasn't all been customized. It's built off of the same framework that Acuity gives us, but it's not the way that Acuity would look right out of the box. So let me jump over here into the back end of Acuity. So now we're looking at the client scheduling page, and I've clicked on advanced css. So we have two different ways to control what the front end looks like. We've got the options that we went through last time inside Appearance, where you choose button colors. You can choose colors, and you can choose the descriptions, the logo, and the wording. But then you can jump into advanced css, and if you're comfortable with css, you can add in a whole bunch more styling on top of that. So I want to jump over and take a look at what this would look like if we took out all of that CSS styling. So we've emptied it all out, and here's what the front end would look like. Let me refresh this. So we're going to save our changes with no code in there. Refresh. And now you've got a big black. A big black background. With the Guava box logo at full size, we'll set our time zone. You can see we don't have the same fonts that we had. The buttons are smaller. Overall, all the information is still the same. It just doesn't fit as well with the rest of the Guavabox website. So now I'm going to tab over to the text editor that I use, Sublime Text. And here is all the code that I've built in for our, for our customization of Acuity. And if you would like to access this, head over to the show notes, click in the YouTube description. Or if you're watching this in itunes, head over to doinbound.com agencytoolbox and you'll be able to find the show notes for this episode and access all of the styling that I've already put together. Then you can just plug and play. So, for example, maybe your font, your primary font isn't Avenir, so let's say it's Georgia. We could just change that to Georgia and whatever your fallback font is. But you can choose all of that and go through each individual section of this. So I'm going to include all that to try and accelerate your process of customizing your portal. And if you haven't done this before, this is going to be a little bit of a learning process. If you've. I've got to imagine that a good number of folks have used Inspect element and played around with CSS before. But if you haven't, you can right click on any individual piece inspect the element using Chrome. This is also available inside Safari or Firefox. You may have to enable a couple other things as you're trying to do that. Just Google for how to do this and that. You can learn an awful lot of this stuff on your own. But here you can see I have added in some custom styling to most of these. Most of these individual things. So we've got the big business container. As we're hovering over things, we can see what's been moved where. So business container, here's the way that it works out of the box. And again, if we go back over to the customized version, which I still have loaded here, and inspect the same element, we're going to see if inside of that business container that now it's been changed up a little bit. The other thing is, as we put this, I'm going to share in episode number five, the next episode, how to embed Acuity onto your own page. So I've embedded this onto our HubSpot portal, which I'M going to walk through how to create a HubSpot page template that works with acuity scheduling in the next episode. But you can see the ads in this class is embedded, so that's also going to change up some of your code. And so that's going to impact what we have put together here. And that is already put together for you. You can obviously do more than that, do less than that, but I'll include that in the show notes for today's for today's episode. All right, if you have any questions about this, any ideas for improvement or customizations that you have that you'd like to show off, I would love to see those. Shoot me an email@graydoinbound.com or hit me up on Twitter Gray McKenzie, and I'd love to know what you've come across to improve the acuity setup for your agency. All right, until next time, keep working on making your life more efficient, more effective by leveraging the tool set that's available, and I will keep working on bringing these resources to you.
