WebChat Administration
Symbee Connect provides a full-featured, flexible and fully customizable customer facing WebChat front-end for use in your customer facing web sites. The WebChat front-end itself is a "no code" configuration based approach that provides a URL link for use in your web sites.
Once you have configured your WebChat Endpoints, your website developers can then include the respective URL in your web site to offer your web site visitors a means of getting customer service via webchat. For more details on including the resulting WebChat endpoint URL in your web site and other developer related information, refer to the Webchat Developers Reference.
The Webchat Reference Developers Guide also discusses how to brand and if you wish, completely reskin your WebChat using your Logo and CSS (Cascading Style Sheets).
Also refer to the Setting up your first WebChat step by step that guides you through setting up your first WebChat endpoint.
WebChat Endpoints
This screen lists and lets you maintain your currently configured Webchat Endpoints or Instances. Options are available to Modify, Delete and Add WebChat Instance.
Each configured Webchat endpoint or instance is a logical container made up of:
- A unique URL used to launch the WebChat endpoint.
- An association to either a Skill Queue or Contact Flow for routing of incoming webchats and other associated behavior configuration.
- A custom logo that can be uploaded.
- A complete set of configurable strings representing all the textual literals used in the customer-facing UI, so they can be customized for your company/experience, and/or translated to a foreign language.
- A configurable pre-conversation form with a set of customizable input fields to collect additional details from the customer/user prior to starting the chat (for example, user identifier, product being enquired on, ticket number, etc). This information gets associated with the conversation and is visible when the chat is delivered to the agent.
Therefore, you configure a separate WebChat instance for each different Skill Queue or Contact Flow you are routing your webchats through and a separate WebChat instance for each language you want to present to offer to the customer.
This enables you to control which WebChat URL is used to begin the chat conversation through your customer facing web site. For example, if your customer is viewing the French version of your web site and clicks your "Chat with us" link, you might use your French WebChat instance URL to begin the chat rather than the English WebChat URL. Or, if your customer was in the Products page versus the Support page of your web site and clicks the Chat button, you could use your Sales WebChat URL verses your Product WebChat URL if those requests are to be routed or handled differently.
Add WebChat Instance
WebChat Instance Code
A unique code that will be displayed in pick-lists within the Administration Portal.
WebChat Instance Name
A short description for the new WebChat Instance.
Maintain WebChat Instance Settings
Usage and Developer Details
Chat Client Address:
Use this URL in your website to launch your WebChat. You can either launch this URL as a pop-out window (using window.open(...)
), or embed this URL in an <iframe>
, depending on your needs.
If presenting as a pop-out window, and you configured Chat Access Control settings (below) to restrict the domain, you will need to wrap this WebChat URL in an <iframe>
within a small HTML document served by your domain. See example code.
Example Code - Launching your WebChat:
Top Level Pop-Out Window Example
The following example shows HTML / JavaScript code that launches your WebChat as a top-level pop-out window. Adjust the width and height arguments as needed based on the number of fields you are prompting for in your pre-chat questionnaire form.
The example also uses optional query-string parameters to pre-populate the name field in the pre-chat questionnaire form:
<div id="launch_chat_btn"
onclick="window.open(
'https://dev.symbeeconnect.com/symbee-connect-chatclient/chatClient/coopers-buds/dev/WallyNew?fullName=John%20Black',
'_blank', 'width=340,height=550')" >
Chat with Us
</div>
Framed Pop-Out Window Example
If you are wanting to present your WebChat as a pop-out window, and you also configured Chat Access Control settings to restrict the domain, you will need to wrap your WebChat URL in an <iframe>
within a small HTML document (webpage), have that document served by your website domain and then use that wrapper page as the basis for your pop-out.
The following is an example of a minimal HTML document you can copy and host, that wraps your WebChat window in an `
<!DOCTYPE html>
<html>
<head>
<title>Example Framed Popout</title>
<style> html { height: 100%; } body { height: 100%; margin: 0; }</style>
</head>
<body>
<iframe src="https://dev.symbeeconnect.com/symbee-connect-chatclient/chatClient/coopers-buds/dev/WallyNew"
style="width: 100%; height: 100%; border: none; overflow: hidden;"></iframe>
</body>
</html>
Queue Status Endpoint:
Usage of this Status URL is optional. This service endpoint can be called in the background to proactively determine if your backing chat queue is open or closed. The response is a JSON string describing the current Open/Closed state.
The intent is to allow a web site integrating chat to optionally hide a “Chat With Us” button if the backing contact center Webchat queue is not open.
Example Code - Checking Open/Closed Status
The following example JavaScript code uses a native fetch()
to call the Status endpoint, and branch based on whether your backing Webchat queue is open or closed.
Note for CORS: The status endpoint only accepts POST requests, and requires a 'Content-Type' header to be sent on the request.
// Example using native fetch()
function getQueueStatus() {
var statusUrl = "https://dev.symbeeconnect.com/symbee-connect-chatclient/integrationService/coopers-buds/dev/WallyNew//status";
fetch(statusUrl, {
method: "POST",
headers: { "Content-Type" : "text/plain" }
})
.then( resp => {
if(resp.ok) {
resp.json()
.then( result => {
if(result.isOpen) {
console.log("Webchat is Open...");
// do open behavior
}
else {
console.log("Webchat is Closed...");
// do closed behavior
}
});
}
else {
throw new Error("Status call failed");
}
})
.catch ((err) => {
console.log("Error fetching Webchat Open status: " + err);
});
}
Integration Settings
Delivery Provider
Choose the delivery provider for your webchat conversations from this Instance. See Selecting the Chat Delivery Provider for further details on this.
If using Amazon as the Deliver Provider, you will also need to make sure you have run the Amazon Connect Chat Integration CloudFormation. Refer to the Setting up your first WebChat step by step guide for instructions on this.
Default Queue List
Only relevant and displayed if the Delivery Provider is set to Symbee. Choose the Symbee Connect Skill Queue new webchat conversations from this Instance will be routed through.
Amazon Chat Flow
Only relevant and displayed if the Delivery Provider is set to Amazon. Choose the Amazon Connect Contact Flow new webchat conversations from this Instance will be initially routed through.
SES From Address
A verified 'From' address in your Amazon SES (Simple Email Service) used for sending transcript emails to the customer when they request a copy of the chat transcript at the end of the webchat. Leave blank to disable transcript by email functionality.
SES AWS Region
The AWS Region of the Amazon SES (Simple Email Service) used for sending transcript emails. Leave blank to disable transcript by email functionality.
Chat Control
Idle Timeout in Minutes
The time in minutes (between 1 and 60) after which the conversation will be automatically ended if no message activity (from either side) is seen.
Idle Timeout Message
The message sent when an idle timeout occurs.
Customer Communication Timeout Seconds
How long in seconds (between 10 and 900) to wait after communication stops from the Customers browser or device, until the chat is assumed to be ended or closed. Usually this is if the Customer just closes the window, tab, or browser without explicitly ending the conversation first.
This time period exists to support embedding the Chat frame within a web-page where the user can navigate between pages (results in a refresh) while preserving the chat conversation. Set a longer time to support use-cases such as allowing a Customer to reboot their cable modem and have the conversation continue afterwards.
Maximum Chats Message
The response message sent to the customer in a maximum chats reached condition.
Chat Access Control
Also refer to the the Webchat Developers Reference for a more detailed discussion of these settings.
Restrict WebChat to Frame only
Whether to restrict this WebChat Instance to being displayed in frames hosted by specified domains only. Enable for additional security if you will not be hosting this WebChat Instance in a top level pop-out window.
Hosting Domains
Domains allowed to access or host this WebChat Instance. Use "*" for all domains. Separate multiple domains with a comma. For example: https://www.example1.com, https://www.example2.com
Chat Client UI Customization
Use these settings to customize the pre-chat questionnaire form presented to the customer at the beginning of the webchat, and to customize the overall look of the webchat.
Customer UI Version
Version of the Chat Client UI. Select Version 2.
Disable Customer Form
If checked, the initial entry form displayed to the customer will be bypassed, and the chat conversation will be queued to begin immediately. All default form values will still be passed to the agent.
Display Email field
Whether or not the Email field is displayed in the Chat welcome screen.
Display Phone field
Whether or not the Phone field is displayed in the Chat welcome screen.
Display Initial Question field
Whether or not the Initial Question field is displayed in the Chat welcome screen.
Friendly Agent Name Enabled
Whether to display the name of the agent returned by the chat server or a generic "Agent" label
Primary Color
Provide a custom primary color for the chat UI (use CSS compatible name, or CSS rgb values, e.g. rgb(255,255,255) for white)
Secondary Color
Provide a custom secondary color for the chat UI (use CSS compatible name, or CSS rgb values, e.g. rgb(255,255,255) for white)
Custom CSS file location
The URL to a custom CSS file to add additional customization to the chat client. Use this if you want further control of how your webchat experience looks to the customer. Refer to the Webchat Developers Reference for more details on this, and an example CSS file to start customizing with.
Logo
Logo to display in the client for this chat instance. Upload a JPEG or PNG file. It will be scaled to fit in the allotted space. You can further customize how this Logo appears by customizing the CSS (see above).
Canned messages and localization
Use these settings to customize the actual text displayed to the customer in the webchat experience, include different languages.
Script Not Supported Message
Displayed when the customer has JavaScript turned off
Chat Loading Header
Only used if Disable Customer Form is set. The header text displayed on the initial loading view that gets (very briefly) presented to the customer while a chat session is initially being negotiated when the Customer Form is disabled.
Chat Loading Text
Only used if Disable Customer Form is set. The message text displayed on the initial loading view that gets (very briefly) presented to the customer while a chat session is initially being negotiated when the Customer Form is disabled.
Chat Page Title
Title of the chat window
Chat Header Bar
Text displayed in the chat window header
Chat Title
Displayed when the chat client starts
Form Heading Text
Provide a short message to accompany the chat initiation form
Required Value Error Message
Displayed when any required values are missing
First Name Standard Field Label
Label used for the standard First Name field (if enabled) on the chat form
Last Name Standard Field Label
Label used for the standard Last Name field (if enabled) on the chat form
Full Name Standard Field Label
Label used for the standard Full Name field (if enabled) on the chat form
Email Address Standard Field Label
Label used for the standard Email Address field (if enabled) on the chat form
Phone Number Standard Field Label
Label used for the standard Phone Number field (if enabled) on the chat form
Initial Question Label
Displayed as placeholder in Initial Question block of chat form, must be replaced by customer
Optional Field Marking Text
The text used beside a chat form field to denote it is configured as optional
Start Chat Button Label
Label used on the main Start Chat button
Requesting Conversation Message
Displayed when the server is waiting for a spot in the queue
Send Button Label
Label used on the conversation window Send Message button
Action Menu Request Call Label and Heading
Label used for the Action Menu Request Call with Agent option
Request Call Action Form Help Text
The body text displayed on the Request Call form
Request Call Action Form Phone Field Label
The label of the Phone Number field on the Request Call form
Action Menu Download Transcript Label and Heading
Label used for the Action Menu Download Transcript option
Download Transcript Action Form Help Text
The body text displayed on the Download Transcript form
Action Menu Email Transcript Label and Heading
Label used for the Action Menu Email Transcript option
Email Transcript Action Form Help Text
The body text displayed on the Email Transcript form
Email Transcript Action Form Email Field Label
The label of the Email Address field on the Email Transcript form
Action Menu End Chat Label and Heading
Label used for the Action Menu End Chat option
End Chat Action Form Help Text
The body text displayed on the End Chat form
Action Forms Close Button Label
Label used on the Close button on various Action forms
Action Forms Cancel Button Label
Label used on the Cancel button on various Action forms
Additional Customer Form Items
Use these settings to add custom input fields to the pre-chat questionare presented to the customer at the beginning of the webchat conversation.
Name Field
If Name is enabled, whether to present a single field to collect the full name of the customer, or whether to present individual first and last name fields.
Form Item Name (1 through 5)
The name of the Customer Form item. See the Webchat Developers Reference for more details on this.
Form Item Label (1 through 5)
The visual label used for the Customer Form item.
Form Item Type (1 through 5)
The type of input expected for the Customer Form item.
Form Item Required (1 through 5)
Whether the Customer Form item is mandatory or optional.