Overview: Web Chat (Console)
This article provides an overview of the ability to create embeddable web chats in Console.
In this article
Overview
In Console, the Web Chat workspace is where you can create embeddable web chats that you can place on your website(s). Web chats give your customers a direct and convenient way to ask questions and get information without having to leave your website.
Continue reading this article to learn more about the workspaces of Console where you can create, modify, and review previously built web chats, as well as how to get the embeddable code for a specific web chat to place it on your website.
Example of an embeddable web chat.
Web Chat workspace
The Web Chat workspace is where you can view a list of all the web chats created on your organization’s account. You can select any record in the list to view or edit a specific web chat.
In Console, navigate to CX > Web Chat.
The Web Chat workspace includes the following sortable columns of data:
ID: Contains the unique identifier of the web chat.
Name: Contains the human-readable name of the web chat.
Route To: Contains the type of destination information inputted into the web chat routes to. A web chat can either route to a workflow or directly to a queue.
Route Data: Contains the specific destination defined in the 'Route To' field.
Web Chat editor workspace
The Web Chat editor workspace is where you can create a brand new web chat. You can access the Web Chat setup workspace by clicking the New Web Chat button in the top-right corner of the screen.
Once you click the New Web Chat button, a popup modal appears requesting that you name the web chat. Input a name and click the Submit button in the bottom-right corner of the modal.
The system automatically routes you to the editor page for the web chat.
The subsections below go through each of the containers on this page and provide descriptions of the settings you can edit.
Web Chat container
The Web Chat container (in the top-left corner of the screen) in the Web Chat setup workspace is where you can configure the basic settings of your web chat, including its:
Name
Route To (a queue or a workflow)
Route Data (the specific queue or workflow it routes to)
Routing a web chat to a queue with the Route To and Route Data fields
There are also three read-only fields:
Auth User (used internally for communications between the web chat container and the Avaya.cx system)
Auth Key (used internally for communications between the web chat container and the Avaya.cx system)
Demo link: Any changes you make to the web chat are automatically reflected in the demo link. The demo link shows the web chat on a mock website, so you can use it to test the web chat and make sure it’s working per your requirements.
Transcript container
The Transcript container is where you can configure settings related to the web chat transcript.
The Download toggle controls whether the customer is able to download or print a transcript of the chat after the conclusion of the web chat.
The Email toggle lets you toggle where the customer can email a record of the chat transcript. This must be accompanied by a workflow designed to send the chat transcript in an email.
Queue availability container
When a queue is selected in the Queue availability container, the system checks to make sure that there are queue users who are logged into that queue (logged into CX and ready to handle interactions).
If there aren’t any queue users available, then the web chat doesn’t display on the website.
If this value isn’t set, then customers will be able to see and interact with the web chat regardless of whether any queue users are available. This means that interactions will be created in the queue, and the interaction will only be handled once a queue user becomes available to manage it.
Until then, the interaction waits in the queue until someone becomes available or it proceeds down a waiting experience if it’s set for the queue, like sending the interaction to another queue, alerting a manager that an interaction is waiting, or any other experience you might create for the queue.
Actions container
The Actions container is where you can customize the behavior of the web chat based on the domain hosting it.
The Actions container contains at least one sub-container. Each sub-container corresponds with a URL that you want to have custom chat functionality for. You can add as many sub-containers as you want to a web chat configuration.
There are five menu options for each sub-container in the Action container:
URL: Specifies the URL to create custom web chat functionality for. The custom action applies to the “parent” page (the value in the URL field) as well as any “child” pages. For example, in the screenshot above a URL is set to “https://edify.cx/products”. This custom chat action would work on that URL as well as any child URL to it.
Time: For time messages, this specifies an amount of time to wait before sending the message. This should be used in conjunction with the Unit dropdown field. The time countdown begins when the user loads the page.
Unit: For time messages, specifies the specific type of time to wait before sending the message. You can choose seconds or minutes (e.g. wait 5 seconds to send a message or 1 minute to send a message).
Time Message: The Time Message field specifies the message that the web chat sends once the time specified in the Time and Unit fields is reached and the customer hasn’t already sent a message in the chat.
On Open Message: The On Open Message field defines a message that is sent to the user as soon as the web chat is opened.
Message sent on opening a web chat
Message sent ten seconds after opening a web chat
Message sent on open followed by a time message sent after a minute
Code snippet and customization container
The code snippet and customization container is located on the right side of the web chat configuration page.
The web chat code snippet is the JavaScript code that you can copy and paste onto your website. Once embedded on your website, the code automatically displays the web chat as it’s configured in Console.
Note: We recommend that a web developer be responsible for implementing the code snippet on your website.
The code snippet contains a token field. This is used for authentications with Avaya. You can also add a variables object to the code snippet, which can be used by a workflow the web chat routes to. See the sample below to see how to embed variables into the code snippet.
Example of a web chat code snippet with variables
The web chat theme is where you can customize the visual appearance of the web chat, including:
The name of the bot (which defaults to “Hammond”)
The theme
The various colors of the web chat
You can access any of these settings by clicking the pencil icon in the top-right corner of the container.
Click the pencil icon in the top-right corner of the container to edit the web chat theme
You can use hex codes or the color picker to customize the colors of your web chat.