The Booking Popup widget adds a button to your website. Clicking it opens your Barberly booking page in a popup in the center of the screen, so the visitor stays on the current page while booking. You can use it across the whole site or on individual pages such as service pages or blog posts.
Create a new instance#
- Log in to your Barberly account at portal.barberly.com.
- Go to MenuAppsAll Widgets.
- Click Booking Popup.
- Select Create New Instance.
- Name the instance, for example "Main Popup Booking".
Settings#
- Button text
- The text on the button that opens the popup.
- Booking URL
- The URL of your Barberly booking page shown in the popup.
Styles#
- 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.
- Border radius
- How rounded the popup corners are.
- Box shadow
- A shadow around the popup.
On mobile devices the popup adapts to the screen size and has an X button to close it.
Add the popup to your website#
The live preview shows the button and the popup. Click the button to check that the popup opens 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:
<div id="popup-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="popup_booking" data-container-id="popup-booking-container"></script>For platform steps, see the guides for WordPress, Wix and Squarespace.
Multiple instances#
You can create more popup instances, for example with a different design for each section of your website. Repeat the steps above under Booking Popup. Each instance has its own integration code.
Update a live popup#
Open the instance under MenuAppsAll Widgets, make your changes and save. The popup on your website updates automatically, so you do not need to change the code on your site.