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, business hours of the call center 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 on 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 JS API 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 one of the predefined themes to show the Customer Chat widget in this colour scheme. Following themes are available:
Specify a theme value in the
Customer Gadget Environment
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 language translation file. See Customer Gadget Translation -> Customize Title Texts 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.
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 inactivityMessage variable in the Language Translation file. See Customer Gadget Translation -> Inactivity Timeout Message 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.
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.
Define the list of supported languages and choose one as a default language.
This is the list of supported languages. Add as many as required with the standard language code as a key (such as
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 Customer Gadget Translation -> Add Language.
Set Agent Availability Timeout
If there are no agents available, the customer chat is automatically ended once this timeout expires.
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 Customer Gadget Translation-> Agent Unavailability Message.
Upload File Attachments
If enabled, customers can send and receive file attachments during a chat session.
|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.
|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 Customer Gadget Translation -> Chat Transcript for details.
Path of certificate for HTTPS.
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.
|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 Customer Gadget Translation -> Message Composer for details.
Configure Estimated Wait Time
As soon as the customer requests for a chat, an estimated wait time is fetched from MRE to be displayed on the chat window.
|EWT_URL||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.|
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 Customer Gadget Translation for customizing EWT and Queue Position messages
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 predefined Non-working hours message.
The default value is
This is the fully qualified domain name of the host machine where UMM is deployed. Agent shifts calendar is accessible via UMM.
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.
The following configurations are required to enable receiving callback requests.
This requires ECM service be installed and running.
|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 Customer Gadget Translation -> Callback.
This is the REST server URL of Chat Server.
This is the socket.io URL of Chat Server.
If "Customer Gadget" is integrated into another site, this value is set to
The value should be set to false, otherwise.
|CUSTOMER_GADGET_URL||This is the URL of the Customer gadget.|
|FONT_RESIZE_ENABLED||true||If the value is |
To automatically convert a string such as
The default value is
This configuration is used to enable or disable chat emoji. The default value is
If set to
The default value is
This enables or disables browser notifications and sound for incoming chat messages.
This enables showing customer avatar. If set to
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.
"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.