一、新增网页插件
纷享在线客服会在新增网页插件时，自动生成一段代码，企业可将该代码嵌入到自身的网页标签前，即可在网站上开放客户咨询的入口。也同时支持您对网页咨询入口和聊天框进行一些个性化的配置，如工作台的图标、按钮名称、按钮样式和窗口主题色。调整个性化配置信息后，您可在右侧预览窗口实时查看页面效果。
网页渠道关键能力特性如下：
- 自定义插件样式，适应客户网页风格，支持实时预览。
- 自动生成插件代码，复制粘贴即可嵌入指定网页。
- 嵌入网页的客服插件，支持文字、表情、图片、附件等常规功能。
- 每家企业支持同时接入多个网页。
- 客服插件同步兼容web端和移动端。
- 兼容无身份游客和有身份客户两种模式，场景示例：
- 无身份游客：网页访客未登陆状态时，发起在线咨询；如官网；
- 有身份客户：网页访客登陆后，发起在线咨询，且登陆账号与纷享系统做过接口数据映射；如在线商城中，登陆用户对应纷享系统中的客户数据。
网页插件接入效果如下图
网页插件接入效果
二、会话分配规则
在上一步骤中，会话的渠道入口已经配置完成，接下来需要配置会话分配规则，客户会话会按照设定好的分配规则，在客服分组和人员之间进行流转。配置路径为：线上客服->网页接入设置->会话分配规则。会话分配规则的主要设置项如下：
- 自定义设置会话分配规则的名称。
- 存在多个网页接入渠道时，可勾选该规则适用的网页渠道，此规则仅在选中的渠道中生效。
- 自定义设置接入欢迎语，在会话接入时，会主动发送欢迎语给客户。
- 推广语：会话接入后，可自动发送推广语，实现对客户的自动营销。
- 客服处理最大会话数：超过最大会话数后，该渠道的新会话将不会分配给该客服。
- 用户身份识别：开启身份识别后，用户需要验证互联身份后才会接入会话。
会话分配给客服分组的分配规则：有新会话需要分配到分组时，支持“规则分配”和“指定分组”两种会话分配方式
① 规则分配：可配置网页访客会话进入对应客服分组的条件。
- 全部网页访客：全部网页访客会话均可以进入到选择的客服分组。
- 按访客信息筛选：符合筛选的网页访客会话才可以进入到选择的客服分组。
- 按询前表单筛选：符合询前表单信息的的会话可以进入到指定分组。
- 对于未匹配到会话分配规则的会话，系统会自动分配该会话到兜底分组内。
② 指定分组：会话接入前，会推送提示语给用户，让用户选择服务分组，例如售前分组/售后分组。
组内会话分配规则：
- 负载分配，优先分配给实时会话数最少的客服人员；
- 循环分配，在所选客服分组包含的所有客服人员中按照顺序轮流分配；
- 空闲率分配，优先分配给当天接入的会话数最少的客服人员；
- 按客户负责人分配，用户发送的消息，可定向推送给相应客户的负责人；、
- 按联系人负责人分配，用户发送的消息，可定向推送给相应联系人的负责人。
注意：按联系人/客户负责人分配时，需提前将负责人维护在客服分组中；建议按部门添加，系统会根据部门成员变动，自动添加/移除相应人员。
在客服无法实时处理会话时，需要对客户进行提醒和情绪安抚。针对客服全忙、客服均不在线和客服均不在服务时间的情形，企业可自定义设置是否发送提示语，如果发送提示语，可设置提示语的内容。
客服全忙时，可开启留言功能，让用户先行留言，等客服人员空闲时，对留言进行处理。企业可自定义设置留言的模板，收集想要收集的留言信息。
三、用户信息收集
纷享销客线上客服打通与营销通的业务链接，开通了营销通的企业，即可开启用户来源分析功能，让客服人员实时查看用户的来源网站、搜索词等关键信息，辅助提升服务水平。
可通过设置参数对网页插件进行一些设置。
1、通过script标签上链接，示例如下
<script
id="fs-im-script"
type="text/javascript"
src="https://crm.ceshi112.com/open/imchat/static/creat.js?&webImId=2447060116862665016&autoOpen=3000"
></script>window.FSImChatParams = {
webImId: '2447060116862665016',
autoOpen: 3000,
serviceSessionParams: {}
} 3、参数说明：
| 参数名称 | 参数说明 | 示例 |
| autoOpen | 自动打开网页插件对话框事件；大于0的数字，单位为毫秒。 | {autoOpen: 10000} |
| serviceSessionParams | 发送会话消息时，会附带的参数，可用与记录用户来源 | { serviceSessionParams: {search_word: 'xxx', // 搜索词key_word: 'xxx', // 关键词source_website: 'xxx', // 来源网站landing_page: 'xxx', // 落地页consult_page: 'xxx', // 咨询页} } |
4、API方法
| 方法名 | 功能介绍 | 接收参数 | 使用示例 |
| openChatDialog | 打开网页插件对话框 | {} | FSImChat.openChatDialog() |
| updateParams | 更新网页插件初始化参数 | {serviceSessionParams // 消息发送附带参数} | FSImChat.updateParams({ serviceSessionParams: { sessionId: 'XXXX' }}) |
5、事件
- 事件监听
FSImChat.$on(FSImChat.EVENT.RECEIVE_MESSAGE)- 事件中心
| 方法名 | 功能介绍 | 接收参数 | 使用示例 |
| $on | 监听事件 | 参数1：事件名称（详见3.3 可用事件）参数2：事件处理函数 | FSImChat.$on(FSImChat.EVENT.RECEIVE_MESSAGE, (data) => {}) |
| $once | 仅一次监听事件 | 参数1：事件名称（详见3.3 可用事件）参数2：事件处理函数 | 参数2：事件处理函数FSImChat.$once(FSImChat.EVENT.RECEIVE_MESSAGE, (data) => {}) |
| $off | 移除事件监听 | 参数1：事件名称（详见3.3 可用事件）参数2：需要移除事件处理函数（为空移除所有处理函数） | FSImChat.$off(FSImChat.EVENT.RECEIVE_MESSAGE) |
- 可用事件
| 事件名称 | 事件说明 | 参数值 |
| IM_CHAT_READY | 网页插件初始化完毕 | 无 |
| RECEIVE_MESSAGE | 接收到新消息 | { messageCount // 消息数} |
四、第三方身份获取
网页渠道一般情况下都是在官网中使用，如果用户在官网中登录，则官网中会收集到客户的身份信息，如果企业需要在纷享内也准确识别出客户的信息，则可以开启身份检验功能，在客服插件代码中按要求传参，即可打通线上客服与第三方网页中的客户身份信息校验通道。
- 开发接入前配置步骤
1、生成身份校验密钥：点击“生成密钥”，即可生成密钥，页面刷新后，秘钥会掩码显示，可点击查看秘钥按钮重新查看密钥。
2、设置访客身份校验字段： 在纷享销客系统中，全部咨询用户存储在访客对象（对象apiname是“WebImVisitorObj”，为了从自研官网发起咨询的用户可以自动匹配到纷享销客系统中的访客用户，需要配置校验的字段，支持企业自定义身份校验字段，通常情况下，从自研官网将姓名+手机号，就能匹配到唯一的访客用户，如果没有匹配到，会根据传参数新建一条访客用户数据。
3、访客用户关联CRM客户和联系人：一般情况下，从线上客服咨询进入纷享系统的访客用户需要客服人员手动关联到crm客户和联系人，如果企业自研官网需要将发起咨询的用户与crm客户和联系人关联，可以将自研官网系统的用户信息导入到crm客户和联系人中，并启用“自动关联客户和联系人”，设置访客用户自动查询和匹配联系人的字段，根据匹配字段自动查询系统中已有联系人，访客自动关联联系人，请尽量按手机或姓名+手机联合查询即可。
- 身份校验开发接入说明 1、生成访客校验字段json字符串，示例参数如下： {"full_name":"张三","phone":"15912345678"} 2、使用身份校验生成的密钥，对访客校验字段json字符串使用AES算法进行加密，获取加密字符串A 3、将生产的字符串A追加到网页插件customParams参数
加密算法：AES 工作模式：ECB 填充方式：PKCS5Padding
加密示例代码（java）
public static String encrypt(String data, String key) {
try {
// 密钥转换
SecretKey secretKey = toKey(key);
byte[] enCodeFormat = secretKey.getEncoded();
SecretKeySpec k = new SecretKeySpec(enCodeFormat, "AES");
Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5Padding");
cipher.init(Cipher.ENCRYPT_MODE, k);
byte[] dataArray = data.getBytes("utf-8");
byte[] encode = cipher.doFinal(dataArray);
// 密文转换
return bytesToHexString(encode);
} catch (Exception e) {
LOGGER.error("failed to encrypt, data={}, key={}", data, key, e);
return null;
}
}
private static SecretKey toKey(String key) throws Exception {
byte[] data = Base64.decodeBase64(key);
SecretKey secretKey = new SecretKeySpec(data, "AES");
return secretKey;
}
private static final String bytesToHexString(byte[] bArray) {
StringBuffer sb = new StringBuffer(bArray.length);
String sTemp;
for (int i = 0; i < bArray.length; i++) {
sTemp = Integer.toHexString(0xFF & bArray[i]);
if (sTemp.length() < 2)
sb.append(0);
sb.append(sTemp.toUpperCase());
}
return sb.toString();
}五、用户聊天窗口设置
开启后，用户可在聊天窗口通过按钮快速发送商品/订单等系统单据信息给客服人员。
可在用户的聊天窗口添加快捷发送系统内单据的按钮，并以模板消息的形式发送给客服。用户可设置按钮名称、按钮图标、按钮可见角色、数据对象、数据筛选范围、消息发送模板。
注意：目前限制必须有互联角色才可见此按钮，且游客角色不可见。