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
Go to Settings in your site's dashboard.
Select the Custom Code tab under Advanced Settings.
Select + Add Custom Code at the top right.
Paste the code snippet from your Manage Business > Client Experience > Self-booking overlay code in the text box.
Enter a name for your code: Boulevard Booking Overlay.
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.Choose Head under where to place your code.
Select the Code Type tab and make sure Essential is chosen.
Select Apply.
Go to the left-hand menu of the WIX dashboard and choose "Edit Site".
This redirects to dev mode on your website.
Select "masterPage.js" in the Page Code sidebar.
Paste the code located below (in grey) into the masterPage.js drawer at the bottom of the page.
// The code in this file will load on every page of your site
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
*/
export function bookBtn_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
wixLocation.to(wixLocation.url.replace(/(?:#.*)?$/, "#book-now"));
}
14. Add a "Book Now" button on the page with a link of "None". With the button still selected, go back down to the drawer, and add an ID of bookBtn on the button element.
15. With the button still selected, go back down to the drawer, and add an ID of bookBtn on the button element.
16. Select "onClick()" and make sure to edit it to say: bookBtn_click.
* When creating your button make sure it has a location (as shown in line 21 in the above screenshot).
If done correctly it looks like this:
17. If adding additional buttons follow the same steps as above but ensure additional buttons are titled correctly i.e. ("bookBtn2" if adding a second button)
Important: You have to fully publish the page to see the self-booking overlay pop out. It cannot be tested on the editing screen.