---
title: "Live Chat Installation Guide"
slug: "live-chat-installation-guide"
updated: 2026-10-15T01:25:32Z
published: 2026-10-15T01:25:32Z
canonical: "help.servicetitan.com/live-chat-installation-guide"
---

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

# Live Chat Installation Guide

## WordPress Installation

Install our WordPress plugin to add our Scheduler and Chat services to your website.

> [!NOTE]
> **Note:** As of 2025, the Frictionless WordPress plugin is not available.

> [!NOTE]
> **Note:** If you are installing both Scheduler and Chat, the API Key for each will be unique.

## Installation for All Other Web Pages

### Embed Chat Widget in Own Web Page

1. Add the following script tag to the index.html head tag to include the WebChat script: <script src="https://webchat.scheduleengine.net/webchat-v1.js"></script>
2. Add the following script tag to the index.html body tag to initialize WebChat. loadChat will return a promise that resolves when the chat has completed loading: <script>

WebChat.loadChat({

apiKey: 'your API key',

primaryAccentColor: '#888888',

autoOpen: true,

autoOpenMobile: true,

mobileHeightPercentage: 75,

autoOpenExpiration: 1,

title: 'Welcome to Your Company Name',

initialMessage: 'Hi, thanks for coming to Your Company Name. How can we help you today?'

});

</script>
3. Specify different options according to your needs:

| **Option** | **Required** | **Default** | **Description** |
| --- | --- | --- | --- |
| apiKey | Y |  | The embed api key for the client. |
| agentBubbleBackgroundColor | N | primaryAccentColor | Background color for agent chat bubbles. |
| agentBubbleTextColor | N | primaryAccentTextColor | Color of the agent text. |
| autoOpen | N | false | Will automatically open the chat upon initialization of the script. |
| autoOpenDelay | N | 3 | The amount of seconds to wait before automatically opening the chat window. |
| autoOpenExpiration | N | 2 | The number of hours that must elapse when the chat window state will be reset. |
| autoOpenMobile | N | false | Causes the chat window to open automatically on initial visit in a small format browser. If not specified, the autoOpen value will be used. |
| autoOpenMobileDelay | N | 3 | Seconds to wait before auto-opening in a browser window smaller than 768px. If not specified, autoOpenDelay is used. |
| backgroundColor | N | 'white' | The background color of the widget. |
| bubbleBackgroundColor | N | '#f1f1f1' | The color of the customer chat bubbles. |
| bubbleTextColor | N | 'black' | The color of the customer chat text. |
| showButton | N | true | This will automatically show a "Chat with us button". |
| showButtonMobile | N | true | If set to false, it will hide the button for mobile devices. |
| buttonBackgroundColor | N | '#3c425c' | The background color of the chat launch button. |
| buttonText | N | 'Chat with Us' | The text in the chat launch button. |
| buttonTextColor | N | '#000000' | The color of the text in the chat launch button. |
| env | N | 'production' | The flex environment. |
| height | N | 600 | The height of the chat window. |
| initialMessage | N | 'Hi, how can we help you today?' | This will be the opening message the customer will see. |
| initialResponses | N | [] | An array of strings paired with the opening message. e.g. ["Repair", "Appointment Change", "Careers"] |
| logoUrl | N | undefined | If a URL to a logo is provided, it will be displayed in the chat header. |
| mobileHeightPercentage | N | 100 | The chat widget in mobile format will appear at a percentage of the screen height. |
| modal | N | false | Whether the chat window is modal. |
| modalTransparency | N | 60 | The transparency percentage for the screen in modal mode. |
| position | N | 'right' | The position chat button and widget will appear. ('right' or 'left'). |
| primaryAccentColor | N | 'gray' | Color used to decorate the widget. |
| primaryAccentTextColor | N | 'white' | Color used along with the primaryAccentColor to decorate the widget. |
| sendButtonBackgroundColor | N | primaryAccentColor | Color used to decorate the send button. |
| sendButtonTextColor | N | primaryAccentTextColor | Color used to decorate the send icon. |
| suggestedResponseTextColor | N | primaryAccentColor | Color used to decorate the suggested responses. |
| rememberState | N | true | Tells the chat widget to keep track of its open state. |
| title | N | 'Welcome' | Title for the chat header. |
| width | N | 400 | The width of the chat window. |
| userIdentity | N | undefined | The user id field for a chat customer. |

1. To open the chat programmatically, you can call:

WebChat.open()

### Make Chat Appear After Hours Only

Use the following script to display the chat widget only during after-hours:

<script>

var hour_of_day = new Date().getHours();

var day_of_week = new Date().getDay();

if (day_of_week == 0 ||

day_of_week == 1 && hour_of_day <= 7 || day_of_week == 1 && hour_of_day >= 18 ||

day_of_week == 2 && hour_of_day <= 7 || day_of_week == 2 && hour_of_day >= 18 ||

day_of_week == 3 && hour_of_day <= 7 || day_of_week == 3 && hour_of_day >= 18 ||

day_of_week == 4 && hour_of_day <= 7 || day_of_week == 4 && hour_of_day >= 18 ||

day_of_week == 5 && hour_of_day <= 7 || day_of_week == 5 && hour_of_day >= 18 ||

day_of_week == 6) {

WebChat.loadChat({

apiKey: 'xxxxxxxxxxxxxxxxx',

primaryAccentColor: '#888888',

autoOpen: true,

autoOpenMobile: true,

mobileHeightPercentage: 75,

autoOpenExpiration: 1,

title: 'Welcome to Your Company Name',

initialMessage: 'Hi, thanks for coming to Your Company Name. How can we help you today?'

});

} else {

// client chat code here

}

</script>

### Google Analytics Events

If the web page that embeds this Chat widget is configured with the Google Analytics script (analytics.js or gtag/js), the Chat widget will fire events to the configured GA account. The following events will be fired:

| **Category** | **Action** | **Label** | **Description** |
| --- | --- | --- | --- |
| Chat Widget | Chat Opened |  | Fired when the widget is opened the first time for a page. |
| Chat Widget | Chat Initiated |  | Fired when customer sends first message. |
| Chat Widget | Chat Served by Operator | Operator id | Fired when agent accepts chat. |
| Chat Widget | Chat Ended |  | Fired when agent or customer ends chat. |
| Chat Widget | Chat Closed |  | Fired when agent ends chat. |
| Chat Widget | Appointment Booked |  | Fired when agent books an appointment for the customer. |