Add the Acuity Booking Bar to your Website

The Acuity Booking Bar displays a call-to-action bar at the top of your website, and includes a button that opens your Client's Scheduling Page. The Booking Bar can be displayed on your entire site or just a single page.

To add the booking bar to a single page, add the embed code to a regular HTML or embed widget on that page.

To add the bar to your entire website, you'll need to embed the code for the bar to display on every page; often this can be done in the "footer" area of your site builder.

You can find your Booking Bar embed code right here, and here are instructions for some specific site builders: Squarespace, Wix, WordPress.

Customizing the Booking Bar

To change the color of the booking bar, head to Customize Appearance and change the Button/Accent color:

Fonts and other styles generally appear as the default for your own website.  To update the wording, just look for the words you'd like to change in the embed code itself, and update 'em.

Screenshots ⚓

desktop example

mobile example

Squarespace ⚓

For Squarespace, we'll add the Booking Bar into the Footer section:

1. Start by heading to your Squarespace account
2. Navigate to Settings -> Advanced -> Code Injection
3. Paste your Booking Bar embed code into the Footer section and click save.  The Booking Bar should now be active!

Wix ⚓

For Wix, the code needs to be added in the Site Manager section of your Wix account.

1. Go to your Site Manager. 
2. Select Tracking & Analytics from the sidebar navigation. 
3. Choose +New Tool and select Custom from the dropdown. 
4. Set up your Acuity Booking Bar code:
   1. Enter your Booking Bar code.
   2. Select the relevant domain.
      Note: This option will appear only if you have multiple domains.
   3. Enter a name for the code. 
   4. Select Choose specific pages under Add Code to Pages:
      1.  Tick the checkbox next to the relevant page. 
   5. Select Body - end under Place Code in. 
5. Click Apply. 

WordPress ⚓

For WordPress, we'll use a handy plugin to add the Booking Bar into the page footer:

1. Start by adding the Insert Headers and Footers plugin to your WordPress site (here's a handy guide for installing WordPress plugins)
2. Once the plugin is active, navigate to Settings -> Insert Headers and Footers in WordPress
3. Paste your Booking Bar embed code into the Footer section and click save.  The Booking Bar should now be active!

*Pro tip: The booking bar will show at the top of your webpage. If you want it on the bottom that can be done by adding CSS in addition right after the code used to embed the booking bar:

<style type="text/css">
.acuity-booking-bar {bottom: 0px !important;top: auto !important;margin: 0px auto;}
body.acuity-bar-visible {position: relative !important;top: 0px !important;}
</style>