Wordpress Installation Link

Step 1: Add the SE Widget on your page

  1. Copy/paste the following script in your <head> 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"
      data-defer="true"
      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

  • data-api-key

    This is your unique API key. It allows us to identify you as a Schedule Engine client and to enable your specific set of features. Please contact your Schedule Engine representative if you need help locating your API key.

    Example

    <script data-api-key="API_KEY" ...></script>

  • data-responsive-disabled (optional)

    Defaults to false. Adding the <meta content="viewport" content="width=device-width, ..." /> tag to your <head> is necessary for users to receive a mobile experience. By default, we will check to see if you've already added this tag. If you have, we won't change it, but if you haven't, we will add it for you. If you'd prefer we don't do this, add the data-responsive-disabled attribute to the script tag.

    Example

    <script data-responsive-disabled ...></script>

API

  • ScheduleEngine.showRepair([options])

    Calling this method will display the Schedule Engine modal in repair service mode only. The options parameter is not required. See below for more details.

  • ScheduleEngine.hide()

    Calling this method will hide the Schedule Engine modal. You should never need to do this manually since we handle hiding the modal via the close button in the modal, but we provide this just in case you've got a use case we haven't thought of.

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:

  • email

    Use email to set the user's email.

    ScheduleEngine.showRepair({ email: 'john.appleseed@example.com' });

    Set email to null to clear the previous value

    ScheduleEngine.showRepair({ email: null });

  • firstName

    Use firstName to set the user's first name.

    ScheduleEngine.showRepair({ firstName: 'John' });

    Set firstName to null to clear the previous value

    ScheduleEngine.showRepair({ firstName: null });

  • lastName

    Use lastName to set the user's last name.

    ScheduleEngine.showRepair({ lastName: 'Appleseed' });

    Set lastName to null to clear the previous value

    ScheduleEngine.showRepair({ lastName: null });

  • phone

    Use phone to set the user's phone number.

    ScheduleEngine.showRepair({ phone: '5551234567' });

    Set phone to null to clear the previous value

    ScheduleEngine.showRepair({ phone: null });

  • roomKey

    Use roomKey to specify which room the repair widget should show by default.

    ScheduleEngine.showRepair({ roomKey: 'sales' });

    Set roomKey to null to clear the room dropdown and return the user to the default room.

    ScheduleEngine.showRepair({ roomKey: null });

    All valid roomKey values: (may differ based on client configuration)

    • null - Default
    • 'attic' - Attic
    • 'basement' - Basement
    • 'bathroom' - Bathroom
    • 'bedroom' - Bedroom
    • 'commercial' - Commercial
    • 'dining' - Dining Room
    • 'emergency' - Emergency
    • 'garage' - Garage
    • 'general' - General
    • 'hall' - Hall
    • 'kitchen' - Kitchen
    • 'laundry' - Laundry Room
    • 'living' - Living Room
    • 'office' - Office
    • 'outside' - Outside
    • 'preventative_maintenance' - Preventative Maintenance
    • 'sales' - Get a Quote

  • zipCode

    Use zipCode to set the user's zip code.

    ScheduleEngine.showRepair({ zipCode: '54321' });

    Set zipCode to null to clear the previous value

    ScheduleEngine.showRepair({ zipCode: null });

Wordpress Installation

Installation steps

  1. Schedule Engine now offers a Wordpress Plugin to add our Scheduler and Chat services to your website. Simply add the Pluginand follow the prompts to add to your website.
    • Please note, if you are installing both Scheduler and Chat, the API Key for each will be unique.

WIX Installation

Watch a Wix installation video here: https://www.youtube.com/watch?v=lcKrAk0xqiA

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 Snippetarea.
    <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>

If script does not work, please try this script


<script>
(function (elements) {
  function setupClickListener() {
    document.addEventListener('click', function (event) {
      if (elements.some(element => event.target.closest('#' + element))) {
        ScheduleEngine.show();
      }
    });
  }

  if (document.body && document.readyState !== 'loading') {
    setupClickListener();
  } else {
    document.addEventListener('DOMContentLoaded', setupClickListener);
  }
})//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 Footerarea 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: https://support.scheduleengine.com/support/tickets/new