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 will trigger a window to slide onto the current webpage. This window, called the Booking Widget, 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 settings in the text box.
- Enter a name for your code: Boulevard Booking Widget
- 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 bottom left-hand corner of the WIX dashboard and choose "Edit Site"
- Select "Turn on Dev Mode".
- 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"));
} - 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.
- With the button still selected, go back down to the drawer, and add an ID of bookBtn on the button element.
- Select "onClick()" and make sure to edit it to say: bookBtn_click