---
title: "Scheduler installation guide (Schedule Engine)"
slug: "scheduler-installation-guide-schedule-engine"
tags: ["Area - Scheduling Pro", "Focus - Service Replacement", "Role - Admin", "Type - Residential"]
updated: 2026-10-16T03:16:57Z
published: 2026-10-16T03:16:57Z
canonical: "help.servicetitan.com/scheduler-installation-guide-schedule-engine"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Scheduler installation guide (Schedule Engine)

## Overview

Learn how to install your scheduler with Wordpress, Wix, or Squarespace.

> [!NOTE]
> **Note:** This feature applies only to the legacy Schedule Engine. ServiceTitan customers are encouraged to transition to [Scheduling Pro](/residential-s-r/docs/scheduling-pro-home), an upgraded tool designed to replace Schedule Engine on your website and provide a seamless booking experience.

## 

## Things to know

- For the scheduler to appear and function properly, the website must be whitelisted. To have a website whitelisted, contact [Technical Support](/residential-s-r/docs/contact-servicetitan-technical-support).

## Install scheduler through WordPress

See the [Wordpress Installation Link](https://wordpress.org/plugins/frictionless/#what%20is%20booking%20widget%20%3F) to download our plugin.

### Step 1: Add the SP Widget on your page

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

> [!NOTE]
> **Note:** The value used for data-api-key is for demonstration purposes only. You can get the correct value from your Scheduling 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]
> **Note:** The value used for data-api-key is provided to you from someone at ScheduleEngine

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

1. Copy and paste the following <button> onto your page. Style and position as needed. <button class="se-widget-button" type="button" > Book Now!</button>.

> [!NOTE]
> **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 see the SchedulingPro widget on your page.

## Examples

These examples are not meant to be exhaustive, but rather show some common use cases for triggering the SchedulingPro 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" > 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]
> **Note:** The value used for data-api-key will be provided to you from someone at ScheduleEngine.

### 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 > <!-- 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]
> **Note:** The value used for data-api-key will be provided to you from someone at ScheduleEngine.

### Step 3: Review 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: 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**>

### Step 4: Review API settings

- 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 hides the SchedulingPro 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 accounted for.

## Options parameter

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

### Examples 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 });

## Install scheduler through Wix

1. Make sure your site is connected to an active domain. For example, 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 the **Add Custom Code** button.
4. Copy and paste the following code into the *Code Snippet* area:
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 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>
11. Enter the Name: Schedule Engine Button Script.
12. Choose which pages to apply the script (should match the previous selection).
13. Place the code in the *Body* area.
14. Click **Apply**. Publish your site and you should be seeing the Schedule Engine widget on your page.

## Install scheduler through Squarespace

Watch a Squarespace installation video here: [https://youtu.be/qZQAdqtw0PQ](https://youtu.be/qZQAdqtw0PQ).

### Installation steps

1. Go to the *Advanced* section of Squarespace and click **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]
> **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" > Book Now!</button>
5. Save and publish your website and test the **Schedule Engine.** link.