Overview
After you complete the initial setup, and review the RWG integration, the next step is to receive your code and directions for how to install it on your website. You need to insert code into the code of your website in order for the scheduler to appear.
Who uses this feature
Administrators, managers, and office employees
Primarily benefits Residential Service and Replacement business types
Feature configuration
To get started with Scheduling Pro, request a demo on our Pro Products page, or reach out to your Customer Success Manager (CSM) or Pro Account Manager (PAM).
The new Scheduling Pro is built on a separate platform compared to the previous version. If you're an existing Scheduling Pro customer, contact your Pro Product Specialist to opt into the new version.
Things to know
Before setting up your scheduler, make sure you have the following items configured in your ServiceTitan account:
Zones: Defines the areas where jobs can be booked.
Job Type Mapping: Helps with setting up your services offered in the scheduler.
Business Hours: Ensures easier setup for your capacity settings.
Campaigns: Enables more robust reporting and attribution capabilities.
Scheduling Pro Tag: Enhances tracking for online jobs.
Phone Number: Phone number provided on the scheduler.
Install options
After reviewing the RWG integration, click Next to receive the scheduler code.
From the Install screen, you have 8 different code options:
Custom Website (default)
Wordpress
Wix
Squarspace
GoDaddy
Duda
Quick Install
Direct Link
Option 1: Install Scheduling Pro on your website
Having the Custom Website (default) option selected, follow the below steps:
Add the scheduler to your screen by copying and pasting the script given in your website’s <body /> section. This gives you access to the _scheduler object.
Note: You can add `data-auto-open="true"` to this script to automatically open the scheduler on page load.
Active your Call-to-Action (CTA).
Copy and paste the <button> code given onto your page as well. Style and position as needed.
Note: Any HTML element can be used, provided the class and onclick event handler have been added to it.
Publish your site and now you can access Scheduling Pro from your page by clicking your CTA or accessing with a direct link.
Note: Updates to the colors, questions, and other customization for the scheduler can be made directly in the Scheduling Pro area of ServiceTitan, under Marketing Integrations.
Option 2: Install scheduler with WordPress
Our general install instructions for custom websites can work with your Wordpress (WP) site. However, if you are looking for a quicker install with limited custom scripting required, follow the instructions below:
Make sure your site is connected to an active domain, for example, www.companyname.com.
On your Wordpress Dashboard, go to Plugins and search for an Insert Headers and Footers plugin. For this example, we’re using the plugin below:
Note: If you’re comfortable with adding custom scripting to your site, you don’t need to use this or a similar plugin. This option allows you to quickly install with minimal coding required.
Go to Settings > WP Headers and Footers.
In the WP Headers and Footers section, add the main script that was provided to you in Scheduling Pro self-onboarding in Step 1 to either the header, body, or footer section of your page and save your changes. We recommend adding to the body section. The format should look something like this:
<script
data-api-key="{placeholder- your key provided to you by Scheduling Pro}"
data-schedulerid="{placeholder- your id provided to you by Scheduling Pro}"
defer
id="se-widget-embed"
src="https://embed.scheduler.servicetitan.com/scheduler-v1.js"
></script>Note: You can add `data-auto-open="true"` to this script to automatically open the scheduler on page load.
Find the page you want to add the scheduler to from the Pages section and select Edit. This takes you to the page editor view.
From here, you have a few options for creating a Call to Action (CTA) button to launch your scheduler. Choose one of the following options:
Quickly add a class to a default Wordpress button: Use the Add function + to add a new button to your page, or click an existing button on your page. You can click the button to rename it to a prompt for your customers like Schedule Online, Book Now, or Request Service. From here, click the Advanced dropdown on the side of your screen to see some additional controls for this button. You should see a section called Additional CSS class(es). In this section, add the following class, making sure it’s separated by a space from any other classes tied to the button.
Custom button (onclick method): Copy and paste the following <button> on your page and position and style it as needed. You can use an existing button as long as it has the onclick attribute below added to the code:
<button
onclick="_scheduler.show({ schedulerId: placeholder- your id n provided to you by Scheduling Pro })"
type="button"
>
Book Now!
</button>Custom button (class method): Apply the st-booking-show class to any HTML element on your web page and position and style it as needed. You can use an existing button as long as it has the class attribute below added to the code.
<button class="se-booking-show" type="button">
Book Now!
</button>For Elementor Users
Select the button that you want to add the se-booking-show class to.
Click the Advanced tab in the sidepanel.
In the CSS Classes field add the se-booking-show class.
Save the changes to your website. You should see Scheduling Pro open when you click your Call to Action (CTA) button.
If you are having issues, make sure that:
Both pieces of code are added correctly and are both enabled.
Your button ID, scheduler ID and API key are correct.
Your site is whitelisted in Scheduling Pro self-onboarding under Scheduler Details.
We recommend you include both example.com and www.example.com versions on your whitelisted websites. If your issue persists, reach out to the Scheduling Pro support team at schedulingpro@servicetitan.com.
Option 3: Install scheduler with Wix
Make sure your site is connected to an active domain (e.g. www.companyname.com).
In your Wix Dashboard, go to Settings > Advanced > Custom Code.
Click Add Custom Code.
Copy and paste your scheduler code from self-onboarding into the Paste the code snippet here section. This code should look something like this:
<script
data-api-key="{PROVIDED TO YOU IN SELF-ONBOARDING}"
data-schedulerid="{PROVIDED TO YOU IN SELF-ONBOARDING}"
defer
id="se-widget-embed"
src="https://embed.scheduler.servicetitan.com/scheduler-v1.js"
></script>Note: You can add `data-auto-open="true"` to this script to automatically open the scheduler on page load.
Select a name for this custom code that you can easily remember like Scheduling Pro Main Script or something similar.
In the Add Code to Pages section, we recommend selecting All Pages and Load code on each new page. This allows you to easily add the Scheduling Pro script to other areas of your website later.
In the Place Code in section, we recommend that you select Body - end.
When finished, click Apply to save your changes.
The Custom Code page opens.Ensure the Scheduling Pro Main Script toggle is turned on.
Go to Home > Edit Site. The Wix Website Editor opens.
Click Add Elements and select any button.
Note: You can customize, resize, and place that button wherever you want on your site. You can also create multiple buttons on the page.
Take note of the ID for this button.
Save your changes and publish your website.
Visit your website, right-click the button you created, and click Inspect.
A few lines above the button’s code should read something similar to: <div id="unique-button-id" class="unique-button-id"
Copy the listed button ID.
From the Custom Code screen, click Add Custom Code again.
Copy and paste the following script into the Paste the code snippet here section, adding in the button ID you copied earlier:
Note: You can add multiple button IDs here where the unique-button-id is added by separating the button IDs with a comma: [“unique-button-id-1”, “unique-button-id-2”].
<script>
!(function (n) {
function e() {
document.addEventListener('click', function (e) {
!!n.find(function (n) {
return e.target.closest('#' + n);
}) && _scheduler.show();
});
}
document.body && 'loading' !== document.readyState
? e()
: document.addEventListener('DOMContentLoaded', e);
})(
["unique-button-id"],
);
</script>Select and enter a name for this piece of custom code like Scheduling Pro Button Script.
From Add Code to Pages, we recommend selecting All Pages and Load code on each new page. This allows you to easily add the Scheduling Pro script to other areas of your website later. This should match what you did for the main script.
From Place Code in, we recommend selecting Body - end. This should match what you did for the main script.
Click Apply to save your changes.
Ensure the toggle on this custom code is enabled and the scheduler should now open on your website.
If you are still having issues, make sure that both pieces of code are added correctly, they are both enabled, your button ID, scheduler ID and API key are correct, and make sure that your site is whitelisted in Scheduling Pro self-onboarding under Scheduler Details. We recommend including both example.com and www.example.com versions on your whitelisted websites. If your issue persists, please reach out to the Scheduling Pro support team at schedulingpro@servicetitan.com.
Option 4: Install scheduler with Squarespace
Go to the Website section of your website from your Squarespace dashboard to go to the Squarespace website editor.
From Websites > Pages, go to Utilities > Website Tools > Code Injection. This opens a panel that allows you to add custom code throughout your site in the header, footer, or optional Lock Screen section of your website.
Add the code from Step 1 of your Scheduling Pro install instructions to the Header section:
<script
data-api-key="placeholder- your key provided to you by Scheduling Pro"
data-schedulerid="placeholder- your id provided to you by Scheduling Pro"
defer
id="se-widget-embed"
src="https://embed.scheduler.servicetitan.com/scheduler-v1.js"
></script>Note: You can add `data-auto-open="true"` to this script to automatically open the scheduler on page load.
Note: There are two values, data-api-key and data-schedulerid, that you need to replace using the instructions from Scheduling Pro self-onboarding. In step 1 of those install instructions, take ktfkou4sui7i45ktmfdo0r7p and replace the first COPY FROM YOUR INSTALL INSTRUCTIONS IN SCHEDULING PRO. Next, replace the second COPY FROM YOUR INSTALL INSTRUCTIONS IN SCHEDULING PRO with sched_l8hjdpp8pvzraczfuikd31ep.
After installing the main scheduler script, you need to build a button that calls the scheduler. Click the page that you want to add the scheduler to and click Edit. This opens the page editor. You have two options to install your button:
Use custom code (recommended): Use this option if you are comfortable with styling and positioning your button with code.
Hover over the section where you want to add the button and click the Add Block option.
From here, select the Code option. This opens a code block where you can add your own custom scripting.
Add the following code to the block, replacing the placeholder value with your own scheduling ID from your install instructions:
<button
type="button"
>
Book Now!
</button>Note: In this setup, the styling, color, and positioning of the button are entirely up to you and controlled through the code you use. You can move or update this button however you want and save the changes to your site.
Use a quick link to a button: Use this option if you aren’t comfortable with styling and positioning your button with code.
Either click Add Block and create a new button, or select an existing button on your page and click the link button to edit the URL.
Add the following link, replacing the placeholder “www.example.com” with the exact address for this page: https://example.com/?se_action=eyJ0eXBlIjoic2Utc2hvdy1tb2RhbCJ9
Note: This isn’t recommended if you are able to use the custom code option. This option reloads the page, which can cause issues with capturing lead source data on jobs booked through your scheduler.
In Scheduling Pro, make sure that your website’s URL is added to the Website section in Scheduler Details. This is very important because your scheduler won’t load properly on your website if these are not listed.
Publish the changes to your site and, when you click your button, you should now see the scheduler open on your site. You can also share the direct link used in Option B for the button with your customers to let them directly access online scheduling.
Option 5: Install scheduler with GoDaddy
Install the scheduler
Click Edit website on websites.godaddy.com or any other method you use to access GoDaddy Website Builder.
On the Edit site page, click Add section.
On the panel that pops up, select Files & Web > HTML so you can add custom code to your site.
When the new section is created, click it and select Custom code.
Copy and paste the following code into that section:
Note: You can add `data-auto-open="true"` to this script to automatically open the scheduler on page load.
Note: There are two values, “data-api-key” and “data-schedulerid”, that you need to replace using the instructions from Scheduling Pro self-onboarding. In Step 1 of those install instructions, you should take the string of letters that looks like “ktfkou4sui7i45ktmfdo0r7p” and replace the first “COPY FROM YOUR INSTALL INSTRUCTIONS IN SCHEDULING PRO”. Next, replace the second “COPY FROM YOUR INSTALL INSTRUCTIONS IN SCHEDULING PRO” with the following string of letters “sched_l8hjdpp8pvzraczfuikd31ep”.
Build the scheduler button
After installing the scheduler script, you need to build your scheduler button. There are two ways to build it.
Option 1: Use a prebuilt button
This is a good option if you are not as familiar with coding and want something simple.
Click Add Section again on your site.
Select General > Buttons.
After you add the section, click the button to see options in the side panel. Make sure the action for the button is set to Link to a website URL and paste the following:
yourwebsiteaddress.com/?se_action=eyJ0eXBlIjoic2Utc2hvdy1tb2RhbCJ9
Option 2: Use custom code
This is a good option if you are comfortable with styling and positioning your button with code.
Click Add Section again on your site.
Select Files & Web > HTML again.
When the new section is created, click on it to see several options appear in the side panel.
Click Custom code and copy the following into the new section:
<button inline">if(window.parent.document.location.search.indexOf('se_action') === -1){
window.parent.document.location.search += window.parent.document.location.search.length === 0 ? '?se_action=eyJ0eXBlIjoic2Utc2hvdy1tb2RhbCJ9' : '&se_action=eyJ0eXBlIjoic2Utc2hvdy1tb2RhbCJ9'
}
else{
window.parent.document.location.href = window.parent.document.location.href
}
">Book Now</button>Note: In this setup, the styling, color, positioning, etc. of the button are entirely up to you and controlled through the code you use.
Finalize scheduler details
In Scheduling Pro, make sure that both your website address and https://websites.godaddy.com are added to the Website section in Scheduler Details. This is very important because your scheduler won’t load properly on your website if these aren’t listed.
Publish the changes to your site and, when your button is clicked, you should now see the scheduler open on your site. You can also share the direct link used in Option 1 for the button with your customers to let them directly access online scheduling.
Option 6: Install scheduler with Duda
Ensure your website is connected to an active domain like www.companyname.com.
In your Duda Dashboard on the Sites screen, find the website you would like to edit.
Click Edit to enter the Duda Site Editor.
Identify the body section of your page, right-click it, and select Edit HTML/CSS.
Copy and paste your first snippet of scheduler code from self-onboarding anywhere into the body. This code should look something like this:
Create a button/CTA to launch your scheduler from Widgets > Button and place it on your website.
Right-click the button and select Edit HTML/CSS.
Modify the button to include the appropriate onclick from the second snippet of scheduler code from self-onboarding, which should look something like this:
When you finish styling and positioning your button, click Publish or Republish.
Note: You can add `data-auto-open="true"` to this script to automatically open the scheduler on page load.
The scheduler should now open on your site.
If you are still having issues, make sure that both pieces of code are added correctly, your scheduler ID and API key are correct, and make sure that your site is whitelisted in Scheduling Pro self-onboarding under Scheduler Details. It’s recommended to include both example.com and www.example.com versions on your whitelisted websites. If your issue persists, please reach out to the Scheduling Pro support team at schedulingpro@servicetitan.com.
Option 7: Install scheduler with Quick Install
The Quick Install option offers a simple way to integrate our scheduler into your website with minimal coding. This method directs customers to a dedicated page where the scheduler is hosted, making it ideal for situations where integrating the scheduler directly into your site proves challenging. However, it may impact your ability to capture detailed attribution data.
To quickly set up online booking with little to no code:
Copy the provided quick link.
Add it as a button on your website.
Option 8: Generate a Direct Link
When you configure your Scheduling Pro settings, you can share direct links with your customers through marketing materials or communications that immediately open the scheduler when they’re clicked.
On the Success! screen, go to Direct Link and set or remove any of the following fields:
Whitelisted Website (required)
Trade
Job Type
Zip/Postal Code
Schedule Date
Time Slot
Source Tracking: Source Tracking makes it easier to create direct links with UTM parameters or prefilled campaigns directly within ServiceTitan, helping you capture attribution more efficiently across sources.
Campaign: Select an existing campaign to reference in the link.
Note: If you use Marketing Pro Ads, the integration will automatically assign the campaign when the job reaches ServiceTitan, making manual selection ineffective and not recommended, as it will be overridden.
Or manually enter the following fields:
Affiliate
UTM Ad Group
UTM Campaign
UTM Content
UTM Medium
UTM Source
UTM Term
Click Generate Link to create a direct link for your scheduler.
Click Copy Link.
When finished, click Finish.
When you’re done and have installed the scheduler with one of the options, click Finish.