Live Chat Installation Guide

Overview

[Overview content needed: Add 2–3 sentences introducing this workflow or feature, who uses it, and why it's helpful.]

WordPress Installation

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

Note: As of 2025, the Frictionless WordPress plugin is not available.

Note: If you are installing both Scheduler and Chat, the API Key for each will be unique.

Installation for All Other Web Pages

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

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:

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.

Documentation Index