Skip to main content
All CollectionsGetting StartedInitial Business Setup
Installing the Self-Booking Overlay: Square
Installing the Self-Booking Overlay: Square

To allow customers to book appointments online, a booking button or tab must first be added to the website.

Alexa Stewart avatar
Written by Alexa Stewart
Updated over a year ago

Overview

To allow customers to book appointments online, a booking button or tab must first be added to the website. After successful installation, clicking this button or tab triggers a window to slide onto the current webpage. This window called the Self-Booking Overlay, is where the appointment booking happens.

Please Note: Square does not have the ability to edit the website’s source code. If you have multiple locations that should have their own “Book Now” button or want to link a button to a specific service, this can only be accomplished through the full-screen booking page.

Instructions

  1. Open the Quick Access panel

  2. Choose “Online”

  3. Click on “Settings”

  4. Choose “Tracking Tools”

  5. Scroll down to “Add Custom Header Code” and select “Add New Code”

  6. Enter a name for your code: Boulevard Booking Overlay

  7. Paste the code snippet from your Manage Business settings in the text box

  8. Select “<head>” under “Where would you like to place this code?”

  9. Click “Save”

  10. Add a “Book Now” button on the page and link to “External Link”

    1. For the Slide Out Self-Booking Overlay (Single Site Operations Only):

      1. The URL should be your site’s URL, followed by /#book-now. For Example:

        1. If you are on https://abundantsalon.com/, then the URL should be abundantsalon.com/#book-now

      2. Click “Save”

    2. For multiple sites:

      1. Obtain your Business Id and Location Id

      2. Replace the SECTION with the respective Id

      3. Click “Save”

    3. For direct service links:

      1. In the Boulevard Dashboard

        1. Go to Manage Location

        2. Click “Services”

        3. Locate the service you want to link and click on it

        4. Under Sharing Options, choose “Link to this Service via external site”

        5. Copy the link

      2. In Square

        1. Paste the link you copied into the URL section

        2. Click “Save”

Did this answer your question?