WebChat Overview

NXLINK has added a WebChat channel to its existing digital channels, enabling real-time interactions with customers through web browsers. This feature allows businesses to offer more diverse and convenient service entry points, thereby enhancing customer satisfaction and operational efficiency.

Key features of NXLINK WebChat include:

Asynchronous communication: Users can initiate chats with the business via a web browser at any time. The maximum idle duration of a session is currently 24 hours.
Unified agent interface: Agents and supervisors can manage interactions across multiple channels through a single, unified interface, including on the mobile app.
Support for emojis and file attachments: Both emojis and attachments can be sent and received within the WebChat.
Customizable WebChat widget: Users can customize the text and color scheme of the WebChat widget via the management console, or implement advanced customization through frontend JavaScript.
AI-powered virtual agent support: Each WebChat widget can be individually configured to route conversations to either a virtual agent powered by large language models (LLMs) or a designated agent group.

WebChat Widget

NXLINK provides customizable WebChat widgets for enterprise clients. Businesses can configure the WebChat channel through NXLINK’s management interface and deploy it on their official website, allowing users to communicate directly with virtual agents or human agents via chat.

Widget UI:

WebChat Widget Configuration

Go to the NXLINK management menu: Management -> Digital -> Channel Setting, then Select WebChat.

On the WebChat page, you can view a list of existing widgets. You can enable/disable, test, and edit each widget. Widgets can be deleted only when they are in the disabled state.

Add a new Chat Channel(Widget)

You need to configure the following settings:

Configuration Items	Configuration Detail
Configuration Name	Any text used to label the WebChat widget configuration.
Chat Window Name	The title shown on the chat window embedded in your website.
Chat Window Name	The domain name where the chat widget is deployed, such as www.nxai.com or www.nxcloud.com. Wildcards () are supported but only for one subdomain level. For example, .nxcloud.com covers www.nxcloud.com or nxlink.nxcloud.com, but does not support multiple levels like www.nxlink.nxcloud.com.
Select Chat Window Title Color	Background color of the chat widget window’s title bar.
Default Interface Language	The default supported languages for the chat interface currently include Chinese, English, Spanish, and Indonesian. The system automatically adapts based on the customer’s browser language. If the customer’s browser language is not one of these four, the language set here will be displayed by default
Display Agent Name in Chat	If enabled, the chat conversation will automatically use the member name of the digital agent as the agent’s display name in chat conversation.
Generic Agent Name	If not enabled to display the agent name, a generic agent name must be set, which will be shown as the agent’s name in the chat conversation.
Chatbot Name	Chatbot display name setting
Support File Attachments	Enable/disable attachments. The currently supported attachment formats are as follows:："audio/aac" , "audio/mp4", "audio/mpeg", "audio/ogg", "text/plain", "application/pdf", "application/vnd.ms-powerpoint", "application/msword", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "image/jpeg", "image/png", "video/mp4", "video/3gp", "video/3gpp", "image/webp"。
Support Anonymous Customers	If enabled, customers can start chatting directly by clicking the chat icon; if disabled, customers must enter their name and email address before starting the chat.
Directly Transfer to Agent Group	When this option is enabled, customer chat requests will be directly assigned to the configured agent group below. When disabled, customer chat requests will be routed directly to the configured digital virtual agent below.

After completing the configuration, click “Generate Embedded JS Code” to obtain the plugin’s HTML code

After copying the JS code, you can paste it between the <head> and </head> tags of your website.

Chat Widget Advanced Configuration

In addition to configuring the chat widget settings through the NXLINK management interface, you can also customize the widget via frontend JavaScript code. This allows you to adjust the chat icon, position, or user information (such as name and email). However, this configuration requires a frontend developer with web development experience to implement and invoke.

Supported features include:

Setting the chat button icon
Adjusting the chat button size and position
Setting the chat window position
Showing or hiding the chat button
Setting the customer’s identity information (so the user does not need to enter it manually)

Embedded JS Code Example

<script>
  window.NXLiveChatConfig = {
    defaultShowChatBtn: false, // Whether to show the chat button by default
    width: '80px',             // Chat button width
    height: '80px',            // Chat button height
    right: '40px',             // Distance from the right edge of the browser
    bottom: '40px',            // Distance from the bottom edge of the browser
    popupRight: '40px',        // Distance from the right edge for the chat window
    popupBottom: '120px',      // Distance from the bottom edge for the chat window
    backgroundImage: 'https://www.nxcloud.com/img/Chat.b0a30ee8.svg' // Chat button image
  };

  // Dynamically load the chat script with a timestamp to avoid caching
  const script = document.createElement('script');
  script.id = 'live-chat-script';
  script.src = 'https://nxlink.nxcloud.com/chatbot/client/js/live_chat.min.js?jwt=xxxxxxxxxx' + new Date().getTime(); // Replace "xxxxxxxxxx" with the JWT from your channel configuration
  document.head.appendChild(script);
</script>

<script>
  window.onload = function() {
    if (window.NXLiveChat) { // Check if the NXLiveChat object is loaded
      window.NXLiveChat.showChatBtn(); // Show the chat button

      // At least one of email, phone, or customer_id is required; name is mandatory
      window.NXLiveChat.setUserInfo({
        email: '123456@hotmail.com',      // User email (highest priority)
        name: 'Tom Lee',                // User name (required)
        phone: '12345678901',        // User phone (medium priority)
        customer_id: '1111111'       // Unique customer ID on your user DB (lowest priority)
      });

      window.NXLiveChat.hideChatBtn(); // Optionally hide the chat button
    }
  };
</script>

Embedded Code Configuration Guide

Parameter	Type	Description	Default Value
defaultShowChatBtn	Bool	Determines whether the chat button is displayed by default when the page is loaded.	false
width	String	Chat ICON Width	'80px'
height	String	Chat ICON Height	'80px'
right	String	Sets the horizontal position of the chat icon relative to the right edge of the browser	'40px'
bottom	String	Sets the vertical position of the chat icon relative to the bottom edge of the browser window	'40px'
popupRight	String	Sets the horizontal position of the chat window relative to the right edge of the browser window	'40px'
popupBottom	String	Sets the vertical position of the chat window relative to the bottom edge of the browser window	'120px'
backgroundImage	String	URL of Chat ICON	'https://www.nxcloud.com/img/Chat.b0a30ee8.svg'

JS Script Loading Instructions

The code dynamically creates a script tag using document.createElement('script') to load the core JavaScript file of the customer service system.
A timestamp generated by new Date().getTime() is appended to the script URL as a vtime parameter to prevent browser caching and ensure the latest version of the JS file is loaded each time.
Finally, the script tag is appended to the <head> section of the webpage using document.head.appendChild(script), completing the loading process.

Function Control Description

The code is wrapped inside the window.onload event to ensure that operations are executed only after the page has fully loaded, preventing errors caused by undefined objects.

Main Validation

if(window.NXLiveChat): Checks whether the core customer service system object NXLiveChat exists. Subsequent operations are executed only if this object is present.

Core Methods

Show the chat button: window.NXLiveChat.showChatBtn()
Hide the chat button: window.NXLiveChat.hideChatBtn()
Set user information:

This method accepts an object as a parameter. The parameter details are as follows:

Parameter	Type	Description	Sample
email	String	User email (one of email, phone, or user ID is required)）	'123456@qq.com'
name	String	Cutomer Name（required）	' Tom Lee'
phone	String	User phone (one of email, phone, or user ID is required)）	'12345678901'
customer_id	String	User ID (one of email, phone, or user ID is required)）	'1111111'

Note: The system prioritizes using the email address as the customer’s unique identifier, followed by the phone number, and lastly the customer_id(Unique customer ID on your user DB). The customer_id is only used when both email and phone are not provided.

Setup WebChat Channel