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 pops open your client scheduling page. The Booking Bar can be displayed on your entire site, or just a single page.

To add the bar in 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: SquarespaceWordPress.

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

booking-bar-1.png

desktop example

 

booking-bar-3.png

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!

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