Unlock advanced styling and custom integrations.
You can use CSS and APIs to connect your own code to Acuity, going beyond Acuity’s built in customizations. Use CSS to change the appearance of your scheduler. Use APIs to connect Acuity to your own custom-developed software.
CSS customization and API access are available on the Powerhouse plan.
Use custom CSS to restyle your scheduler
Use CSS to change the way that two dozen elements on your scheduler appear. You can move things, change colors, change fonts, hide elements, and more. You can also create changes that apply when your scheduler is embedded, but not when it’s loaded as a standalone webpage.
Our developer documentation details the elements you can modify and how to select them.
We're currently working to roll out the new scheduler . While this transition is in progress, there are two CSS fields on the Advanced CSS panel:
- Updated CSS Styling - CSS code in this field will affect your new scheduler. You’ll be able to add code to this field and preview it before you’re migrated to the new scheduler, so you can be ready for the transition. To preview how your code will work on the new scheduler, click Preview Changes .
- Custom CSS Styling - CSS code in this field will affect your existing scheduler . When you’re migrated to the new scheduler, this field will be removed. Any code in this field will not affect your new scheduler.
To add custom CSS:
- In Acuity, click Customize appearance, then click Advanced CSS.
- In the Custom CSS styling field, add your code.
- Click Save changes.
To remove custom CSS:
- In Acuity, click Customize appearance, then click Advanced CSS.
- In the Custom CSS styling field, delete your code.
- Click Save changes.
If something isn’t working the way you want after adding custom code, temporarily remove the code to check if the problem persists. If the problem is fixed, the issue is tied to your CSS code; revise it or keep it removed to solve the problem. If the problem continues, it’s separate from your custom CSS. In that case, please search this Help Center for solutions or contact us.
Note: This guide explains how to add custom CSS to your scheduler. Your custom CSS code is outside the scope of our support. We’re unable to help with writing or troubleshooting this code for you. We also can’t guarantee your custom code will be functional or fully compatible with Acuity or with Squarespace websites. If you need help creating CSS code, consider hiring an expert through Squarespace Marketplace.
Use the API to tap into the power of Acuity
Use our API to connect Acuity to your own custom-developed software. You can write code to automatically create, cancel or reschedule appointments based on your outside system, or return custom-filled intake forms. If you’re a developer who wants to call our API, please consult our API Documentation.
To find your API Key:
- In Acuity, click Integrations.
- At the top of the screen, click API, then click view credentials.
If you need a more powerful API experience, fill out this form to discuss our Enterprise Plan.