web端开发需求和视觉样板图(业务方、产品和研发都能看懂)

新手启动教程 2019-09-06  
  • 前言

设计需求的通常思路是按照客服流程和时间顺序来,即:服务入口埋点和布点—访客分流策略(含机器人)—访客端功能和需求—客服工作台功能和需求——数据报表类需求。

以下为常见需求,工作量仅供参考,以实际企业用户业务复杂度、系统复杂度及研发能力为准。如果有其他需求(例如将在线集成到短信/销售推广渠道以及数据接口导出等)不单独在需求清单内罗列,您可在文章末尾处查看和找到。

需求点 web/h5 iframe前端 后端
分流逻辑 3-5人天 / 看分流逻辑复杂程度,很难核算
未读消息提醒
商品卡片消息
轻量CRM对接
用户退出或切换账号
CRM对接 几乎可忽略 / 5人天
在线和呼叫服务记录打通
iframe内嵌页 几乎可忽略 5人天 10-15人天
机器人查订单/办理流程 几乎可忽略 / 10-15人天

 

需求1. 服务入口设计

1.1. 需求注解

结合企业自身客服团队人力是否充足,再根据获客成本和客单价、访客身份信息、访客来访页面,综合考虑在哪些地方做服务入口埋点,入口埋得深或明显,就单个入口来说是否先经过机器人再到人工客服。

 1.2. 需求整理示例表

渠道 页面 是否免登 机器人 客服组
七鱼官网 商品详情页 开启 售前客服
七鱼官网 帮助中心 开启 售后客服
七鱼官网 支付页面 关闭 售前客服
七鱼移动网站 顶部banner 开启 综合客服组

 

 

 

 

 

 1.3. 服务入口样例图

 

需求2. 分流逻辑

 2.1. 需求注解

该需求并非必须,如果企业不做分流,则遵循七鱼后台配置项中默认的分配规则。如企业用户需要干预访客分流,为避免频繁改动前端和发版,建议由中台来实现需求。原理是:中台根据数据(例如前端访客的咨询入口来源、用户会员等级、用户订单状态等信息)自定义分流规则,并将七鱼实现分流所需的robotShuntSwitch(机器人开关),qtype(机器人热门问题),groupid(客服组)三个参数下发给前端,前端再给七鱼。

比如需求:1. 来自商品详情页面,都不过机器人、直接到售前客服组;2. 来自帮助中-物流页面,先过机器人,机器人热门问题模板展示“物流模板”,再到物流客服组;3. 来自帮助中心-发票页面,先过机器人,热门问题模板展示“发票模板”,再到综合客服组;

 2.2. 开发指南

2.3. 重要备注

ysf('open')和ysf('url')区别:

  • 如果用浮层聊天窗口(浮层在七鱼后台配置),那么前端接入时只能使用ysf('open')接口,不支持聊天链接或ysf('url');
  • 如果ios设备上无法用ysf('open')方式唤起聊天窗,可以改用ysf('url')方式;

 

需求3. 未读消息提醒

3.1. 需求注解

当访客停留在浏览器内但又不在会话窗时,需要在消息中心或通知中心等未知给到访客未读消息提醒,以下为样例图(红色角标数字)。另外,请注意web/h5的消息提醒功能受限于浏览器。

 

3.2. 开发指南

Web/h5搜索关键词“未读消息”        https://qiyukf.com/docs/guide/web/5-%E4%BC%9A%E8%AF%9D%E6%B6%88%E6%81%AF.html#%E6%9C%AA%E8%AF%BB%E6%B6%88%E6%81%AF

 

需求4. 商品卡片消息

4.1. 需求注解

人工客服阶段的需求,机器人阶段无。当服务请求来自于商品详情页面时,有商品卡片功能,将访客正在浏览的商品信息以卡片消息形式发出,其他咨询来源(例如帮助中心页等)入口无该需求。根据实战经验中,通常推荐2个配置项:卡片对访客可见(show=1),系统自动发送卡片和每次更换商品页都发送(sendByUser=0)

4.2. 开发指南

web/h5搜索关键词“商品卡片”         https://qiyukf.com/docs/guide/web/5-%E4%BC%9A%E8%AF%9D%E6%B6%88%E6%81%AF.html#%E5%8D%A1%E7%89%87%E6%B6%88%E6%81%AF

 

需求5. 机器人查订单/办理流程

5.1. 需求注解

该需求重后端、轻前端。在机器人阶段,实现访客自助化查订单和查物流等需求,前端需要上报用户信息给七鱼,后端要开发好接口供七鱼调用,接口通常通常选取近2-3个月内订单,接口性能要求在900ms内响应(访客端demo地址:这里

5.2. 开发任务拆解

前端上报用户信息给七鱼——七鱼调用企业后端开发好的接口——企业后端接口返回参数给七鱼——在七鱼系统内完成配置(含导航条上方按钮),一个流程的后端工作量预计在15人天左右,前端工作量较轻。

5.2. 开发指南

搜索关键词“一触即达对接”         https://qiyukf.com/docs/guide/server/8-%E6%9C%BA%E5%99%A8%E4%BA%BA.html#%E4%B8%80%E8%A7%A6%E5%8D%B3%E8%BE%BE

 

需求6. 用户信息整合

6.1. 综述和注意事项

目前支持轻量CRM对接,API CRM对接和iframe三种形式。三者可以同时并存,也可以选取使用,以下为详细对比。

6.2. 轻量CRM对接

  • 6.2.1. 需求注解

前端将包含用户信息的 JSON 传递给网易七鱼系统,放在坐席工作台右侧的用户信息TAB下面,优点是工作量在前端而且较轻。缺点是客服工作台空间有限,扩展性较弱。

  • 6.2.2. 开发指南

轻量CRM对接搜索关键词“Web SDK 调用”         https://qiyukf.com/docs/guide/server/3-CRM%E5%AF%B9%E6%8E%A5.html#web-sdk-%E8%B0%83%E7%94%A8

 

6.3. API CRM对接

  • 6.3.1. 需求注解

前端上报参数——七鱼调用接口——后端返回信息展示到客服工作台右侧“更多信息”。样式不多,不支持图片等样式,但空间扩展性较轻量crm方式更大。

  • 6.3.2. 任务拆解

前端:调用ysf('config')接口上报uid和昵称,uid是用户唯一且固定身份标识、用于整合该用户所有聊记录,昵称需要展示到坐席工作台上面,否则整个会话记录和报表里面会显示匿名客户guestxxx,客服交互和检索不方便。

后端:接口根据uid返回相应用户和订单信息到客服工作台右侧“更多信息”。

  • 6.3.3. 开发指南

Web/h5搜索关键词“上报用户信息”         https://qiyukf.com/docs/guide/web/3-CRM%E5%AF%B9%E6%8E%A5.html#%E4%B8%8A%E6%8A%A5%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF

后端搜索关键词“企业 CRM 接口对接”         https://qiyukf.com/docs/guide/server/3-CRM%E5%AF%B9%E6%8E%A5.html#crm%E6%8E%A5%E5%8F%A3%E5%AF%B9%E6%8E%A5

  • 6.3.4. 在线和电话服务记录打通

API CRM需求的补充,轻量和iframe方式不支持。用户有可能既到在线又到电话中心咨询,客服需要同时看到服务记录。呼叫中心调用get_call_user_info接口。呼叫中心,七鱼只能拿到电话号码(也就是身份标识),企业需要返回该手机号码对应的uid, 搜索关键词“呼叫中心获取电话用户信息”,开发指南通上述API CRM对接。

 

6.4. Iframe内嵌页方式

  • 6.4.1. 需求注解

本质上是将一个自适应的H5页面嵌入到七鱼客服工作台内,企业用户提供h5链接和映射参数,七鱼完成配置类工作。

  • 6.4.2. 任务拆解

任务拆解:前端上报参数——七鱼请求iframe——后端打开iframe

前端:上报uid和昵称,uid是用户唯一且固定身份标识、用于整合该用户所有聊记录,昵称需要展示到坐席工作台上面,否则整个会话记录和报表里面会显示匿名客户guestxxx,客服交互和检索不方便

后端:拿到参数以后,打开iframe内嵌页面

  • 6.4.3. 开发指南

Web端上报用户昵称和uid:搜索关键词“上报用户信息”            https://qiyukf.com/docs/guide/web/3-CRM%E5%AF%B9%E6%8E%A5.html#%E4%B8%8A%E6%8A%A5%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF

后端:https://qiyukf.com/docs/guide/server/iframe%E5%AF%B9%E6%8E%A5.html

 

6.5. 用户退出或切换账号

  • 6.5.1. 需求注解

就好像在同一只手机上面,登录微信账号A,再退出; 或者先登录A再退出切换到B账号。同理,需要调用接口通知七鱼账号退出。

  • 6.5.2. 开发指南

搜索关键词“注销用户”或“logoff”          https://qiyukf.com/docs/guide/web/3-CRM%E5%AF%B9%E6%8E%A5.html#%E6%B3%A8%E9%94%80%E7%94%A8%E6%88%B7

 

需求7. 售前或推广落地页需求

7.1. 访问统计

  • 7.1.1.需求注解

旗舰版本能力。收集访客的访问信息,例如着陆页、搜索来源、搜索关键词等展现在客服会话框右侧的用户“访问信息”内,并汇总成数据报表。

  • 7.1.2. 开发指南

搜索关键词“网站访问统计”          https://qiyukf.com/docs/guide/web/6-%E8%A1%8C%E4%B8%BA%E8%BD%A8%E8%BF%B9.html#%E7%BD%91%E7%AB%99%E8%AE%BF%E9%97%AE%E7%BB%9F%E8%AE%A1

 

7.2. 行为轨迹

  • 7.2.1. 需求注解

旗舰版本能力。获取每个用户进入页面的时间,停留时长,页面名称,页面路径等信息,甚至能获取某些关键事件节点(例如,加购物车)以帮助客服代表更好地了解客户。

  • 7.2.2.开发指南

搜索关键词 “自定义行为轨迹”:https://qiyukf.com/docs/guide/web/6-%E8%A1%8C%E4%B8%BA%E8%BD%A8%E8%BF%B9.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%8C%E4%B8%BA%E8%BD%A8%E8%BF%B9

 

7.3. 推广渠道集成

  • 7.3.1. 需求注解

比如在百度\头条\知乎\广点通等渠道的推广落地页面上集成。我们优先推荐引用js方式来实现集成,见上文档;如果无法引用js,则推荐链接拼接方式来实现,企业自己捕获客服请求事件以后再打开七鱼聊天链接,可在聊天链接后面拼接t参数,以此来上传部分访问数据

  • 7.3.2. 开发指南

搜索关键词“咨询链接”:      http://help.qiyukf.com/archives/1887

  • 7.3.3. 咨询链接

补充“咨询链接”的应用场景。主要是为了解决某些场景无法引入js的问题,比如可以嵌入到短信内,嵌入到微信菜单栏等。

 

需求8. 接口导出数据(纯后端需求)

8.1. 需求注解

其实跟web前端无关,纯后端需求。用接口获取数据,包括聊天内容、用户信息、咨询访问信息、咨询服务记录。但不包括:该访客的邮箱、身份标签、本次访问的着陆页、访问轨迹和行为轨迹、用户相关关联工单(这几项不支持导出,见图内备注)。

8.2. 两种实现方式

  • 8.2.1. 实现方式1

第一步,先批量下载聊天内容、访问信息和服务小记,缺点是访问时间限制在凌晨2-6点且不支持并发任务,优点是成功率高,开发指南搜索关键词“获取会话记录”:https://qiyukf.com/docs/guide/server/6-%E5%9C%A8%E7%BA%BF%E7%B3%BB%E7%BB%9F.html#%E8%8E%B7%E5%8F%96%E4%BC%9A%E8%AF%9D%E8%AE%B0%E5%BD%95

搜索关键词“接口访问步骤”,入参是时间范围:https://qiyukf.com/docs/guide/server/6-%E5%9C%A8%E7%BA%BF%E7%B3%BB%E7%BB%9F.html#%E6%8E%A5%E5%8F%A3%E8%AE%BF%E9%97%AE%E6%AD%A5%E9%AA%A4

第二步,从上述接口中拿到会话id(以上接口中称id)后再调用“获取会话关联的用户信息”接口,即可拿到会话对应的用户信息,入参为sessionid。即,“获取会话记录”接口中的id等于“获取会话关联的用户信息”接口中的sessionid,开发指南:https://qiyukf.com/docs/guide/server/6-%E5%9C%A8%E7%BA%BF%E7%B3%BB%E7%BB%9F.html#%E4%BC%9A%E8%AF%9D%E7%BB%93%E6%9D%9F%E6%8E%A8%E9%80%81%E4%BC%9A%E8%AF%9D%E6%95%B0%E6%8D%AE

  • 8.2.2. 实现方式2

用sessionid单条获取聊天内容、访问信息和服务小记第一步是先通过“接收会话结束通知”获取sessionid:https://qiyukf.com/docs/guide/server/6-%E5%9C%A8%E7%BA%BF%E7%B3%BB%E7%BB%9F.html#%E6%8E%A5%E6%94%B6%E4%BC%9A%E8%AF%9D%E7%BB%93%E6%9D%9F%E9%80%9A%E7%9F%A5

第二步,拿着以上获得的sessionid入参,获取服务小记(根据会话ID获取会话字段接口)、聊天记录(根据会话ID获取会话消息接口)、用户信息(获取会话关联的用户信息接口)https://qiyukf.com/docs/guide/server/6-%E5%9C%A8%E7%BA%BF%E7%B3%BB%E7%BB%9F.html#%E6%8E%A5%E5%8F%A3%E5%9C%B0%E5%9D%80

发表


表情