Add Barberly Booking to Squarespace

How to integrate Barberly booking widgets into your Squarespace website for barber shops and salons.
Tags:

Adding Barberly Booking to Squarespace

This guide will help you integrate Barberly booking widgets with your Squarespace website, enabling clients to book appointments with your barbershop or salon directly from your site.

Prerequisites

Before you begin, make sure you have:

  • A Squarespace website with editing access
  • A Barberly account with at least one booking widget created

Adding Barberly Widget to Squarespace

The simplest way to add Barberly booking widgets to Squarespace is by using the Code 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 Squarespace Page:

    • Log in to your Squarespace account and open the page editor
    • Click the “+” icon where you want to add your booking widget
    • Search for and select “Code” from the list of blocks
    • Click the “</> Code” option
    • Paste your Barberly widget code into the code editor
    • Click “Apply” to save
    • Save and publish your page

Best Practices for Squarespace Integration

  1. Strategic Widget Placement:

    • Book Online Button: Add to your header, navigation area, or featured on your homepage
    • Embedded Booking Page: Create a dedicated “Book Now” or “Appointments” page
    • Booking Popup: Add to service pages to encourage immediate booking
    • Booking Sidebar: Consider for site-wide booking access

  2. Design Consistency:

    • Customize your Barberly widgets to match your Squarespace template colors
    • Maintain consistent button styling between native Squarespace buttons and Barberly buttons

  3. Mobile Optimization:

    • Preview your widgets on mobile devices using Squarespace’s device preview feature
    • Test the booking flow on both desktop and mobile

Troubleshooting Common Issues

  • Widget Not Displaying: Ensure your Squarespace template allows custom code. Some templates may have restrictions.
  • Preview Mode Limitations: Some embedded elements may not display correctly in preview mode. Always check the published site.

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 Squarespace site without any additional steps required. The widget code remains the same even when you modify settings like colors, text, or styles.