Embedded Booking Page

Embed your Barberly booking page directly into your website as an integrated section.
Tags:

Embedded Booking Page Widget

The Embedded Booking Page widget allows you to add your Barberly booking page directly into your website as an integrated section, creating a seamless booking experience for your clients without them having to leave your site.

How It Works

This widget embeds your full Barberly booking interface directly into your website using an iframe. Clients can complete the entire booking process without being redirected to another site.

Use Cases

  • Create a dedicated booking page on your website
  • Add to service pages to enable immediate booking for specific services
  • Integrate into your contact page as an alternative to form submissions
  • Include on your homepage to make booking immediately accessible

Setting Up Your Embedded Booking Page

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 Embedded Booking Page option
  4. Select Create New Instance
  5. Give your new instance a name (e.g., “Main Booking Page”)

Configure Widget Settings

In the configuration section, you can set:

  1. Booking URL: Enter the URL to your Barberly booking page
  2. Height: Set the height of the embedded booking page (e.g., “100%” for full height, or a specific pixel value like “600px”)

Customize Widget Style

Adjust the following styling options:

  • Border Radius: Set the roundness of the widget corners
  • Box Shadow: Add a shadow effect to make the widget stand out

Preview and Test

Use the live preview to see how your embedded booking page will look on your website. Test the booking flow to ensure everything works correctly.

Get the Integration Code

Once you’re satisfied with your embedded booking page:

  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 embedded booking page 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="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>

Managing Multiple Embedded Page Instances

You can create multiple embedded page instances 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 “Embedded Booking Page”
  4. Create additional instances as needed
  5. Each instance will have its own unique integration code

Updating Your Embedded Booking Page

To update an embedded booking page 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 instance
  4. Make your desired changes
  5. Save the changes
  6. The embedded booking page on your website will update automatically (no need to update the code on your website)

Responsive Design

The embedded booking page is fully responsive and will adapt to different screen sizes:

  • On desktop, the full booking interface is displayed
  • On mobile devices, the interface adjusts to fit smaller screens
  • The height can be set to a fixed value or a percentage

Troubleshooting

If your embedded booking page isn’t displaying correctly:

  • Ensure the container has sufficient width and height for the booking interface
  • Check that there are no CSS conflicts with your website’s styling
  • Verify that your booking URL is correct
  • Make sure there are no content security policies blocking the iframe