差别
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
cs:300visitoraccess:web-widget [2020/03/03 10:14] candywang [信息栏设置] |
cs:300visitoraccess:web-widget [2024/04/25 14:35] (当前版本) 丁艺杰 [功能设置] |
||
---|---|---|---|
行 59: | 行 59: | ||
- 进入“Admin mode > Channels > web”页面,拷贝网页插件的代码,并插入您的网站的HTML源码的</body>标签之前。 | - 进入“Admin mode > Channels > web”页面,拷贝网页插件的代码,并插入您的网站的HTML源码的</body>标签之前。 | ||
- | 代码示例: | + | 在您的网站上插入代码示例(请将configId换成您自己租户上的h5渠道对应的configId值): |
- | <code html><script src='//kefu.easemob.com/webim/easemob.js?configId=982d8f2d-06db-49ab-9e14-673c151172b6'></script></code> | + | <code html> |
+ | <script src='//kefu.easemob.com/webim/easemob.js?configId=c612d953-f3a9-4aaa-aab7-c027cbebc1b2'></script> | ||
+ | </code> | ||
+ | |||
+ | 最简集成完成Demo样例如下: | ||
+ | 配置示例: | ||
+ | |||
+ | <code html> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
+ | <title>环信客服云-h5渠道最简接入Demo</title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <!-- 此处展示您的网站内容 --> | ||
+ | </body> | ||
+ | <!-- 注:请将下面这行的configId值换成您自己租户里的h5对应渠道的configId值 --> | ||
+ | <script src='//kefu.easemob.com/webim/easemob.js?configId=c612d953-f3a9-4aaa-aab7-c027cbebc1b2'></script> | ||
+ | </html> | ||
+ | </code> | ||
=== 集成网页链接 === | === 集成网页链接 === | ||
- | 使用网页链接将客服聊天页面集成到您到网站,即可完成客服云的快速接入。 | + | 您可以直接将h5网页的链接挂载在您现有的网站上,可通过a链接或者按钮等绑定,当访客点击按钮或链接时,即可打开我们的网页访客端,通过这种网页链接的方式将客服聊天页面快速便捷地集成到您到网站。 |
网页链接示例: | 网页链接示例: | ||
- | <code http>https://kefu.easemob.com/webim/im.html?configId=982d8f2d-06db-49ab-9e14-673c151172b6</code> | + | <code html> |
+ | https://kefu.easemob.com/webim/im.html?configId=c612d953-f3a9-4aaa-aab7-c027cbebc1b2 | ||
+ | </code> | ||
+ | |||
+ | 最简集成完成Demo样例如下: | ||
+ | 配置示例: | ||
+ | |||
+ | <code html> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
+ | <title>环信客服云-h5渠道最简接入Demo</title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <a href="https://kefu.easemob.com/webim/im.html?configId=c612d953-f3a9-4aaa-aab7-c027cbebc1b2" target="_blank" title="联系客服">联系客服</a> | ||
+ | </body> | ||
+ | </html> | ||
+ | </code> | ||
注意:en-US区分大小写。 | 注意:en-US区分大小写。 | ||
行 197: | 行 236: | ||
若指定关联,该网页插件由该关联接入客服云。若不指定,该网页插件由系统分配的关联接入客服云。 | 若指定关联,该网页插件由该关联接入客服云。若不指定,该网页插件由系统分配的关联接入客服云。 | ||
- | ==== 信息栏设置 ==== | + | === 输入框上方快捷操作 === |
- | 网页插件-信息栏设置,可设置常见问题及自助服务。开启后,访客端右侧可显示自助服务及常见问题,节省人力,提高客户服务效率。 | + | 支持自定义访客端输入框上方快捷操作,最多可配置16个操作,支持跳转链接、发送消息、转人工、评价行为,可将访客常见问题或快捷业务入口配置在这里。 |
+ | * **跳转链接**:点击时,在新的标签页打开指定链接。可配置一些活动说明或用户通知类,点击跳转至详情。 | ||
+ | * **发送消息**:可简短描述访客常见操作问题,点击此快捷操作时系统以访客身份自动发送问题,可在机器人知识库中预设相关问题的答案,自动回复访客。 | ||
+ | * **转人工**:可配置转人工的业务入口,比如“投诉”,点击投诉时就会转人工。 | ||
+ | * **评价**:点击时进行服务评价。 | ||
+ | * **弹出窗口**:此功能可以实现访客进入聊天页面时,自动弹出例如订单列表弹窗,当访客不需时可以关闭弹窗,也可以在会话过程中,访客自行打开弹窗,点击弹窗内容实现消息上屏等操作,iframe支持动态传参、自行控制初始打开或关闭等多种操作。(注:iframe页面内部显示内容需业务系统自行开发)。 | ||
+ | |||
+ | {{:cs:releasenote:输入框上方快捷操作效果.png?nolink&1000|}} | ||
+ | |||
+ | h5访客端弹窗显示效果如下(如需做复杂场景下的开发,请联系商务人员进行对接支持): | ||
+ | |||
+ | {{:cs:300visitoraccess:客服云-弹窗-ui.png?nolink|}} | ||
+ | |||
+ | === H5工具栏扩展操作 === | ||
+ | |||
+ | * 背景:H5端由于设备原因,除了输入框和选择表情在工具栏上直接展示,其他的操作都要点击+才能看到。这里说的工具栏扩展操作就是指点击+之后看到的操作,可以支持自定义。 | ||
+ | * 功能说明:支持自定义扩展操作,最多可配置16个操作,支持跳转链接、弹出窗口、拍照/选照片、拍视频/选视频、评价行为,可将快捷业务入口配置在这里。 | ||
+ | * 跳转链接:点击时,跳转至指定链接。可配置一些活动说明或用户通知类,点击跳转至详情。 | ||
+ | * 弹出窗口:点击时,在当前页面弹出60%高度窗口,支持嵌入iframe页面,比如:商品/订单。iframe页面可按[[cs:300visitoraccess:extended-message-format|扩展消息格式说明]]发送商品/订单轨迹消息格式集成,支持访客一键发送商品/订单卡片消息。 | ||
+ | * 拍照/选照片:点击可拍照/选照片。 | ||
+ | * 拍视频/选视频:点击可拍视频/选视频。 | ||
+ | * 评价:点击可触发服务评价。 | ||
+ | |||
+ | {{:cs:300visitoraccess:img_3286.png?nolink&300|}} | ||
+ | |||
+ | |||
+ | ==== 侧边栏设置 ==== | ||
+ | |||
+ | 网页插件-侧边栏设置,可设置侧边栏宽度、常见问题、自助服务及iframe页面。开启后,访客端右侧可显示自助服务及常见问题,节省人力,提高客户服务效率。 | ||
+ | 侧边栏配置完成后,打开侧边栏开关,侧边栏即可生效。 | ||
pc端访客端样式: | pc端访客端样式: | ||
+ | |||
{{:cs:releasenote:访客pc端信息栏样式.png?nolink|访客pc端信息栏样式}} | {{:cs:releasenote:访客pc端信息栏样式.png?nolink|访客pc端信息栏样式}} | ||
移动端访客端样式: | 移动端访客端样式: | ||
+ | |||
{{:cs:releasenote:访客移动端信息栏样式.png?nolink|访客移动端信息栏样式 }} | {{:cs:releasenote:访客移动端信息栏样式.png?nolink|访客移动端信息栏样式 }} | ||
=== 常见问题 === | === 常见问题 === | ||
- | 网页插件-信息栏设置,用户可手动添加常见问题,添加后在访客端展示常见问题列表,访客可点击问题查看对应答案。 | + | 网页插件-侧边栏设置,用户可手动添加常见问题,常见问题支持2种类型 |
+ | - 类型1:单击上屏,此种仅需管理员维护好常见问题标题即可,访客点击常见问题标题后,点击的内容会上屏,机器人接待后即可给予对应的回复; | ||
+ | - 类型2:想下展开,此种需要管理员同时维护好常见问题列表及答案,维护完成后,即可在访客端展示常见问题列表,访客可点击问题标题,即可展开查看对应答案。 | ||
常见问题仅支持文字类型(问题描述最多20个字符,答案描述最多1000个字符)。 | 常见问题仅支持文字类型(问题描述最多20个字符,答案描述最多1000个字符)。 | ||
行 221: | 行 293: | ||
=== 自助服务 === | === 自助服务 === | ||
- | 网页插件-信息栏设置,新增自助服务功能,用户可通过设定业务名称、业务链接、业务图标添加自助服务。 | + | 网页插件-侧边栏设置,新增自助服务功能,用户可通过设定业务名称、业务链接、业务图标添加自助服务。 |
开关打开时,访客端会自动显示自助服务。关闭时,不显示自助服务。最多可以配置 8 个自助服务。 | 开关打开时,访客端会自动显示自助服务。关闭时,不显示自助服务。最多可以配置 8 个自助服务。 | ||
行 234: | 行 306: | ||
- | === 访客端信息栏样式 === | + | === 访客端侧边栏样式 === |
PC端样式说明: | PC端样式说明: | ||
行 247: | 行 319: | ||
移动端样式说明: | 移动端样式说明: | ||
- | - 新增一个访客端落地页,显示信息栏内容,联系客服作为悬浮按钮,点击后跳转显示聊窗(刷新页面)。 | + | - 新增一个访客端落地页,显示侧边栏内容,联系客服作为悬浮按钮,点击后跳转显示聊窗(刷新页面)。 |
- 悬浮窗显示(集成网页插件)时,点击悬浮按钮后:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | - 悬浮窗显示(集成网页插件)时,点击悬浮按钮后:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | ||
- 独立页面显示(集成网页链接)时:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | - 独立页面显示(集成网页链接)时:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | ||
行 271: | 行 343: | ||
easemobim.config = { | easemobim.config = { | ||
hide: true, | hide: true, | ||
- | autoConnect: true | + | autoConnect: false |
}; | }; | ||
</script> | </script> | ||
行 277: | 行 349: | ||
</code> | </code> | ||
- | 注意:当设置 hide 为 true 时,建议同时设置 autoConnect 为 true,以便访客端聊天窗口最小化时,收到新消息提醒。 | + | ⚠️注意:当设置 hide 为 true 时,建议同时设置 autoConnect 为 true,以便访客端聊天窗口最小化时,收到新消息提醒。 |
参数解释: | 参数解释: | ||
行 316: | 行 388: | ||
|dialogHeight|String|否|聊天窗口高度,默认值:'550px'| | |dialogHeight|String|否|聊天窗口高度,默认值:'550px'| | ||
|dialogPosition|Object|否|聊天窗口初始位置,坐标以视口右边距和下边距为基准,默认值:{ x: '10px', y: '10px' }| | |dialogPosition|Object|否|聊天窗口初始位置,坐标以视口右边距和下边距为基准,默认值:{ x: '10px', y: '10px' }| | ||
+ | |||
+ | ==== 指定技能组 ==== | ||
+ | 为聊天窗口指定技能组,使客户发起的会话分配到该技能组进行接待。 | ||
+ | <code html> | ||
+ | <script> | ||
+ | function sendCrmExt(){ | ||
+ | window.easemobim.sendExt( | ||
+ | { | ||
+ | // 技能组 | ||
+ | ext:{ | ||
+ | weichat:{ | ||
+ | queueName:"技能组名称", | ||
+ | queueId:"技能组ID" | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </code> | ||
==== 指定客服 ==== | ==== 指定客服 ==== | ||
行 332: | 行 422: | ||
</code> | </code> | ||
- | 注:“指定客服”比“指定技能组”的优先级高。若同时指定客服和技能组,则会话分配给指定的客服。 | + | 特殊说明: |
+ | |||
+ | 1、“指定客服”比“指定技能组”的优先级高。 | ||
+ | |||
+ | 2、若同时指定客服和技能组,则会话分配给指定的客服。只要指定的客服已登录,无论该客服处于各种状态下,且无论是否配置机器人优先接待,此会话均会强制直接分配给此客服接起。 | ||
+ | |||
+ | 3、对应的指定客服处于未登录状态下,该会话依然会被正常创建并指向给该坐席。 | ||
参数解释: | 参数解释: | ||
行 343: | 行 440: | ||
当访客发起咨询时(前提为已登录用户),网站可自动将该用户信息(如名称、手机、邮箱、QQ 等)发送给客服,并显示在聊天窗口右侧。 | 当访客发起咨询时(前提为已登录用户),网站可自动将该用户信息(如名称、手机、邮箱、QQ 等)发送给客服,并显示在聊天窗口右侧。 | ||
+ | |||
+ | 管理员模式 >设置 > 功能设置 >允许访客端修改客户信息 要打开,nickName不能为空。 | ||
配置示例: | 配置示例: | ||
行 379: | 行 478: | ||
|configId|String|是|设置为您的网页插件页面显示的configId的值| | |configId|String|是|设置为您的网页插件页面显示的configId的值| | ||
|visitor|Object|否|访客信息| | |visitor|Object|否|访客信息| | ||
+ | |||
+ | ==== 自定义字段传参集成用户信息 ==== | ||
+ | |||
+ | 配置示例 | ||
+ | <code html> | ||
+ | <script> | ||
+ | window.easemobim = window.easemobim || {}; | ||
+ | easemobim.config = { | ||
+ | configId: '304fe7b6-3046-416b-b169-0398f647b90e', | ||
+ | visitor: { | ||
+ | trueName: '112222',//值外层必须要有单引号以字符串格式传输否则传输失败 | ||
+ | userNickname: '1234', | ||
+ | description: '0909', | ||
+ | email: '', | ||
+ | userDefineColumn: '{"WQQ":"帅哥","QAZ":"LLLLLLLTTTTTTTT"}', | ||
+ | }, | ||
+ | </code> | ||
+ | userDefineColumn里边的key必须是客服系统添加的自定义字段ID才会生效。 | ||
+ | 比如: | ||
+ | {{:cs:300visitoraccess:自定义.jpg?nolink&1000|}} | ||
+ | {{:cs:300visitoraccess:资料设置.jpg?nolink&800|}} | ||
==== 集成用户体系 ==== | ==== 集成用户体系 ==== | ||
行 544: | 行 664: | ||
|configId|String|是|设置为您的网页插件页面显示的configId的值| | |configId|String|是|设置为您的网页插件页面显示的configId的值| | ||
|onready: function () { }|Function|否|聊天窗口加载成功回调| | |onready: function () { }|Function|否|聊天窗口加载成功回调| | ||
- | |onmessage: function ( message ) { }|Function|否|收消息回调,只对当前打开的聊天窗口有效| | + | |onmessage: function ( message ) { }|Function|否|收消息回调,只对当前打开的聊天窗口有效,当访客收到来自系统消息、机器人消息、坐席消息均会触发此回调| |
- | |onsessionclosed: function () { }|Function|否|会话结束回调| | + | |onsessionclosed: function () { }|Function|否|会话结束事件回调| |
+ | |onsessioncreat: function () { }|Function|否|会话创建事件回调| | ||
+ | |||
+ | ==== 支持业务标识路由 ==== | ||
+ | |||
+ | 访客端在集成时候在easemob.config里增加字段 routingRuleFlag:"" | ||
+ | |||
+ | 配置示例: | ||
+ | |||
+ | <code html> | ||
+ | easemobim.config ={ | ||
+ | //增加业务标识路由字段 | ||
+ | configId: '84a85315-4ce7-4f5c-8fac-17e0bccbece0', routingRuleFlag:"测试的业务标识路由", } | ||
+ | </code> | ||
===== 高级功能(H5网页) ===== | ===== 高级功能(H5网页) ===== | ||
行 650: | 行 783: | ||
注:domain、path、staticPath 三个参数,请填写双斜杠(%%//%%)开头的可访问的服务器路径,不要加协议头,结尾无需添加“/”。 | 注:domain、path、staticPath 三个参数,请填写双斜杠(%%//%%)开头的可访问的服务器路径,不要加协议头,结尾无需添加“/”。 | ||
+ | |||
+ | |||
==== 支持的配置项 ==== | ==== 支持的配置项 ==== | ||
行 671: | 行 806: | ||
|dialogHeight|String|否|聊天窗口高度,默认值:'550px'|是|否| | |dialogHeight|String|否|聊天窗口高度,默认值:'550px'|是|否| | ||
|dialogPosition|Object|否|聊天窗口初始位置,坐标以视口右边距和下边距为基准,默认值:{ x: '10px', y: '10px' }|是|否| | |dialogPosition|Object|否|聊天窗口初始位置,坐标以视口右边距和下边距为基准,默认值:{ x: '10px', y: '10px' }|是|否| | ||
- | |onmessage: function ( message ) { }|Function|否|收消息回调,只对当前打开的聊天窗口有效|是|是| | + | |onmessage: function ( message ) { }|Function|否|收消息回调,只对当前打开的聊天窗口有效,,当访客收到来自系统消息、机器人消息、坐席消息均会触发此回调|是|是| |
|onready: function () { }|Function|否|聊天窗口加载成功回调|是|是| | |onready: function () { }|Function|否|聊天窗口加载成功回调|是|是| | ||
- | |onsessionclosed: function () { }|Function|否|会话结束回调|是|是| | + | |onopen: function () { }|Function|否|聊天窗口打开回调|是|是| |
+ | |onclose: function () { }|Function|否|聊天窗口关闭回调|是|是| | ||
+ | |onEvaluationsubmit:function(){}|Function|否|满意度评价提交回调|是|是| | ||
+ | |onsessioncreat: function () { }|Function|否|会话创建事件回调,例如访客发送首条消息后会话成功建立起来后会触发此回调事件|是|是| | ||
+ | |onsessionclosed: function () { }|Function|否|会话结束事件回调|是|是| | ||
+ |