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

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

  2. Select the Custom Code tab under Advanced Settings.

    Step1-2.png



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

    Step3.png
  4. Paste the code snippet from your Manage Business settings in the text box.

    Screen_Shot_2021-05-06_at_9.45.08_AM.png



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

  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.

    unnamed__1_.png
    Step9.png
  10. Go to the bottom left-hand corner of the WIX dashboard and choose "Edit Site"

    Step10.png
  11. Select "Turn on Dev Mode".

    Step11.png
  12. Select "masterPage.js" in the Page Code sidebar

    Step12.png
    1. 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"));
      }
  13. 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.

    Step14.png
    Step13.5.png
  14. With the button still selected, go back down to the drawer, and add an ID of bookBtn on the button element.

    Screen_Shot_2021-06-08_at_6.44.27_PM.png
  15. 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 will look like this:



Did this answer your question?