The Embedded Booking Page widget places your full Barberly booking page inside a page of your website, in an iframe. Clients complete the whole booking without being sent to another site. You can use it for a dedicated booking page or add it to your homepage, service pages or contact page.
Create a new instance#
- Log in to your Barberly account at portal.barberly.com.
- Go to MenuAppsAll Widgets.
- Click Embedded Booking Page.
- Select Create New Instance.
- Name the instance, for example "Main Booking Page".
Settings#
- Booking URL
- The URL of your Barberly booking page.
- Height
- The height of the embedded page, for example "100%" for full height or a pixel value such as "600px".
Styles#
- Border radius
- How rounded the corners are.
- Box shadow
- A shadow around the widget.
The embedded page adapts to the screen size. On desktop it shows the full booking interface, and on mobile the interface adjusts to the smaller screen.
Add the page to your website#
The live preview shows how the embedded page will look. Go through the booking flow to check that it works.
- Copy the code from the Copy this code to your website section.
- Paste it into the HTML of your website where the booking page should appear.
- Save and publish your website.
Example code:
<div id="262b1c5d48b64c16a9786cd8ebbbecd3-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="embed_262b1c5d48b64c16a9786cd8ebbbecd3" data-container-id="262b1c5d48b64c16a9786cd8ebbbecd3-container"></script>For platform steps, see the guides for WordPress, Wix and Squarespace.
Multiple instances#
You can create more embedded page instances for different sections of your website. Repeat the steps above under Embedded Booking Page. Each instance has its own integration code.
Update a live embedded page#
Open the instance under MenuAppsAll Widgets, make your changes and save. The embedded page on your website updates automatically, so you do not need to change the code on your site.
If the page does not display correctly#
- Make sure the container is wide and tall enough for the booking interface.
- Check for CSS conflicts with your website's styles.
- Check that the booking URL is correct.
- Make sure no content security policy on your site blocks the iframe.