In Episode #3 of Agency Toolbox, we walked through exactly how to set up Acuity Scheduling for your agency.
UPDATE: I no longer use or broadly recommend Acuity Scheduling. Instead, SavvyCal has become my go-to scheduling tool.
Why SavvyCal?
A few years ago, Squarespace bought Acuity Scheduling. The innovation, product development velocity, and generous offering that I loved about Acuity quickly ground to a halt.
I'd been keeping an eye on what Derrick Reimer was building at SavvyCal, and he was building beautiful, powerful scheduling at a budget-friendly rate similar to Acuity's.
I trialed it. Then, we bought it for ZenPilot (even though many of us already have HubSpot Meetings pages) because of the advanced functionality.
And here are just a few of the reasons I love SavvyCal and would generally recommend it over Acuity and alternatives like Calendly, Cal.com, etc:
- Calendar overlay - I hate toggling back and forth between my calendar and a booking page. SavvyCal lets you overlay your calendar on the scheduling page to highlight shared availabilities.
- Ranked Availability - I didn't anticipate this being so useful, but it lets you first show the times you want to meet, but then open up additional times you can meet if that's needed for the person scheduling. It is super helpful for all of you productivity and time-blocking nerds.
- Simple Meeting Polls for Group Meetings - won't apply to all of you, but if you're working with teams, this is a huge time-saver.
- Clean, but Powerful Payments - I loved Acuity because of being able to juggle many calendars, multiple meeting types, one-time vs. subscription payments, etc. SavvyCal does it all, but better and with a better design.
- Embedded Scheduling + Clean Design - to truly replace Acuity, any tool needs to allow you to embed the scheduler on your own site or anywhere you want it. And the design needs to reflect your brand fully. SavvyCal checks both of those boxes quite nicely.
If a longer video would be helpful on this topic (e.g. why we prefer and recommend SavvyCal over Acuity Scheduling), hit the chat button and let us know!)
How do I customize Acuity Scheduling?
Ok, back to Acuity Scheduling.
Today, I want to take the customization of Acuity Scheduling one step further and give you the resources to customize your scheduling page to match your agency’s brand.
The Only Fully Guaranteed Agency Operations Improvement Framework
Get 360 clarity into your operations or your money back, guaranteed.
What is Acuity Scheduling?
Acuity Scheduling is a cloud-hosted appointment scheduling solution that helps business owners manage their online appointments. It helps individual professionals and SMBs create a customized scheduling page to show their real-time availability.
How to Customize Acuity Scheduling for Your Agency
- Log into your Acuity Scheduling portal, head to “Client’s Scheduling Page,” customize any settings you want to change under “Appearance,” and then head over to “Advanced CSS.”
- In the “Advanced CSS” section, you can only style HTML elements and class selectors, you won’t be able to style any IDs using CSS. If you’d like to use my boilerplate CSS template to jumpstart your customizations, just chat with us via the website below.
Acuity Scheduling Custom CSS Examples
| Function | CSS Code |
| Increase the size of appointment type names | .appointment-type-name { font-size: 120%; font-weight: bold; } |
| Increase the size of client registration login text | .login-container { height: 80px; font-size:20px; padding-top:25px; } |
| Change background color | body { background-color: #ffffff; } |
| Change appointment type box color | .select-item {background-color: #DFDFDF ;} |
| Change hover color for appointment type boxes | .select-item:hover {background-color: #FF0000;} |
| Hide “save credit card” checkbox | div.col-sm-12 { display: none; } |
| Hide the quantity in package checkout | input.form-control.inline-field { display:none; } input.form-control.inline-field[name=”certificate”] { display: block; } th[data-original-text=”Quantity”] { opacity: 0; } |
| Hide list of what a package code is redeemable for | .certificate-amount-remaining ul {display: none;} |
| Hide steps in the monthly template scheduling page | ol.steps { display: none; } |
| Hide “more times” in the daily view scheduling page | .calendar-next { display: none; } |
Benefits of Acuity Scheduling
There are quite a few benefits that Acuity Scheduling brings to the table, including:
- Streamlined booking. With its online booking features, Acuity Scheduling removes the need for back-and-forth email conversations that often start with “what time works for you?”
- Organized schedules. Acuity Scheduling helps you monitor all upcoming appointments — even sending reminder notifications to make sure you don’t miss any meetings.
- Third-party integrations. Acuity Scheduling integrates with popular tools like QuickBooks, Mailchimp, Zapier, Zoom, Stripe, Square, PayPal, and HubSpot (more on how to integrate HubSpot below.)
- Calendar syncing. Two-way syncing with calendar apps like Outlook, Google Calendar, iCloud Calendar, and Office365 for every appointment created, rescheduled, or canceled.
- Mobile app. Take your scheduling on the go with Acuity Scheduling’s mobile app for both iOS and Android devices to edit appointment details or reschedule/cancel a booking.
How Do I Integrate Acuity Scheduling with HubSpot?
In Episode 5 of Agency Toolbox, I’ll show you exactly how to create a simple HubSpot CMS template for easy integration between Acuity Scheduling and your HubSpot website.
Plus, I’ll give you the template where you simply have to change the information on a single line of text to have your scheduling page ready to roll on your website!
Want More Tech Tips For Your Agency?
Did you find this guide helpful?
You'll be glad to know we’ve got much more in store! You can receive weekly news, tips, and ClickUp tricks right in your inbox if you subscribe to our newsletter, First Class Operations.
