Booking Sidebar

Add a booking sidebar that appears on the side of your website for quick access to booking.
Tags:

Booking Sidebar Widget

The Booking Sidebar widget shows a booking sidebar on the side of your website for quick access to booking. This widget is perfect for providing a persistent booking option without taking up much space on your page.

Booking Sidebar Widget

How It Works

When visitors click the button on your website, a sidebar slides in from the edge of the screen containing your Barberly booking interface. The sidebar can be easily closed to return to browsing your website.

Use Cases

  • Add to all pages of your site for consistent booking access
  • Use as a non-intrusive alternative to popups
  • Perfect for websites with long pages where users might scroll past a static booking button
  • Great for mobile users who prefer slide-out menus

Setting Up Your Booking Sidebar

Create a New Instance

  1. Log in to your Barberly account at portal.barberly.com
  2. Navigate to Menu → Apps → All Widgets
  3. Click on the Booking Sidebar option
  4. Select Create New Instance
  5. Give your sidebar instance a name (e.g., “Main Booking Sidebar”)

Configure Sidebar Settings

In the configuration section, you can set:

  1. Button Text: Customize the text that appears on the button that triggers the sidebar
  2. Booking URL: Enter the URL to your Barberly booking page that will be displayed in the sidebar
  3. Sidebar Position: Choose which side of the screen the sidebar appears from (right or left)

Customize Button and Sidebar Styles

Adjust styling options for both the button and the sidebar:

Button Styling:

  • Background Color: Choose a color that complements your website’s color scheme
  • Text Color: Select a color that provides good contrast with the background
  • Padding: Adjust the internal spacing of the button
  • Border Radius: Set the roundness of the button corners
  • Font Weight: Make the text normal, bold, etc.

Sidebar Styling:

  • Border Radius: Set the roundness of the sidebar corners
  • Box Shadow: Add a shadow effect to make the sidebar stand out
  • Width: Control how much of the screen the sidebar occupies (desktop and mobile)

Preview and Test

Use the live preview to see how your sidebar button and sidebar will look on your website. Click the button to test that the sidebar slides in correctly with your booking interface.

Get the Integration Code

Once you’re satisfied with your sidebar:

  1. Copy the generated code from the “Copy this code to your website” section
  2. Paste the code into the HTML of your website where you want the sidebar button to appear
  3. Save and publish your website changes

Website Platform Integrations

For platform-specific integration instructions, check out these guides:

Example Integration Code

<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>

Managing Multiple Sidebar Instances

You can create multiple sidebar instances with different designs for different sections of your website:

  1. Log in to your Barberly account at portal.barberly.com
  2. Navigate to Menu → Apps → All Widgets
  3. Select “Booking Sidebar”
  4. Create additional instances as needed
  5. Each instance will have its own unique integration code

Updating Your Sidebar

To update a sidebar that’s already live on your website:

  1. Log in to your Barberly account at portal.barberly.com
  2. Navigate to Menu → Apps → All Widgets
  3. Find and edit the sidebar instance
  4. Make your desired changes
  5. Save the changes
  6. The sidebar on your website will update automatically (no need to update the code on your website)

Fixed Position Button Option

For enhanced visibility, you can make the sidebar trigger button fixed to a specific position on the screen:

  1. In your website’s custom CSS, add positioning to the container:
#sidebar-booking-container {
  position: fixed;
  right: 20px; /* or left: 20px; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}
  1. This ensures the button remains visible even as users scroll down your page

Mobile Optimization

The booking sidebar is fully responsive and optimized for mobile devices:

  • On smaller screens, the sidebar occupies more of the screen width for easier interaction
  • Touch-friendly close button is prominently displayed
  • Smooth animations enhance the mobile experience