(2.0) Web-chat Widget/Web-init

Implement the web-chat widget on your website to allow visitors to initiate a chat or make a callback request.

A pre-chat form allows visitors to check agent availability, and business hours of the call centre before initiating a chat request. This pre-chat form is fully customizable.

You may change the appearance of the form, modify most of the form-data attributes or invoke the request with the click of a button (without any pre-chat form). See the Web-init widget for a reference implementation as to how to embed and customize the widget. Expertflow can also customize the widget for you with additional professional services.

On submission of the pre-chat form, the /wiki/spaces/CHAT/pages/3323717 is invoked which collects the form data attributes and passes them on to Hybrid Chat. When the request is routed to an agent, the agent can see those data attribute as channel-data parameters under the Customer Data pane on the Agent Gadget.

On this page:

Choose Theme

Choose one of the predefined themes to show the Customer Chat widget in this colour scheme. The following themes are available:

Specify a theme value in the Customer Gadget Environment Variables file.

Variable Name

Value

Description

THEME

orange-theme

The default value is orange-theme.

Choose one of the above values.

Themes are predefined and cannot be customized. If any of the above themes do not satisfy your needs, Expertflow can develop custom themes and add them to the Themes library.

Change Title Text

You can change the Title and Subtitle text shown on the Customer Gadget using the lan Page layout guage translation file. See /wiki/spaces/CHAT/pages/3324028 for details.

Set Customer Inactivity Timeout

A chat session will automatically be closed if the INACTIVITY_TIMEOUT duration and the number of retries mentioned in the INACTIVITY_RETRIES are expired.

Every time the inactivity timeout is reached, the customer is notified with a message, such as, "Let us know if you have any queries, otherwise, your session will be closed". As soon as pre-configured INACTIVITY_RETRIES are expired, the session will automatically be closed.

Variable Name

Value

Description

INACTIVITY_TIMEOUT

300

The value is in seconds.

The customer is notified once the inactivity time is reached.

INACTIVITY_RETRIES

3

These are the max retries to check for the customer response. Once the customer is notified of the number of times equal to this number, the chat is automatically closed.

The notification message can also be customized using inactivity Message variable in the Language Translation file. See /wiki/spaces/CHAT/pages/3324028 for details.

Set Customer Reconnect Time

If the customer happens to close the browser, refresh the browser or any internet interruption happens, Customer Reconnect Time allows him to restores the session within the given time. But the conversation will be closed after the default time.

Variable Name

Value

Description

CUSTOMER_RECONNECT_TIME

30

The value is in seconds.

This is the default time, if the customer is able to reconnect to the chat within this time the chat and the history will be restored. The chat automatically ends once the reconnect time is achieved.

Add Language

Define the list of supported languages and choose one as a default language.

Variable Name	Value	Description
LANGUAGES	"`en:English,fr:French,ar:Arabic"`	This is the list of supported languages. Add as many as required with the standard language code as a key (such as `en, de, it`) and the language name as the value (such as `English, German, Italian).`
DEFAULT_LANGUAGE	en	This is the default language to be used when the system is unable to read the browser language. Use the language code as the value of the variable.

To add a new language, see /wiki/spaces/CHAT/pages/3324028.

Set Agent Availability Timeout

If there are no agents available, the customer chat is automatically ended once this timeout expires.

Variable Name

Value

Description

AGENT_AVAILABILITY_TIMEOUT

900

This value is in seconds.

In case of no agent available, the chat is automatically ended once this timeout expires.

This should be less than the INACTIVITY_TIMEOUT value configured above.

The message to be shown in case of agent unavailability can also be customized. See /wiki/spaces/CHAT/pages/3324028.

Upload File Attachments

If enabled, customers can send and receive file attachments during a chat session.

Variable Name	Value	Description
ENABLE_FILE_SENDING	true	This configuration is used to enable or disable the file sending option.
FILE_SERVER_URL	https://<fqdn>/file-engine	This is the File Server URL to send/receive file attachments.

Download Chat Transcript

If set to true, customers can download the full chat transcript at the end of the chat.

Variable Name	Value	Description
CHAT_TRANSCRIPT	true	This configuration is used to enable or disable chat transcript.

You can also change the translation for the Chat Transcript option. See /wiki/spaces/CHAT/pages/3324028 for details.

Add Certificates

Variable Name	Value	Description
CERTIFICATE_PATH	/usr/src/app/https/localhost.cert	Path of certificate for HTTPS.
CERTIFICATE_KEY_PATH	/usr/src/app/https/localhost.key	Path of the certificate key file for HTTPS.

Set Message Character Limit

This is the maximum number of characters to be supported in a customer chat message.

Variable Name	Value	Description
MESSAGE_LIMIT	300	The default limit of the number of characters in a message is 300 and the max limit is 2000.

You can also change the translation of the Message Composer window. See /wiki/spaces/CHAT/pages/3324028 for details.

Configure Estimated Wait Time

As soon as the customer requests for a chat, an estimated wait time is fetched from /wiki/spaces/CHAT/pages/3312778 to be displayed on the chat window.

Variable Name	Value	Description
EWT_URL	https://<fqdn>/mre	Specify the URL of MRE here. It is required to check if there's any available agent in MRE when chat is initiated. MRE then fetches an estimated wait time for the customer chat to be routed to an agent.
EWT_RETRY_TIME	30	This is the estimated wait time poll interval in seconds.
EWT_MIN_TIME	120	This is the lower boundary limit (in seconds) for displaying the minimum EWT time to show to the customer. So if the current EWT is lower than the EWT_MIN, only the value configured in this variable is shown to the customer as EWT.
EWT_MAX_TIME	600	This is the upper boundary limit (in seconds) for displaying the maximum time to show to the customer. So if the current EWT is more than the EWT_MAX, only this value is shown to the customer as EWT.
EWT_MAX_POSITION	10	This is the maximum queue position to show to the customer; so if the actual position is more than this number, the queue position displayed to the customer is the value of this variable. For example, if the actual position of the customer in the queue is 40 but this variable is set to 10, the customer will see his position as #10.

See /wiki/spaces/CHAT/pages/3324028 for customizing EWT and Queue Position messages

Working Hours

Working hours are defined in Business Calendars.

Business calendars allow contact center administrators to define the working hours of the business and the public holidays. Users can create calendars per site and define working shift timings, exceptional openings, and public holidays for each site. When a call comes in, the calendar API checks the calendar events in the following order of precedence:

Exception: Check if there’s any exceptional opening or closing event on the calendar.
Holiday: Checks if there’s a holiday event added to the calendar.
Active Hours: Checks if the contact center is Active

Calendar Shifts Schedule

Each incoming request is treated based on the response returned by the calendar API.

Multiple shift schedules allow businesses to define different shift schedules for instance, for Winters and Summers.

Following are the configurations to enable/disable working hours. If enabled, the Web chat validates working hours before initialising a conversation. If the chat request lands in non-working hours, the Web chat shows a /wiki/spaces/CHAT/pages/3324028.

Variable Name Value Description

WORKING_HOURS_ENABLED

false

The default value is false.

WORKING_HOURS_URL

https://<fqdn>/eabc

This is the fully qualified domain name of the host machine where UMM is deployed. Agent shifts calendar is accessible via UMM.

WORKING_HOURS_AGENCY

expertflow

This is the name of the business calendar agency where agent shift timings are added.

For details on Calendars and Agencies, See Supervisor Tools User Guide.

Configure Callback

The following configurations are required to enable receiving callback requests.

Required Services

This requires ECM service be installed and running.

Variable Name	Value	Description
CALLBACK_URL	https://<fqdn>/ecm	This the URL required to generate a callback.

You can change the translation for the complete Callback section using the language translation file. See /wiki/spaces/CHAT/pages/3324028.

Other Configurations

Variable Name	Value	Description
SERVER_URL	https://<fqdn>/chat	This is the REST server URL of Chat Server.
SOCKET_URL	https://<fqdn>	This is the socket.io URL of Chat Server.
IS_INTEGRATED	false	If "Customer Gadget" is integrated into another site, this value is set to `true`. The value should be set to false, otherwise.
CUSTOMER_GADGET_URL	https://<fqdn>/customer-gadget	This is the URL of the Customer gadget.
FONT_RESIZE_ENABLED	true	If the value is `true,` the widget shows 3 font size options to choose from. The default value is `true`.
ENABLE_HYPERLINKS	false	To automatically convert a string such as `google.com` or `http://google.com` to a hyperlink, set the value to `true`. The default value is `false`.
ENABLE_EMOJI V3.12.2	true	This configuration is used to enable or disable chat emoji. The default value is `true`.
ENABLE_CLOSE_CHAT_NOTIF V3.12.2	true	If set to `true`, customers will first see a confirmation alert when trying to close a chat session. So the chat session will be closed only upon closing the confirmation. The default value is `true`.
ENABLE_NOTIFICATION V3.12.2	true	This enables or disables browser notifications and sound for incoming chat messages.
SHOW_CUSTOMER_AVATAR V3.12.2	true	This enables showing customer avatar. If set to `false`, the customer avatar won't appear. The default value is `true`.

Customer Gadget Message alignment

In customer gadget, the customer message bubbles are right-aligned and bot/agent message bubbles are left-aligned for all languages.

Height of Message Composer

The default height of the message-composer in customer gadget is decreased to one-line of message text. The height of the message composer will increase automatically with more lines of text.

Compatible Browsers

Special Behaviours

"We are Connecting ..." message

This message from translation variable XYZ appears when the customer chat request is queued for a human agent. It remains visible when the chat is in the queue. Once the agent accepts the chat, this message disappears.

If no agent is available i.e. no agent is logged in or the agent is logged in but the state is NOT_READY, this will not appear.

If the agent is logged in but state of the agent is PENDING_NOT_READY this message will appear.