Using custom CSS, webhooks, and APIs

Unlock advanced styling and custom integrations. 

You can use Cascading Style Sheets (CSS), webhooks, and Application Programming Interfaces (APIs) to connect your own code to Acuity, going beyond Acuity’s built in customizations.

Use:

• CSS to change the appearance of your scheduler. 
• Webhooks to send a one-way stream of information from Acuity to another system.
• APIs to create a back-and-forth connection between Acuity to your own custom-developed software.

CSS customization and API access are available on the Premium or 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.

While you can use CSS to modify the look of existing elements, it's not possible to use it to add new functionality or features to the scheduler.

Our developer documentation details the elements you can modify and how to select them.

To add custom CSS:

1. In Acuity, click Scheduling Page, then click Advanced CSS.
2. Add your code in the field provided, then click Save.

To remove custom CSS:

1. In Acuity, click Scheduling Page, then click Advanced CSS.
2. In the code input field, delete your code, then click Save.

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 webhooks to automatically send Acuity information

Acuity's websites can automatically notify a URL of your choosing about booking and purchase activity in Acuity. Account owners and contributors with admin access can set up webhooks. There's a 25 webhooks limit per contributor.

If you're a developer and want to leverage Acuity's webhooks, please consult our webhooks documentation. 

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:

1. In Acuity, click Integrations.
2. Scroll to the API section, then click view credentials.