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

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

Will Patterson avatar
Written by Will Patterson
Updated over 2 months 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.

Add the Booking Widget to your Site

  1. Go to Settings in your site's dashboard.

  2. Select the Custom Code tab under Advanced Settings.

  3. Select + Add Custom Code at the top right.

  4. Paste the code snippet from your Manage Business > Client Experience > Self-booking overlay code in the text box.

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

  6. Select an option under Add Code to Pages:

    All pages: This adds the code to all of your site's pages, including any new pages that you'll create in the future. Choose whether to load the code only once per visit or on each page, your visitor opens.

    Choose specific pages: Use the drop-down menu to select the relevant pages.

  7. Choose Head under where to place your code.

  8. Select the Code Type tab and make sure Essential is chosen.

  9. Select Apply.

  10. Go to the left-hand menu of the WIX dashboard and choose "Edit Site".

  11. This redirects to your website editor.

  12. At the top left, click “Dev Mode”, then “Turn on Dev Mode”.

  13. Select "masterPage.js" in the Page Code sidebar.

  14. Paste the code located below (in grey) into the masterPage.js drawer at the bottom of the page.

    import wixLocation from "wix-location";
    $w.onReady(function () {
    // Write your code here
    });



    /**
    * Adds an event handler that runs when the element is clicked.
    * @param {$w.MouseEvent} event
    */
    $w('#bookBtn').onClick((event) => {
    wixLocation.to(wixLocation.url.replace(/(?:#.*)?$/, "#book-now"));
    })

  15. Add a "Book Now" button on the page with a link of "None".

  16. With the button still selected, go back down to the drawer and add an ID of bookBtn on the button element.

  17. Select "onClick()" and make sure to edit it to say: $w('#bookBtn').

    If done correctly it looks like this:

  18. If adding the “Book Now” button to a new page, follow the same steps as above but ensure additional buttons are titled correctly i.e. $w('#bookBtn2’) if adding a second button.

  19. If adding additional “Book Now” buttons to the same page, only the second half of the code needs to be repeated.Ensure additional buttons are titled correctly i.e. $w('#button3’) if adding a third button.

/**

* Adds an event handler that runs when the element is clicked.

* @param {$w.MouseEvent} event

*/

$w('#button3').onClick((event) => {

wixLocation.to(wixLocation.url.replace(/(?:#.*)?$/, "#book-now"));

})

IMPORTANT: You have to fully publish the page to see the self-booking overlay pop out. It cannot be tested on the editing screen.

Did this answer your question?