Booking sidebar

The Booking Sidebar widget adds a button to your website. Clicking it slides in a sidebar from the edge of the screen with your Barberly booking page. Visitors close the sidebar to return to the page. It takes little space, so it suits being on every page of the site, including long pages where a static button scrolls out of view.

Create a new instance#

Log in to your Barberly account at portal.barberly.com.
Go to MenuAppsAll Widgets.
Click Booking Sidebar.
Select Create New Instance.
Name the instance, for example "Main Booking Sidebar".

Settings#

Button text: The text on the button that opens the sidebar.
Booking URL: The URL of your Barberly booking page shown in the sidebar.
Sidebar position: The side of the screen the sidebar opens from, right or left.

Styles#

Button styling

Background color: The color of the button.
Text color: The color of the button text. Choose one that contrasts with the background.
Padding: The space inside the button.
Border radius: How rounded the button corners are.
Font weight: Normal, bold and so on.

Sidebar styling

Border radius: How rounded the sidebar corners are.
Box shadow: A shadow around the sidebar.
Width: How much of the screen the sidebar takes up, set separately for desktop and mobile.

On smaller screens the sidebar takes up more of the screen width, and the close button stays clearly visible.

The live preview shows the button and the sidebar. Click the button to check that the sidebar slides in with your booking page.

Copy the code from the Copy this code to your website section.
Paste it into the HTML of your website where the button should appear.
Save and publish your website.

Example code:

html

<div id="sidebar-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="sidebar_booking" data-container-id="sidebar-booking-container"></script>

For platform steps, see the guides for WordPress, Wix and Squarespace.

Keep the button in a fixed position#

To keep the button visible while visitors scroll, add this to your website's custom CSS:

css

#sidebar-booking-container {
  position: fixed;
  right: 20px; /* or left: 20px; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

Multiple instances#

You can create more sidebar instances, for example with a different design for each section of your website. Repeat the steps above under Booking Sidebar. Each instance has its own integration code.

Open the instance under MenuAppsAll Widgets, make your changes and save. The sidebar on your website updates automatically, so you do not need to change the code on your site.