Overview
Learn how to install the Scheduling Pro scheduler to your website with Wix or Duda.
Who uses this feature
Administrators, office employees, marketing managers, accountants, and web developers
Primarily benefits Residential Service
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.
Scheduling Pro website installation overview
After you complete Onboarding for Scheduling Pro, you receive your code and directions for how to install it on your website. You need to insert code into the code of your website for the scheduler to appear. You should send these instructions to your web team or whoever helped you set up your website. You also need access to make edits to your site in order to properly install.
To add the scheduler to your website:
Copy and paste the script given into your website <body />. This gives you access to the _scheduler object.
Activate your CTA (Call-to-Action).
You can use two different methods to call the scheduler on your website with a button. The positioning and styling of the button is up to you or your team. These instructions provide an example of a generic CTA and how to code it.
Copy and paste the following <button> onto your page and position/style 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: 'sched_"{PROVIDED TO YOU IN SELF-ONBOARDING})"
type="button"
>
Book Now!
</button>Apply the st-booking-show class to any HTML element on your web page and position/style as needed. You can use an existing button as long as it has the class attribute below added to the code.
<button class="st-booking-show" type="button">
Book Now!
</button>Note: This method only calls the default scheduler on your account. If you are creating multiple schedulers for different pages or uses, we recommend using the first option to call a specific scheduler.
Publish your website. You should now be able to access Scheduling Pro from your page by clicking your CTA or accessing it with a direct link.
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 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.