Article Summary
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:
- In Acuity, click Scheduling Page, then click Link.
- 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.
- Click either the Embed Scheduler tab or the Embed Other tab. Only one of the two will appear.
- Click Copy.
Add a booking button
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.
Squarespace websites
Add a button block to your website. When choosing the link for your new button, use a link to your scheduling page or a direct link.
Other websites
To add a booking button to your website, first copy the code from Acuity, then add it to your website.
To get the code:
- In Acuity, click Scheduling Page, then click Link.
- 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.
- Click the Booking button tab.
- Click Copy.
After you copy the code, add it 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:
- In Acuity, click Scheduling Page, then click Link.
- 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.
- Click the Booking bar tab.
- 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:
- Get the embed code for your scheduler by going to the Scheduling page link panel, clicking Embed Scheduler, then clicking Copy.
- 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. Learn how to change your scheduler's colors.
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.