Book Online Button

Add a customizable booking button to your website that redirects to your Barberly booking page.
Tags:

Book Online Button Widget

The Book Online Button widget adds a customizable button to your website that redirects users to your Barberly booking page when clicked.

How It Works

When visitors click the button on your website, they are redirected to your Barberly booking page where they can schedule an appointment.

Use Cases

  • Add to your homepage to make booking immediately accessible
  • Place on your services page next to service descriptions
  • Include in your website header or footer for easy access from any page
  • Add to your contact page as an alternative to phone booking

Setting Up Your Book Online Button

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 Book Online Button option
  4. Select Create New Instance
  5. Give your new button instance a name (e.g., “Homepage Button”)

Configure Button Settings

In the configuration section, you can set:

  1. Button Text: Customize the text that appears on the button (e.g., “Book Now”, “Schedule Appointment”, etc.)
  2. Booking URL: Enter the URL to your Barberly booking page

Customize Button Style

Adjust the following styling options to match your website design:

  • 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 (format: top/right/bottom/left)
  • Border Radius: Set the roundness of the button corners
  • Font Weight: Make the text normal, bold, etc.
  • Box Shadow: Add a shadow effect to make the button stand out

Preview and Test

Use the live preview to see how your button will look on your website. Click the button to test that it redirects correctly to your booking page.

Get the Integration Code

Once you’re satisfied with your button:

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

Managing Multiple Button Instances

You can create multiple button 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 “Book Online Button”
  4. Create additional instances as needed
  5. Each instance will have its own unique integration code

Updating Your Button

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