Add Barberly Booking to WordPress

Step-by-step guide to add Barberly booking widgets to your WordPress website for barber shops and salons.
Tags:

Adding Barberly Booking to WordPress

This guide will show you how to integrate Barberly booking widgets with your WordPress website, allowing your clients to book appointments directly from your site.

Prerequisites

Before you begin, make sure you have:

  • A WordPress website with administrator access
  • A Barberly account with at least one booking widget created
  • Access to your WordPress dashboard

Adding Barberly Widget to WordPress

The simplest way to add Barberly booking widgets to WordPress is by using the built-in HTML widget or Custom HTML block:

  1. Get Your Widget Code:

    • Log in to your Barberly account at portal.barberly.com
    • Navigate to Menu → Apps → All Widgets
    • Select the widget you want to use
    • Copy the integration code

  2. Add to WordPress Page/Post:

    • Edit the WordPress page where you want to add the booking widget
    • For Block Editor (Gutenberg):
      1. Click the (+) icon to add a new block
      2. Search for and select “Custom HTML”
      3. Paste your Barberly widget code into the HTML block
      4. Click “Update” or “Publish” to save your changes
    • For Classic Editor:
      1. Switch to the “Text” tab (HTML view)
      2. Paste your Barberly widget code where you want it to appear
      3. Click “Update” or “Publish” to save your changes

  3. Add to WordPress Sidebar:

    • Go to Appearance → Widgets in your WordPress dashboard
    • Add a “Custom HTML” widget to your desired sidebar area
    • Paste your Barberly widget code into the content field
    • Click “Save” to apply the changes

Best Practices for WordPress Integration

  1. Strategic Placement:
    • Add a Book Online Button to your main menu or header area
    • Use the Booking Popup widget on service pages
    • Add the Embedded Booking Page to a dedicated “Book Now” page
    • Consider adding a Booking Sidebar to your site for persistent access

Troubleshooting Common Issues

  • Widget Not Displaying: Make sure your WordPress theme allows custom HTML and JavaScript
  • Style Conflicts: If your theme’s CSS conflicts with the widget styling, you might need to try a different widget type

Keeping Your Integration Updated

When you make changes to your Barberly widgets in your Barberly account at portal.barberly.com, they will automatically update on your WordPress site without any additional steps required. The widget code remains the same even when you modify settings like colors, text, or styles.