Skip to main content
Skip table of contents

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

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

ThemesPrimary ColorSecondary ColorBackground ColorFont Color (Customer)

orange-theme

DEFAULT
orange (#ee7f00)light grey (#efefef)white (#ffffff)    grey (#777777)

green-theme

green (#458c10)light grey (#efefef)white (#ffffff)grey (#777777)

yellow-theme

yellow (#ceb60b)light grey (#efefef)white (#ffffff)grey (#777777)

purple-theme

purple (#800080)light grey (#efefef)white (#ffffff)grey (#777777)

light-blue-theme 

light-blue (#25afcb)light grey (#efefef)white (#ffffff)grey (#777777)

carrot-theme

carrot (#e55c55)light grey (#efefef)white (#ffffff)grey (#777777)
blue-themeblue (#2979ff)light grey (#efefef)white (#ffffff)grey (#777777)
light-purple-theme   light-purple       (#79a3dd)light grey (#efefef)         white (#ffffff) grey (#777777)

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

Variable Name ValueDescription 
THEMEorange-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 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.

Variable Name ValueDescription 
INACTIVITY_TIMEOUT300

The value is in seconds.

The customer is notified once the inactivity time is reached.

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

Variable NameValueDescription
CUSTOMER_RECONNECT_TIME30

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 ValueDescription 

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

Variable Name ValueDescription 
AGENT_AVAILABILITY_TIMEOUT900

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. 

Variable Name ValueDescription 
ENABLE_FILE_SENDINGtrueThis configuration is used to enable or disable the file sending option.
FILE_SERVER_URLhttps://<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 ValueDescription 
CHAT_TRANSCRIPTtrueThis 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.

Add Certificates

Variable Name ValueDescription 

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

Variable Name ValueDescription 
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_TIME30This is the estimated wait time poll interval in seconds.
EWT_MIN_TIME120This 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_TIME600This 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_POSITION10

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

Working hours are defined in Business Calendars.

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.

Variable Name ValueDescription 
WORKING_HOURS_ENABLEDfalse

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_AGENCYexpertflow

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 ValueDescription 
CALLBACK_URLhttps://<fqdn>/ecmThis 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.

Other Configurations  

Variable Name ValueDescription 

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_ENABLEDtrueIf the value is true, the widget shows 3 font size options to choose from. The default value is  true
ENABLE_HYPERLINKSfalse

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.

NHCAP-270


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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.