在线聊天总览
NXLINK 在原有数字渠道基础上新增了在线聊天通道,支持通过网页与客户实时互动。企业可借助该功能,为客户提供更加多样化、便捷化的服务接入方式,进一步提升客户满意度与服务效率。
NXLINK在线聊天功能如下:
-
异步交互,用户可以随时通过浏览器和企业进行聊天,目前会话空闲最大时长是24小时。
-
统一坐席界面,坐席和管理人员用统一的界面(包括手机APP)管理不同渠道的接入。
-
支持表情,支持附件的发送和接收
-
支持在线聊天插件的自定义,用户可以通过管理界面自行定义插件的文字和颜色组合,也可以通过前端的Javascript实现代码级别的自定义。
-
支持基于大模型的数字虚拟机器人,每个插件可以自行配置虚拟机器人或者坐席组的路由。
在线聊天插件
NXLINK 提供可自定义的插件给企业客户使用,企业可以通过NXLINK 管理功能配置在线渠道并部署在企业官网里让用户可以通过聊天的方式和企业的机器人或者坐席直接沟通。
插件UI:
配置在线聊天插件
-
进入NXLINK管理菜单,管理->数字渠道->通道设置, 选择WebChat
在WebChat的页面下,可以看见已经建立的插件的列表,可以进行启用/停用,测试和编辑,在停用的状态下可以进行删除。
2.新增聊天渠道的插件
您需要配置以下内容:
配置内容 |
填写内容 |
配置名称 |
任意文字, 标识聊天插件配置 |
聊天窗口名称 |
客户网站上聊天插件显示的窗口名字 |
客户网站域名 |
聊天插件所部署的网站域名,比如www.nxai.com或者www.nxcloud.com, 支持*通配符(但是只有一层),比如*.nxcloud.com支持www.nxcloud.com或者nxlink.nxcloud.com, 但是不支持www.nxlink.nxcloud.com多层。 |
选择聊天窗口标题的颜色 |
聊天插件窗口上标题的背景颜色 |
显示界面缺省支持语言 |
聊天界面的缺省支持语言,目前支持中文/英文/西班牙文/印尼文,根据客户浏览器自动适配,如果客户浏览器非这四种语言则显示这里设置的语言 |
是否在聊天里显示座席的名称 |
如果启用,聊天对话自动使用数字坐席的成员姓名作为坐席的名字 |
通用坐席名称 |
如果不启用显示坐席的全称,则需要设置通用坐席的名字,会显示在聊天对话里显示坐席的名字 |
聊天机器人的名字 |
设置聊天对话显示的机器人的名字 |
是否支持附件 |
启用/停用附件,目前支持的附件格式如下:"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"。 |
是否支持匿名客户 |
启用的话,则客户可以直接通过点击聊天图标进行聊天; 停用的话,则需要客户输入姓名和邮件地址才可以进行聊天 |
是否直接转接接座席组 |
启用这个参数,客户聊天请求则直接分配给下面配置的坐席组。 停用这个参数,客户聊天请求则直接分配给下面配置的数字虚拟机器人。 |
配置完成后,点击“生成嵌入式JS代码”, 可得到插件的HTML代码:
在复制了JS代码后就就可以将相应的代码复制到您的网站的<head> </head>之间。
聊天插件前端配置(高级设置)
除了在NXLINK 管理界面可以配置聊天插件的设置,还可以通过前端的JS代码来配置聊天插件的图标,位置或者用户的信息(如姓名和Email)等,但是这个配置必须要需要有网页开发经验的前端工程师进行配置和调用,支持如下功能:
-
设置聊天按钮的图标
-
设置聊天按钮的大小和位置
-
设置聊天窗口的位置
-
隐藏和显示聊天按钮
-
设置聊天客户的身份信息(不需要客户手动输入)
嵌入代码示例
<script>
window.NXLiveChatConfig = {
defaultShowChatBtn: false, //默认状态是否显示聊天按钮
width: '80px', //聊天按钮宽度
height: '80px', //聊天按钮高度
right: '40px', //聊天按钮距离浏览器右边的距离
bottom: '40px', //聊天按钮距离浏览器底边的距离
popupRight: '40px', //聊天窗口距离浏览器右边的距离
popupBottom: '120px', //聊天窗口距离浏览器底边的距离
backgroundImage: 'https://www.nxcloud.com/img/Chat.b0a30ee8.svg' //聊天按钮图片
}
// 动态添加时间戳以避免缓存
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();//jwt来自配置渠道自动生成
document.head.appendChild(script);
</script>
<script>
window.onload = function() {
if(window.NXLiveChat) {//判断NXLiveChat对象是否存在
window.NXLiveChat.showChatBtn(); //显示聊天按钮
//邮箱,手机或者用户id 三个必填一个, 姓名必填
window.NXLiveChat.setUserInfo({ //设置用户信息
email: '123456@qq.com', //用户邮箱,优先级最高
name: '张三', //姓名
phone: '12345678901', //用户手机,优先级次之
customer_id: '1111111' //用户ID,可以是用户在客户网站的唯一ID,优先级最低
});
window.NXLiveChat.hideChatBtn(); //隐藏聊天按钮
}
}
</script>
嵌入代码配置说明
参数 |
类型 |
说明 |
示例值 |
defaultShowChatBtn |
布尔值 |
默认状态是否显示聊天按钮 |
false |
width |
字符串 |
聊天按钮宽度 |
'80px' |
height |
字符串 |
聊天按钮高度 |
'80px' |
right |
字符串 |
聊天按钮距离浏览器右边的距离 |
'40px' |
bottom |
字符串 |
聊天按钮距离浏览器底边的距离 |
'40px' |
popupRight |
字符串 |
聊天窗口距离浏览器右边的距离 |
'40px' |
popupBottom |
字符串 |
聊天窗口距离浏览器底边的距离 |
'120px' |
backgroundImage |
字符串 |
聊天按钮图片的 URL |
脚本加载说明
-
代码通过
document.createElement('script')
动态创建脚本标签,用于加载客服系统核心 JS 文件。 -
脚本地址中添加
new Date().getTime()
作为vtime
参数,目的是动态添加时间戳以避免浏览器缓存,确保每次加载最新版本的 JS 文件。 -
最后通过
document.head.appendChild(script)
将脚本添加到页面头部完成加载。
功能控制说明
代码包裹在window.onload
事件中,确保页面加载完成后再执行操作,避免因对象未定义导致错误。
核心判断
if(window.NXLiveChat)
:判断客服系统核心对象NXLiveChat
是否存在,仅当对象存在时执行后续操作
核心方法
-
显示聊天按钮:
window.NXLiveChat.showChatBtn()
-
隐藏聊天按钮:
window.NXLiveChat.hideChatBtn()
-
设置用户信息:
该方法接收一个对象作为参数,参数说明如下:
参数 |
类型 |
说明 |
示例值 |
|
字符串 |
用户邮箱(邮箱、手机、用户 id 三选一必填) |
'123456@qq.com' |
name |
字符串 |
用户姓名(必填项) |
' 张三' |
phone |
字符串 |
用户手机(邮箱、手机、用户 id 三选一必填) |
'12345678901' |
customer_id |
字符串 |
用户 id(邮箱、手机、用户 id 三选一必填) |
'1111111' |
说明:系统优先使用Email地址作为客户唯一标识,其次是手机号码,最次是customer_id,只有当email和phone没有输入的情况下才会使用customer_id。