Schedule Engine Widget Installation

Step 1: Add the SE Widget on your page

  1. Copy/paste the following script just before the end of your <body> (recommended), in your <head>, or wherever is most convenient. This will give you access to the ScheduleEngine object.

    Note: The value used for data-api-key is for demonstration purposes only. Please obtain the correct value from your Schedule Engine representative.

    <script
      data-api-key="the API Key provided by Schedule Engine"
      id="se-widget-embed"
      src="https://embed.scheduleengine.net/schedule-engine-v3.js"
    ></script>
    

    Note: The value used for data-api-key will be provided to you from someone at Schedule Engine.

Step 2: Activate your CTA (Call-to-Action)

  1. Copy/paste the following <button> onto your page. Style and position as needed.

    <button
      class="se-widget-button"
      type="button"
      onclick="ScheduleEngine.show()"
    >
      Book Now!
    </button>
    

    Note: Any HTML element can be used, provided the class and onclick event handler have been added to it.

  2. Publish your site and you should be seeing the Schedule Engine widget on your page.

Examples

These examples are not meant to be exhaustive, but rather show some common use cases for triggering the Schedule Engine modal to show. The common idea between them is that ScheduleEngine.show*() must be called to open the modal. The API section explains all the different methods and options available.

Example template with a button

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
  </head>
  <body>
    ...
    <button
      class="se-widget-button"
      type="button"
      onclick="ScheduleEngine.show()"
    >
      Book Now!
    </button>
    ...
    <script
      data-api-key="the API Key provided by Schedule Engine"
      id="se-widget-embed"
      src="https://embed.scheduleengine.net/schedule-engine-v3.js"
    ></script>
  </body>
</html>

Note: The value used for data-api-key will be provided to you from someone at Schedule Engine.

Example template with a dropdown

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script>
      window.handleSelectChange = function (event) {
        if (event.currentTarget.value === 'book-now') {
          ScheduleEngine.show();
        }
      };
    </script>
  </head>
  <body>
    ...
    <select onchange="window.handleSelectChange(event)">
      <!-- Other options -->
      <option class="se-widget-button" value="book-now">Book Now</option>
    </select>
    ...
    <script
      data-api-key="the API Key provided by Schedule Engine"
      id="se-widget-embed"
      src="https://embed.scheduleengine.net/schedule-engine-v3.js"
    ></script>
  </body>
</html>

Note: The value used for data-api-key will be provided to you from someone at Schedule Engine.

Script attributes

API

options parameter

The options parameter is an object that can be used to pass data into the modal.

Example of options usage:

ScheduleEngine.showRepair({
  firstName: 'John',
  lastName: 'Appleseed',
  roomKey: 'sales',
});

Any of the following keys may be used in the options object:

Wordpress Installation

Watch a Wordpress installation video here: https://youtu.be/-7rmUDafvPU

Installation steps

  1. Search for a Wordpress plugin "Insert Header and Footer". Install and activate the plugin.
  2. Go to Settings > Insert Header and Footer.
  3. Copy/paste the script on the Footer section. This will give you access to the ScheduleEngine object. Note: The value used for data-api-key is for demonstration purposes only. Please obtain the correct value from your Schedule Engine representative.
    <script
      data-api-key="the API Key provided by Schedule Engine"
      id="se-widget-embed"
      src="https://embed.scheduleengine.net/schedule-engine-v3.js"
    ></script>
    
  4. Create a button or link that you wish to use to launch the Schedule Engine booking widget.
  5. In the Advanced Properties of the button or link, set the CSS Style to se-booking-show
  6. Publish your page/site and test the Schedule Engine button/link.

WIX Installation

Watch a Wix installation video here: https://youtu.be/_iCAQVbNs6I

Installation steps

  1. Make sure your site is connected to an active domain (e.g. www.companyname.com)
  2. In your Wix Dashboard, go to Settings and click on the Custom Code link found in the Advanced section of the page.
  3. Click on the Add Custom Code button.
  4. Copy/paste the following code into the Code Snippet area.
    <script
      data-api-key="the API Key provided by Schedule Engine"
      id="se-widget-embed"
      src="https://embed.scheduleengine.net/schedule-engine-v3.js"
    ></script>
    
  5. Enter the Name: Schedule Engine Main Script
  6. Choose which page(s) to apply the script.
  7. Place the code in the Head area.
  8. Click Apply.
  9. Click on the Add Custom Code button again.
  10. Copy/paste the following script into the Code Snippet area.
<script>
  !(function (n) {
    function e() {
      document.addEventListener('click', function (e) {
        !!n.find(function (n) {
          return e.target.closest('#' + n);
        }) && ScheduleEngine.show();
      });
    }
    document.body && 'loading' !== document.readyState
      ? e()
      : document.addEventListener('DOMContentLoaded', e);
  })(
    // TODO: the following values ARE NOT THE VALUES YOU SHOULD USE.  PLEASE WATCH THE WIX INSTALLATION VIDEO AT THE TOP OF THIS SECTION TO LEARN HOW TO GET THE VALUES FOR YOUR BUTTONS
    ['button_id_1', 'button_id_2'],
  );
</script>
  1. Enter the Name: Schedule Engine Button Script
  2. Choose which page(s) to apply the script (should match the previous selection).
  3. Place the code in the Body area.
  4. Click Apply. Publish your site and you should be seeing the Schedule Engine widget on your page.

Squarespace Installation

Watch a Squarespace installation video here: https://youtu.be/qZQAdqtw0PQ

Installation steps

  1. Go to the Advanced section of Squarespace and click on Code Injection.
  2. Insert the following code in the Header area (or the Footer area if the Header section has any issues.)
    <script
      data-api-key="the API Key provided by Schedule Engine"
      id="se-widget-embed"
      src="https://embed.scheduleengine.net/schedule-engine-v3.js"
    ></script>
    
    Note: The value used for data-api-key will be provided to you from someone at Schedule Engine.
  3. Edit your Squarespace website and insert HTML/Code into your page to create a "Book Now" button.
  4. Insert this code (or another HTML method for creating a button or link):
<button class="se-widget-button" type="button" onclick="ScheduleEngine.show()">
  Book Now!
</button>
  1. Save and publish your website and test the Schedule Engine button/link.

We're here to help!

While official support is not yet available for platforms such as Duda, Weebly and Gator, we can work with your team to find the best solution for your website. Please contact support for installation help with less common platforms.

Get in touch with us at support@scheduleengine.com.