Adding Acuity Scheduling to your website

Review the different ways you can connect your scheduling page to your site.

Have your clients book directly through your website by embedding your scheduler. Add booking buttons, and booking bars, to your website pages to lead your clients to your scheduler.

Tip: If you get started and decide you want more hands-on help setting up Acuity Scheduling, you can hire a vetted expert. 

Watch a video

What you can add

There are three ways you can add Acuity to a website:

• Embedded scheduler - You can embed Acuity’s full online booking experience on your website.
• Booking button - You can add a button leading to your scheduler on your Acuity-generated client scheduling page.
• Booking bar - You can add a bar with a booking button to the top of your website pages.

Embed your scheduler

You can embed your scheduler in almost any website, whether you’re using a Squarespace website or one from another provider. You can embed your default scheduler, or any scheduler you can directly link to.

Squarespace websites

Add a Scheduling block to your website.

Tip: To password protect your booking, add your scheduling block to a page with a page password. To make your booking exclusive to site members, add Digital Products to your site, then put your scheduling block within your gated content.

Other websites

To embed your scheduler to other websites, first copy the embed code from Acuity, then add it to your website. The exact steps to add it to your website will vary depending on your provider, but will involve adding HTML. See the section below for tips for select providers, or contact your website builder.

To get your embed code:

1. In Acuity, click Scheduling page link.
2. In the Direct links & embedding section, use the drop-down menu to choose whether to embed your default scheduler, or a more-specialized scheduler, such as for a particular calendar or appointment type.
3. Click the Embed scheduler tab.
4. Click Copy.

Add a booking button

To add a booking button to your website, first copy the code from Acuity, then add it to your website. How you add a booking button depends on whether you’re using a Squarespace website or another provider. You can embed a button that leads to your default client scheduling page, or any scheduler you can direct link to.

To get the code:

1. In Acuity, click Scheduling page link.
2. In the Direct links & embedding section, use the drop-down menu to choose whether to link to your default scheduler, or a more-specialized scheduler, such as for a particular calendar or appointment type.
3. Click the Booking button tab.
4. Click Copy.

Squarespace websites

Add the code you’ve copied to a code block. To learn how, visit Code blocks.

Adding JavaScript to code blocks is a premium feature available in Business and Commerce plans.

Other websites

Add the code you’ve copied to your website’s code. The exact steps to add it to your website will vary depending on your provider. See the section below for tips for select providers, or contact your website builder.

Add a booking bar

To add a booking bar to your website, first copy the code from Acuity, then add it to your website. How you add a booking bar depends on whether you’re using a Squarespace website or another provider. Your booking bar contains a button that can lead to your default client scheduling page, or any scheduler you can direct link to.

To get the code:

1. In Acuity, click Scheduling page link.
2. In the Direct links & embedding section, use the drop-down menu to choose whether to link to your default scheduler, or a more-specialized scheduler, such as for a particular calendar or appointment type.
3. Click the Booking bar tab.
4. Click Copy.

Squarespace websites

Use code injection to paste the code into the footer section of your site.

Using code injection is a premium feature available in Business and Commerce plans.

Other websites

Add the code you’ve copied to your website’s code. The exact steps to add it to your website will vary depending on your provider. See the section below for tips for select providers, or contact your website builder.

Tips for using other website builders

Drupal

Change your text format to Full HTML to add custom HTML, then add the code snippet from Acuity. 

GoDaddy

Follow GoDaddy’s instructions for adding custom HTML to add the code Acuity automatically generates.

Ionos

Add Acuity's automatically generated embed code to a Widget/HTML element. You may need to view your scheduler in Page view to check that it’s functioning correctly.

To prompt Ionos to display your embedded scheduler to clients on mobile devices, disable the option to only display optimized content on smartphones and tablets.

Leadpages

Use the Leadpages HTML widget to add the code snippet from Acuity.

Shopify

Use the HTML editor to add the code from Acuity to one of your pages. Save your changes before trying to view your new scheduler.

Vistaprint/Webs.com

Use the custom HTML feature to add the automatically generated code from Acuity to your website.

Weebly

Drag the Weebly Embed Code element onto your web page, then add Acuity’s automatically generated code to the widget.

Wix

Follow Wix’s steps for adding the HTML element to your site. When you’re ready to add code to the HTML element, use the code snippet that Acuity generates for you.

Note: It isn’t possible to embed your scheduler if you’re using the Wix Artificial Design Intelligence instead of the editor.

If the frame holding your embedded scheduler is shorter than the scheduler itself, some mobile devices may experience glitches when booking. To prevent this, use the Wix mobile editor to drag the bottom of the embedded scheduler’s frame down until the entire scheduler is visible. Make sure the bottom of the scheduler is visible throughout the booking process.

WordPress

To embed your scheduler on your WordPress site, use the WordPress Text Editor to add the embed code from Acuity.

To embed your scheduler:

1. Get the embed code for your scheduler by going to the Scheduling page link panel, clicking Embed Scheduler, then clicking Copy.
2. Use the WordPress Text Editor to paste the code you’ve copied to one of your pages.

Note: You can embed your scheduler on sites built using WordPress, but not on sites hosted by WordPress.com. Sites hosted by WordPress.com have URLS that end in wordpress.com. If this affects you, add a direct link to your client scheduling page instead.

Zenfolio

Follow Zenfolio’s instructions for creating a custom page and adding and embedding code. Use the code from Acuity to embed the scheduler. 

Customize the booking button and booking bar

Fonts and other styles in the booking button and booking bar generally match the default for your website.

You can update the wording of the button or bar by editing the code snippet Acuity provides.

The booking bar and booking button change color to match the color of buttons and accents on your scheduler.

To change the color of buttons and accents on your scheduler:

1. In Acuity, click Customize appearance.
2. Use the Button/accent color drop-down menu to choose a color.
3. Click Save changes.

Tip: To make website navigation for the broadest audience possible, it’s important to keep accessibility in mind during the design process. Learn more about creating accessible site content.