集成效果

把客服系统集成到您的网站中是指，在您网站的页面上显示一个引导访客与客服交流的浮动图标和直接在页面与客服聊天的动态聊天窗口。

同时，后台客服可以实时监控网站上正在浏览的访客，可以主动开始聊天发起营销活动。

左下角的浮动图标可以自定义，更换成符合您网站风格的其它图片。
右下角的聊天窗口，在未进行会话时，处于折叠状态，不影响网站浏览。

对于 PC 端网站，点击浮动图标后，将打开新的独立的浏览器窗口来承载聊天画面。

无论打开多少个聊天窗口，包括网站页面右下角的小聊天窗口，聊天内容都是实时同步的，访客可以在切换浏览的网站页面后在任意页面继续与客服的交流。

意味着访客可以一边浏览网站的不同页面，一边与客服交流，页面跳转不会中断聊天，获得一边浏览网站一边与客服交流的沉浸式体验。

如果集成的网站是手机端网站，右角色的小聊天窗口将不再显示，点击浮动图标后，以浮动窗口的形式显示聊天画面。

访客可以在收发消息之后，隐藏聊天画面继续浏览网站，客服的新消息到达时，聊天画面将自动再次显示。

后台客服

将客服系统集成到您的网站之后，客服人员就可以通过客服程序，实时监控网站上的访客，实时获知他们的浏览情况，主动会话，开展营销活动。

在上图所示的客服端程序中，左侧按访客的不同状态分别显示。
选中正在访客网站的访客，在右侧显示是他正在浏览和浏览过的页面。此时可以选中他，主动开始会话，开展营销活动。
主动开始会话不需要经过访客同意，会话开始后聊天窗口将自动在网站上弹出。
访客也可以通过浮动图标，或聊天窗口主动寻求与客服交流，这时访客将显示在客服程序的“等待应答”列表中。

集成方法

对于在线使用版本，登录 Web 后台，在站点列表中点击站点名称，画面显示“集成方法”，请按提示完成站点的集成。

https://kf-m.shengxunwei.com/

对于私有化部署版本，参考以下流程，注意引用的相关域名替换成你自己的。

直接打开聊天窗口，不跟踪识别访问中的访客

如果您希望通过自己的链接，直接打开聊天窗口，无需识别访问中的访客，可以直接打开以下聊天页面网址：

PC：

https://kf-resource.shengxunwei.com/WebChat/WebChat.html?siteCode=站点代码

手机（支持嵌入微信、QQ等公众号平台内打开）：

https://kf-resource.shengxunwei.com/WebChat/MobileWebChat.html?siteCode=站点代码

聊天窗口页面可以根据设备自动切换 PC 或移动页面，如果你自行识别后直接打开对应的页面可以避免一次跳转。

集成到网站上跟踪识别访客

如果需要识别正在访问网站的访客，并在页面使用浮动图标和嵌入式小聊天窗口，则需要在您的网站中，嵌入以下代码：

<script src="https://kf-resource.shengxunwei.com/ua-parser.min.js"></script>
<script src="https://kf-resource.shengxunwei.com/embedded.js?siteCode=站点代码"></script>

站点代码是您选择的站点的代码，在 Web 后台给出的提示中，会自动显示正确的站点代码。如果修改了站点代码，必须修改您网站中引用的 js 文件后携带的站点代码。

私有化部署免费版的站点代码是 freesite。

注意：

• 必须嵌在 body 标签之内，在其结束之前的任意位置。
• 只有引用了代码的页面，才能使用客服系统，可以把代码添加在全局的模板页面中。
• 如果您的网站已经引用过了 ua-parser，则无需重复引用。

只需添加以上 2 行 js 文件引用，即完成了基本的网站集成。

在嵌入 embedded.js 的同时自主打开聊天窗口

对于嵌入了 embedded.js 的页面，访客可以点击浮动图标打开聊天窗口，或者在嵌入的小聊天窗口中放大到独立窗口。

浮动图标是可以在客服端软件的站点设置中设置为不显示的，你可以设计一个与网站风格高度统一的，更友好的方式来打开聊天窗口。或者保留浮动图标的同时使用一个自己设计的链接。

请注意：如果你希望在使用 embedded.js 跟踪访客的同时，能通过自己设计的链接打开聊天窗口，则必须通过 kf_getWebChatUrl() 方法来获取目标链接地址：

<a href="javascript:void(0)" onclick="openChatWindow()" >打开聊天窗口</a>

function openChatWindow()
{
    var targetUrl = kf_getWebChatUrl();
    window.open(targetUrl);
}

kf_getWebChatUrl() 方法能够返回一个有效的 URL 地址，这个地址带有 embedded.js 已经生成的相关信息。必须携带这些信息才能保持对访客身份的持续识别。

此外，该函数能够

• 通过当前终端设备的类型，判断返回 PC 端页面还是 手机端页面。
• 根据是否有客服人员在线或自动回复机器人，判断返回聊天窗口还是留言窗口。

传递访客数据

您可以传递访客的唯一标识和个人信息到客服系统，实现访客身份的绑定和信息识别。
传递参数的方法请见：深度集成：传递您的访客数据到客服系统

至此即完成了客服系统在网站中的集成，下一步请下载安装客服系统客服端程序，开始使用。