差别
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 后一修订版 两侧同时换到之后的修订记录 | ||
cs:300visitoraccess:web-widget [2019/06/20 08:57] tinychang |
cs:300visitoraccess:web-widget [2024/04/03 03:53] 丁艺杰 [发送订单/轨迹消息] |
||
---|---|---|---|
行 114: | 行 114: | ||
注:该功能只对H5网页生效。 | 注:该功能只对H5网页生效。 | ||
+ | |||
+ | === 自动邀请 === | ||
+ | |||
+ | 开关开启,网页访客端可自动弹出邀请窗口,邀请访客加入会话。 | ||
+ | |||
+ | 配置窗口可配置邀请机制及邀请样式。 | ||
+ | |||
+ | {{:cs:releasenote:图片1.png?nolink&850|}} | ||
+ | |||
+ | <WRAP center round tip 100%> | ||
+ | |||
+ | **注意:** | ||
+ | |||
+ | - 加载configId时,只能在easemobim.config={}里配置使用,easemobim.bind()配置的configId不生效 | ||
+ | - 只能使用easemob.js方式集成 | ||
+ | </WRAP> | ||
+ | |||
+ | |||
==== 功能设置 ==== | ==== 功能设置 ==== | ||
行 128: | 行 146: | ||
* 展示默认消息(需要设置消息内容) | * 展示默认消息(需要设置消息内容) | ||
* 进入聊天窗口 | * 进入聊天窗口 | ||
+ | |||
+ | === 满意度评价邀请方式 === | ||
+ | |||
+ | 可选择“发送系统消息”或“主动弹出邀请”两种邀请评价方式。 | ||
+ | |||
+ | === 发送附件功能 === | ||
+ | |||
+ | 开关开启将允许客户在聊天过程中发送附件(不限类型的文件)。 | ||
=== 主动评价功能 === | === 主动评价功能 === | ||
行 171: | 行 197: | ||
若指定关联,该网页插件由该关联接入客服云。若不指定,该网页插件由系统分配的关联接入客服云。 | 若指定关联,该网页插件由该关联接入客服云。若不指定,该网页插件由系统分配的关联接入客服云。 | ||
- | ==== 信息栏设置 ==== | + | === 输入框上方快捷操作 === |
+ | |||
+ | 支持自定义访客端输入框上方快捷操作,最多可配置16个操作,支持跳转链接、发送消息、转人工、评价行为,可将访客常见问题或快捷业务入口配置在这里。 | ||
+ | * 跳转链接:点击时,在新的标签页打开指定链接。可配置一些活动说明或用户通知类,点击跳转至详情。 | ||
+ | * 发送消息:可简短描述访客常见操作问题,点击此快捷操作时系统以访客身份自动发送问题,可在机器人知识库中预设相关问题的答案,自动回复访客。 | ||
+ | * 转人工:可配置转人工的业务入口,比如“投诉”,点击投诉时就会转人工。 | ||
+ | * 评价:点击时进行服务评价。 | ||
+ | |||
+ | {{:cs:releasenote:输入框上方快捷操作效果.png?nolink&1000|}} | ||
+ | |||
+ | === H5工具栏扩展操作 === | ||
+ | |||
+ | * 背景:H5端由于设备原因,除了输入框和选择表情在工具栏上直接展示,其他的操作都要点击+才能看到。这里说的工具栏扩展操作就是指点击+之后看到的操作,可以支持自定义。 | ||
+ | * 功能说明:支持自定义扩展操作,最多可配置16个操作,支持跳转链接、弹出窗口、拍照/选照片、拍视频/选视频、评价行为,可将快捷业务入口配置在这里。 | ||
+ | * 跳转链接:点击时,跳转至指定链接。可配置一些活动说明或用户通知类,点击跳转至详情。 | ||
+ | * 弹出窗口:点击时,在当前页面弹出60%高度窗口,支持嵌入iframe页面,比如:商品/订单。iframe页面可按[[cs:300visitoraccess:extended-message-format|扩展消息格式说明]]发送商品/订单轨迹消息格式集成,支持访客一键发送商品/订单卡片消息。 | ||
+ | * 拍照/选照片:点击可拍照/选照片。 | ||
+ | * 拍视频/选视频:点击可拍视频/选视频。 | ||
+ | * 评价:点击可触发服务评价。 | ||
+ | |||
+ | {{:cs:300visitoraccess:img_3286.png?nolink&300|}} | ||
+ | |||
+ | |||
+ | ==== 侧边栏设置 ==== | ||
+ | |||
+ | 网页插件-侧边栏设置,可设置侧边栏宽度、常见问题、自助服务及iframe页面。开启后,访客端右侧可显示自助服务及常见问题,节省人力,提高客户服务效率。 | ||
+ | 侧边栏配置完成后,打开侧边栏开关,侧边栏即可生效。 | ||
+ | |||
+ | pc端访客端样式: | ||
+ | {{:cs:releasenote:访客pc端信息栏样式.png?nolink|访客pc端信息栏样式}} | ||
+ | |||
+ | 移动端访客端样式: | ||
+ | {{:cs:releasenote:访客移动端信息栏样式.png?nolink|访客移动端信息栏样式 }} | ||
=== 常见问题 === | === 常见问题 === | ||
- | 网页插件-信息栏设置,用户可手动添加常见问题,添加后在访客端展示常见问题列表,访客可点击问题查看对应答案。 | + | 网页插件-侧边栏设置,用户可手动添加常见问题,添加后在访客端展示常见问题列表,访客可点击问题查看对应答案。 |
常见问题仅支持文字类型(问题描述最多20个字符,答案描述最多1000个字符)。 | 常见问题仅支持文字类型(问题描述最多20个字符,答案描述最多1000个字符)。 | ||
开关打开时,访客端会自动显示常见问题。关闭时,不显示常见问题。 | 开关打开时,访客端会自动显示常见问题。关闭时,不显示常见问题。 | ||
+ | |||
+ | 开启常见问题后,访客端样式请参考:[[#访客端信息栏样式|访客端信息栏样式]] | ||
{{:cs:releasenote:网页插件-常见问题new.png?nolink|网页插件-常见问题}} | {{:cs:releasenote:网页插件-常见问题new.png?nolink|网页插件-常见问题}} | ||
行 185: | 行 245: | ||
=== 自助服务 === | === 自助服务 === | ||
- | 网页插件-信息栏设置,新增自助服务功能,用户可通过设定业务名称、业务链接、业务图标添加自助服务。 | + | 网页插件-侧边栏设置,新增自助服务功能,用户可通过设定业务名称、业务链接、业务图标添加自助服务。 |
开关打开时,访客端会自动显示自助服务。关闭时,不显示自助服务。最多可以配置 8 个自助服务。 | 开关打开时,访客端会自动显示自助服务。关闭时,不显示自助服务。最多可以配置 8 个自助服务。 | ||
+ | |||
+ | 开启自助服务后,访客端样式请参考:[[#访客端信息栏样式|访客端信息栏样式]] | ||
{{:cs:releasenote:网页插件-自助服务new.png?nolink|网页插件-自助服务}} | {{:cs:releasenote:网页插件-自助服务new.png?nolink|网页插件-自助服务}} | ||
行 195: | 行 257: | ||
{{:cs:releasenote:添加自助服务new.png?nolink|添加自助服务}} | {{:cs:releasenote:添加自助服务new.png?nolink|添加自助服务}} | ||
- | === 访客端信息栏样式说明 === | + | |
+ | === 访客端侧边栏样式 === | ||
PC端样式说明: | PC端样式说明: | ||
行 208: | 行 271: | ||
移动端样式说明: | 移动端样式说明: | ||
- | - 新增一个访客端落地页,显示信息栏内容,联系客服作为悬浮按钮,点击后跳转显示聊窗(刷新页面)。 | + | - 新增一个访客端落地页,显示侧边栏内容,联系客服作为悬浮按钮,点击后跳转显示聊窗(刷新页面)。 |
- 悬浮窗显示(集成网页插件)时,点击悬浮按钮后:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | - 悬浮窗显示(集成网页插件)时,点击悬浮按钮后:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | ||
- 独立页面显示(集成网页链接)时:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | - 独立页面显示(集成网页链接)时:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | ||
行 232: | 行 295: | ||
easemobim.config = { | easemobim.config = { | ||
hide: true, | hide: true, | ||
- | autoConnect: true | + | autoConnect: false |
}; | }; | ||
</script> | </script> | ||
行 238: | 行 301: | ||
</code> | </code> | ||
- | 注意:当设置 hide 为 true 时,建议同时设置 autoConnect 为 true,以便访客端聊天窗口最小化时,收到新消息提醒。 | + | ⚠️注意:当设置 hide 为 true 时,建议同时设置 autoConnect 为 true,以便访客端聊天窗口最小化时,收到新消息提醒。 |
参数解释: | 参数解释: | ||
行 277: | 行 340: | ||
|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> | ||
==== 指定客服 ==== | ==== 指定客服 ==== | ||
行 304: | 行 385: | ||
当访客发起咨询时(前提为已登录用户),网站可自动将该用户信息(如名称、手机、邮箱、QQ 等)发送给客服,并显示在聊天窗口右侧。 | 当访客发起咨询时(前提为已登录用户),网站可自动将该用户信息(如名称、手机、邮箱、QQ 等)发送给客服,并显示在聊天窗口右侧。 | ||
+ | |||
+ | 管理员模式 >设置 > 功能设置 >允许访客端修改客户信息 要打开,nickName不能为空。 | ||
配置示例: | 配置示例: | ||
行 319: | 行 402: | ||
userNickname: '我是黎小冷', | userNickname: '我是黎小冷', | ||
description: '描述信息', | description: '描述信息', | ||
- | email: '123456@**.com' | + | email: '123456@**.com', |
+ | tags:[ | ||
+ | 'vip1', | ||
+ | 'vip2' | ||
+ | ] | ||
} | } | ||
}; | }; | ||
行 329: | 行 416: | ||
* 若再次更新 visitor 字段信息,需要访客端清除浏览器 cookie 才能正确显示更新后的用户信息。 | * 若再次更新 visitor 字段信息,需要访客端清除浏览器 cookie 才能正确显示更新后的用户信息。 | ||
* 在会话过程中,如果客服对访客的资料进行了编辑,则显示客服编辑后的访客资料。 | * 在会话过程中,如果客服对访客的资料进行了编辑,则显示客服编辑后的访客资料。 | ||
+ | * ‘tags’字段可标出VIP用户,其值可以为零到多个。 | ||
参数解释: | 参数解释: | ||
行 335: | 行 423: | ||
|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|}} | ||
==== 集成用户体系 ==== | ==== 集成用户体系 ==== | ||
行 342: | 行 451: | ||
执行以下步骤: | 执行以下步骤: | ||
- | - 参考环信服务器端[[http://docs.easemob.com/im/100serverintegration/20users|用户体系集成]],获取环信后台 username 和 password。 | + | - 参考环信服务器端[[http://docs.easemob.com/im/100serverintegration/20users|用户体系集成]],获取环信后台 username 和 password,以及管理员Token。 |
- 登录环信客服云,进入“管理员模式 > 渠道管理 > 手机App”页面,使用您的AppKey等信息[[cs:300visitoraccess:createappchannel|创建App关联]]。 | - 登录环信客服云,进入“管理员模式 > 渠道管理 > 手机App”页面,使用您的AppKey等信息[[cs:300visitoraccess:createappchannel|创建App关联]]。 | ||
- 进入环信客服云的“管理员模式 > 渠道管理 > 网页”页面,在您的网页插件的功能设置区域,找到[[#指定关联|指定关联]],选择上一步创建的App关联。 | - 进入环信客服云的“管理员模式 > 渠道管理 > 网页”页面,在您的网页插件的功能设置区域,找到[[#指定关联|指定关联]],选择上一步创建的App关联。 | ||
行 375: | 行 484: | ||
} | } | ||
</script> | </script> | ||
+ | </code> | ||
+ | |||
+ | 获取用户Token:根据username和password获取access_token。 | ||
+ | |||
+ | |||
+ | * Path:https://a1.easemob.com/orgName/appName/token(北京集群);https://a1-vip5.easemob.com/orgName/appName/token(客服快速关联appkey) | ||
+ | * HTTP Method:POST | ||
+ | * Request Headers: Content-Type=application/json | ||
+ | |||
+ | Request body: | ||
+ | |||
+ | <code json> | ||
+ | { | ||
+ | "grant_type":"password", | ||
+ | "username":"user", | ||
+ | "password":"pwd" | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | Response示例 | ||
+ | |||
+ | <code json> | ||
+ | { | ||
+ | "access_token": "YWMtI5JsbKhHEem57CF4KOxCxnljbbBGLhHpjpSjqzuD_CB4YttqkNER6YIJEZ8gpOpaAwMAAAFr_hTkLQBPGgB7xNZ6-mjCRkn_nivCNcB01uiyS9Yt9pdiU_6LH579zA", | ||
+ | "expires_in": 5184000, | ||
+ | "user": { | ||
+ | "uuid": "7862db6a-90d1-11e9-8209-119f20a4ea5a", | ||
+ | "type": "user", | ||
+ | "created": 1560756495382, | ||
+ | "modified": 1560765534117, | ||
+ | "username": "test1", | ||
+ | "activated": true, | ||
+ | "device_token": "Getg6CgqFanQ4dwAvn9/qxoa5crWpNSkiVFcVt3eDr1S6xqz5X2sm0dbi1yNAQsl", | ||
+ | "notifier_name": "2882303761517507836" | ||
+ | } | ||
+ | } | ||
</code> | </code> | ||
行 465: | 行 610: | ||
|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网页) ===== | ||
行 570: | 行 728: | ||
注:domain、path、staticPath 三个参数,请填写双斜杠(%%//%%)开头的可访问的服务器路径,不要加协议头,结尾无需添加“/”。 | 注:domain、path、staticPath 三个参数,请填写双斜杠(%%//%%)开头的可访问的服务器路径,不要加协议头,结尾无需添加“/”。 | ||
+ | |||
+ | |||
==== 支持的配置项 ==== | ==== 支持的配置项 ==== | ||
行 593: | 行 753: | ||
|onmessage: function ( message ) { }|Function|否|收消息回调,只对当前打开的聊天窗口有效|是|是| | |onmessage: function ( message ) { }|Function|否|收消息回调,只对当前打开的聊天窗口有效|是|是| | ||
|onready: function () { }|Function|否|聊天窗口加载成功回调|是|是| | |onready: function () { }|Function|否|聊天窗口加载成功回调|是|是| | ||
+ | |onopen: function () { }|Function|否|聊天窗口打开回调|是|是| | ||
+ | |onclose: function () { }|Function|否|聊天窗口关闭回调|是|是| | ||
+ | |onEvaluationsubmit:function(){}|Function|否|满意度评价提交回调|是|是| | ||
|onsessionclosed: function () { }|Function|否|会话结束回调|是|是| | |onsessionclosed: function () { }|Function|否|会话结束回调|是|是| | ||
+ | |||
+ |