Add the Acuity Booking Bar to your Website

Our new Acuity Booking Bar can be displayed on your entire site, or just a single page.  To add the bar in a single page, simply add the embed code to a regular HTML or embed widget toward the bottom of the page.  To add the bar to your entire site, you'll need to embed the code into an area displayed on every page, such as 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: SquarespaceWordPress.

If you're having any trouble getting started with the Acuity Booking Bar, drop us a line at

Customizing the Booking Bar

To change the color of the booking bar, just head to 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.



desktop example



mobile example



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!


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!
Have more questions? Submit a request