Wordpress Installation Steps

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

For all other webpages

Embed chat widget in own web page

  1. Add the following script tag to the index.html head tag to include WebChat script
<script src="https://webchat.scheduleengine.net/webchat-v1.js"></script>
  1. Add the following script tag to the index.html body tag to initialize WebChat. loadChat will return a promise, that will resolve 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>
  1. Specify different options to suit your needs…
OptionRequiredDefaultDescription
apiKeyYThe embed api key for the client.
agentBubbleBackgroundColorNprimaryAccentColorColor of the agent bubble.
agentBubbleTextColorNprimaryAccentTextColorColor of the agent text.
autoOpenNfalseWill automatically open the chat upon initialization of the script.
autoOpenDelayN3The amount of seconds to wait before automatically opening the chat window.
autoOpenExpirationN2The number of hours that must elapse when the chat window state will be reset.
autoOpenMobileNfalseThis will cause the chat window to open automatically on initial visit in a small format browser. If this value is not specified, the autoOpen value will be used.
autoOpenMobileDelayN3The amount of seconds to wait before automatically opening the chat window in a browser window smaller than 768 pixels. If this value is not specified, the autoOpenDelay value will be used.
backgroundColorN‘white’The background color of the widget.
bubbleBackgroundColorN‘#f1f1f1’The color of the customer chat bubbles.
bubbleTextColorN‘black’The color of the customer chat text.
showButtonNtrueThis will automatically show a “Chat with us button”.
showButtonMobileNtrueIf set to false, it will hide the button for mobile devices.
buttonBackgroundColorN‘#3c425c’The background color of the chat launch button.
buttonTextN‘Chat with Us’The text in the chat launch button.
buttonTextColorN‘#000000’The color of the text in the chat launch button.
envN‘production’The flex environment.
heightN600The height of the chat window.
initialMessageN‘Hi, how can we help you today?’This will be the opening message the customer will see.
initialResponsesN[]This an array of strings and will be paired withthe opening message the customer will see. ex. [“Repair”, “Appointment Change”, “Careers”]
logoUrlNundefinedIf a URL to a logo is provided, we will display it in the chat header.
mobileHeightPercentageN100The chat widget in mobile format will appear at a percentage of the screen height.
modalNfalseWhether the chat window is modal.
modalTransparencyN60The transparency percentage for the screen in modal mode.
positionN‘right’The position chat button and the chat widget will appear. (‘right’ or ‘left’).
primaryAccentColorN‘gray’Color used to decorate the widget.
primaryAccentTextColorN‘white’Color used along with the primaryAccentColor to decorate the widget.
sendButtonBackgroundColorNprimaryAccentColorColor used to decorate the send button.
sendButtonTextColorNprimaryAccentTextColorColor used to decorate the send icon.
suggestedResponseTextColorNprimaryAccentColorColor used to decorate the suggested responses.
rememberStateNtrueTells the chat widget to keep track of its open state.
titleN‘Welcome’Title for the chat header.
widthN400The width of the chat window.
userIdentityNundefinedThe user id field for a chat customer.
  1. To open the chat programatically. You can call
WebChat.open()

Make Scheduler Appear After Hours Only


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

CategoryActionLabelDescription
Chat WidgetChat OpenedFired when the widget is opened the first time for a page
Chat WidgetChat InitiatedFired customer send first message
Chat WidgetChat Served by OperatorOperator idFired when agent accepts chat
Chat WidgetChat EndedFired when agent or customer ends chat
Chat WidgetChat ClosedFired when agent ends chat
Chat WidgetAppointment BookedFired when agent books an appointment for the customer