The Book Online Button widget adds a button to your website. Clicking it takes the visitor to your Barberly booking page, where they book an appointment. Common places for it are the homepage, the services page and the site header or footer.
Create a new instance#
- Log in to your Barberly account at portal.barberly.com.
- Go to MenuAppsAll Widgets.
- Click Book Online Button.
- Select Create New Instance.
- Name the instance, for example "Homepage Button".
Settings#
- Button text
- The text on the button, for example "Book Now" or "Schedule Appointment".
- Booking URL
- The URL of your Barberly booking page.
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, in the format top/right/bottom/left.
- Border radius
- How rounded the corners are.
- Font weight
- Normal, bold and so on.
- Box shadow
- A shadow around the button.
Add the button to your website#
The live preview shows how the button will look. Click it to check that it opens 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="8854691ef448cad2ae94bb4cc5b9a-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="button_8854691ef448cad2ae94bb4cc5b9a" data-container-id="8854691ef448cad2ae94bb4cc5b9a-container"></script>For platform steps, see the guides for WordPress, Wix and Squarespace.
Multiple instances#
You can create more button instances, for example with a different design for each section of your website. Repeat the steps above under Book Online Button. Each instance has its own integration code.
Update a live button#
Open the instance under MenuAppsAll Widgets, make your changes and save. The button on your website updates automatically, so you do not need to change the code on your site.