Wordpress Installation Link
Step 1: Add the SE Widget on your page
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 theScheduleEngine
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)
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
andonclick
event handler have been added to it.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 thedata-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
tonull
to clear the previous valueScheduleEngine.showRepair({ email: null });
firstName
Use
firstName
to set the user's first name.ScheduleEngine.showRepair({ firstName: 'John' });
Set
firstName
tonull
to clear the previous valueScheduleEngine.showRepair({ firstName: null });
lastName
Use
lastName
to set the user's last name.ScheduleEngine.showRepair({ lastName: 'Appleseed' });
Set
lastName
tonull
to clear the previous valueScheduleEngine.showRepair({ lastName: null });
phone
Use
phone
to set the user's phone number.ScheduleEngine.showRepair({ phone: '5551234567' });
Set
phone
tonull
to clear the previous valueScheduleEngine.showRepair({ phone: null });
roomKey
Use
roomKey
to specify which room the repair widget should show by default.ScheduleEngine.showRepair({ roomKey: 'sales' });
Set
roomKey
tonull
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
tonull
to clear the previous valueScheduleEngine.showRepair({ zipCode: null });
Wordpress Installation
Installation steps
- Schedule Engine now offers a Wordpress Plugin to add our Scheduler and Chat services to your website. Simply add the Plugin and 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
- Make sure your site is connected to an active domain (e.g. www.companyname.com)
- In your Wix Dashboard, go to
Settings
and click on theCustom Code
link found in theAdvanced
section of the page. - Click on the
Add Custom Code
button. - 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> - Enter the Name:
Schedule Engine Main Script
- Choose which page(s) to apply the script.
- Place the code in the
Head
area. - Click
Apply
. - Click on the
Add Custom Code
button again. - 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>
- Enter the Name: Schedule Engine Button Script
- Choose which page(s) to apply the script (should match the previous selection).
- Place the code in the Body area.
- 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
- Go to the Advanced section of Squarespace and click on
Code Injection
. - Insert the following code in the
Header
area (or theFooter
area if the Header section has any issues.)
Note: The value used for<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>data-api-key
will be provided to you from someone at Schedule Engine. - Edit your Squarespace website and insert HTML/Code into your page to create a "Book Now" button.
- 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>
- 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