返回官网

网页客户端 / 在线客服

“助讯通”的网页端接口，专为那些拥有自己线上网站的客户量身打造，旨在提供一个便捷的在线咨询平台。网站访客可直接通过网页界面发送消息、图片或文件等内容，实现与“助讯通”客户端（无论是桌面电脑版本还是移动App）的无缝对话。如下图所示：

网站右下角的在线客服图标

图 1 ：嵌入到网站，只需一行代码，网页上就会显示右下角图标（图标及其位置可定制，见本文后半部分）

点击图标后打开的聊天窗口

图 2 ：点击图标后，会显示一个聊天窗口

聊天窗口里收发表情、动画贴图、图片和文件

图 3 ：聊天窗口中拥有基本的表情、动画贴图、图片、文件 收发功能

聊天窗口右上角的位置大小、主题颜色和磨砂透明设置

图 4 ：聊天窗口右上角，可调整窗口在网页中的三种位置大小，以及主题颜色和背景是否磨沙透明

网页在线客服 部署方法

注：以下设置方法，全面适用于 Windows 和 Linux 类服务器，只要能部署 HelpChat Server 的系统都可以按以下方法部署网页客服。

助讯通 服务端（HelpChat Server）安装好后，请进入到以下目录中，其中的子目录及文件结构如下图所示：

C:\HelpChat Server\public

Linux 类系统部署的话，以上目录是一样的，在服务端根目录下的 public 目录下；下文中将要提到的所有目录或文件，都可以在 Linux 部署安装包中找到对应的层级目录或文件，设置方法与 Windows 完全一样。

服务端 public 目录下的 webclient 目录

注意上图中的两个 .html 文件，接下来会讲到

http://192.168.4.166:6888/
http://192.168.4.166:6888/public/
http://192.168.4.166:6888/public/index.html

访问以上任一地址，即可显示如下图的首页内容（第一个 .html 文件 index.html）（IP地址请换成私有服务器的 IP ）

如果以上页显示不了，请检查并确保服务端是 11.2.1 或以上版本的

网页端首页 index.html

http://192.168.4.166:6888/public/helpchat.html

访问以上地址（第二个 .html 文件 helpchat.html），即可显示网页在线客服的示例文件，如下图：

网页在线客服示例页 helpchat.html

示例页 helpchat.html 中的在线客服

如上图：输入一个消息，并点击发送后，系统会以 黄色 背景框提示：

服务端暂未设置接待客服，请稍候再试。

设置接待客服的方法：

进入桌面或 Web 方式的管理界面，如下图，依次 打开 选项设置->客服设置

管理界面「选项设置 → 客服设置」

将已经分配的帐号 UID 填入此处即可，帐号 UID 查看方法，如下图：双击帐号，打开帐号的资料页面，见下图红框处即是当前帐号 UID

帐号资料页里的帐号 UID

设置好后，接着进入以下目录：

C:\HelpChat Server\public\webclient

打以下图红框中的文件，请用任意文本编辑工具打开：

webclient 目录里的配置文件 helpchat.config.js

将 helpchat.config.js 文件中的 IP 地址换成当前服务器所在电脑的 IP 地址或域名（如果设置了 SSL 证书的话），保存后关闭：

如下图，服务器地址是 192.168.4.166

helpchat.config.js 里的服务器地址 192.168.4.166

设置好以上两项设置后，重启服务器后台三个服务，然后再回到网页客服页面，刷新一下聊天窗口，这时看到的消息提示框背景色不再是黄色了：

设置完成后聊天窗口的提示不再是黄色背景

接着用桌面客户端登录接待客服的帐号后，再次刷新打开网页客服窗口，提示的文字如下图：

接待客服登录后聊天窗口里的提示

最后，网页端的访客就可以和助讯通客服人员之间沟通了：

网页访客一侧的对话

助讯通客服一侧的对话

如下图：当服务器部署在公网，当客服人员收到访客发来的消息时，能同时看到此访客的以下信息：

1.当前访客所在的网站
2.访客的大概地址位置
3.访客所用的带宽服务商
4.访客所用的浏览器及版本号
5.访客的操作系统及版本号
6.以及其它附加信息

客服看到的访客信息：所在网站、大概位置、带宽服务商、浏览器和操作系统

最后一步：将 网页在线客服 部署到任意网站上

请将 C:\HelpChat Server\public 目录下的 webclient 整个目录上传到网站的根目录下，并修改 webclient 目录中配置文件： helpchat.config.js

注意，下图中的首行配置中的路径已经删除了 /webclient/ 前面的 public 字样了

上传到网站后 helpchat.config.js 首行的路径（去掉了 public）

以上绿色箭头所指的地方：如果是网站配置了 SSL 证书，请分别使用 wss 和 https，如果没有，请使用 ws 和 http，将私有服务器的 IP 或 域名 地址替换到以上绿色横条处

注：请保证 助讯通 服务器的 SSL 证书配置同步，详见 SSL 证书配置

最后，请打开本文章开始提到的第二个 .html 文件 helpchat.html ，复制以下行到网站首页的 </body> 之前即可，如以下示例文件所示：

示例文件里放在 body 结束标签之前的那一行代码

<script id="helpchat" src="/webclient/helpchat.js" data-askid="1000" data-cache="xfcxasd2"></script>

注 1：data-askid=“1000” 这个暂不起作用，只是预留的一个参数，可以忽略

注 2：ddata-cache= 后面的值是个随机数或字母即可，长度 16 以内

右下角 在线客服 按钮图片文件所在位置，以及按钮的页面位置定位值，详见以下文件：

自定义界面图标、颜色

\webclient\res\img\helpchat.png
\webclient\res\img\helpchat.svg
按钮的定位
\webclient\res\css\config.css 文件中的 helpchat_button_ex 处

在 config.css 文件中加入以下内容，并修改 background 或 color 后面的颜色值即可，末尾的 !important 不能去掉：

以下 background： 后面的值是渐变色，如果要用纯色请换成 css 的 background-color: 的定义方式

标题栏颜色及按钮的颜色修改

.helpchat_chat_title {
background: linear-gradient(to right, rgb(66, 64, 65), rgb(33, 34, 48)) !important;
}
.helpchat_chat_send_but {
color: #f4c31c !important;
background: linear-gradient(to bottom, #424041, #232431) !important;
}

标题 “助讯通 - HelpChat” 的修改

打开 \webclient\app.js 文件，全文搜索 “助讯通\x20-\x20HelpChat” 替换成想要的字符串即可
（如下图）

app.js 里的标题文字「助讯通 - HelpChat」

如果需要其它个性化功能或界面的定制开发，请 联系我们