差别
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 后一修订版 两侧同时换到之后的修订记录 | ||
cs:300visitoraccess:web-widget [2018/12/14 03:14] liulj [支持的配置项] |
cs:300visitoraccess:web-widget [2019/08/07 04:29] candywang |
||
---|---|---|---|
行 16: | 行 16: | ||
* 兼容性:兼容旧版网页插件的代码集成方式,升级新版后,不影响已有的网页聊天窗口功能。 | * 兼容性:兼容旧版网页插件的代码集成方式,升级新版后,不影响已有的网页聊天窗口功能。 | ||
- | {{:cs:300visitoraccess:admin-channel-web4.png?nolink|新版网页插件}} | + | {{:cs:releasenote:渠道管理-网页插件.png?nolink|渠道管理-网页插件}} |
=== 旧版网页插件 === | === 旧版网页插件 === | ||
行 35: | 行 35: | ||
===== 前提条件 ===== | ===== 前提条件 ===== | ||
- | 网页插件依赖环信客户互动云中的APP关联收发消息。 | + | 网页插件依赖环信客服云中的APP关联收发消息。 |
- | * 对于在kefu.easemob.com注册的用户:环信已为您创建了一个隐藏的“体验关联”,直接在您的网页添加JS代码,就可以实现与客户互动云对接。 | + | * 对于在kefu.easemob.com注册的用户:环信已为您创建了一个隐藏的“体验关联”,直接在您的网页添加JS代码,就可以实现与客服云对接。 |
- | * 对于其他用户(多租户系统的用户):请您登录环信客户互动云后,选择“管理员模式 > 渠道管理 > 手机APP”,在该页面依次点击“添加APP关联”和“快速创建”,环信将为您创建一个APP关联。该关联可以作为网页访客端收发消息的通道,也可用于APP渠道集成。 | + | * 对于其他用户(多租户系统的用户):请您登录环信客服云后,选择“管理员模式 > 渠道管理 > 手机APP”,在该页面依次点击“添加APP关联”和“快速创建”,环信将为您创建一个APP关联。该关联可以作为网页访客端收发消息的通道,也可用于APP渠道集成。 |
- | ===== 快速集成===== | ||
- | 新版网页插件支持聊天窗口和H5网页两种方式: | + | ===== 设置网页插件 ===== |
- | ==== 聊天窗口 ==== | + | 可以在客服工作台设置网页插件的接入方式、样式设置、功能设置、信息栏设置。除特殊说明外,以下设置对PC端、移动端聊天窗口和H5网页均生效。 |
- | 在“管理员模式 > 渠道管理 > 网页”页面,将网页插件的代码复制并粘贴到您的网站的</body>标签之前,保存并发布。 | ||
- | 移动端集成需要加自定义按钮,详见 [[#自定义“联系客服”按钮 | 自定义“联系客服”按钮]] | + | ==== 接入方式 ==== |
- | {{:cs:300visitoraccess:admin-channel-web4.png?nolink|网页插件代码}} | + | |
- | === 英文版聊天窗口 === | + | 支持集成网页插件和集成网页链接两种方式。 |
- | 集成英文版聊天窗口: | + | === 集成网页插件 === |
+ | |||
+ | 在“管理员模式 > 渠道管理 > 网页 > 接入方式”页面,将网页插件的代码复制并粘贴到您的网站的</body>标签之前,保存并发布。 | ||
+ | |||
+ | 英文版集成网页插件: | ||
- 进入“客服模式 > 客服信息”页面,将系统语言修改为英文。 | - 进入“客服模式 > 客服信息”页面,将系统语言修改为英文。 | ||
行 60: | 行 61: | ||
代码示例: | 代码示例: | ||
- | <code html><script src='//kefu.easemob.com/webim/en-US/easemob.js?configId=304fe7b6-3046-416b-b169-0398f647b90e'></script></code> | + | <code html><script src='//kefu.easemob.com/webim/easemob.js?configId=982d8f2d-06db-49ab-9e14-673c151172b6'></script></code> |
+ | |||
+ | === 集成网页链接 === | ||
+ | |||
+ | 使用网页链接将客服聊天页面集成到您到网站,即可完成客服云的快速接入。 | ||
+ | |||
+ | 网页链接示例: | ||
+ | |||
+ | <code http>https://kefu.easemob.com/webim/im.html?configId=982d8f2d-06db-49ab-9e14-673c151172b6</code> | ||
注意:en-US区分大小写。 | 注意:en-US区分大小写。 | ||
+ | ==== 样式设置 ==== | ||
- | ==== H5网页 ==== | + | === 广告栏设置 === |
- | 在浏览器地址栏输入以下地址,并将{configId}替换为您的网页插件页面显示的configId的值。 | + | 文本模式: |
- | <code http>https://kefu.easemob.com/webim/im.html?configId={configId}</code> | + | 开关开启,可以设置广告消息,并展示在聊天窗口。 |
- | === 英文版H5网页 === | + | {{:cs:300visitoraccess:admin-channel-web10.png?nolink|信息栏(文本)}} |
- | 集成英文版H5网页: | + | 导航菜单模式: |
- | 将以下URL中{configId}修改为您的网页插件的configId的值: | + | 支持将文本信息栏切换为自定义导航菜单,并展示在聊天窗口。自定义导航菜单包含一级菜单和二级菜单,可创建最多3个一级菜单,每个一级菜单下可创建最多5个二级菜单。可在菜单上设置图文消息(从素材库选择),当访客点击菜单项时,自动向访客发送对应的图文消息。 |
- | <code http>https://kefu.easemob.com/webim/en-US/im.html?configId={configId}</code> | + | 开关打开时,同时将访客对导航菜单的选择作为轨迹消息发送给客服,并创建会话。 |
- | 注意:en-US区分大小写。 | + | {{:cs:300visitoraccess:admin-channel-web13.png?nolink|信息栏(自定义导航菜单)}} |
- | ===== 设置网页插件 ===== | + | 访客端示例(导航菜单显示在聊天窗口上方): |
- | 可以在客服工作台设置网页插件的常用功能和显示样式。除特殊说明外,以下设置对PC端、移动端聊天窗口和H5网页均生效。 | + | {{:cs:300visitoraccess:admin-channel-web14.png?nolink|导航菜单示例}} |
- | 设置网页插件: | + | 注:自定义导航菜单为企业版、旗舰版功能。 |
+ | |||
+ | === 企业形象展示位 === | ||
+ | |||
+ | 开关开启,可以设置企业品牌广告,并展示在聊天窗口。 | ||
+ | |||
+ | {{:cs:300visitoraccess:admin-channel-web11.png?nolink|企业形象展示}} | ||
+ | |||
+ | === 选择主题风格 === | ||
+ | |||
+ | 选择聊天窗口和悬浮按钮的颜色主题。 | ||
+ | |||
+ | {{:cs:300visitoraccess:admin-channel-web12.png?nolink|主题风格}} | ||
+ | |||
+ | === H5网页标题 === | ||
+ | |||
+ | 设置H5网页在浏览器页签中显示的名称。 | ||
+ | |||
+ | 注:该功能只对H5网页生效。 | ||
+ | |||
+ | === 邀请窗口 === | ||
+ | |||
+ | 开关开启,网页访客端可主动弹出邀请窗口,邀请访客加入会话。 | ||
- | - 在“网页”页面,选择一个网页插件。 | ||
- | - [[#功能设置|设置网页插件的功能]]。 | ||
- | - [[#显示样式设置|设置网页插件的样式显示]]。 | ||
- | - 点击“预览实际效果”按钮,对网页插件进行预览。 | ||
- | - 点击“保存”按钮,保存该网页插件的设置。 | ||
==== 功能设置 ==== | ==== 功能设置 ==== | ||
行 106: | 行 133: | ||
* 展示默认消息(需要设置消息内容) | * 展示默认消息(需要设置消息内容) | ||
* 进入聊天窗口 | * 进入聊天窗口 | ||
+ | |||
+ | === 满意度评价邀请方式 === | ||
+ | |||
+ | 可选择“发送系统消息”或“主动弹出邀请”两种邀请评价方式。 | ||
=== 主动评价功能 === | === 主动评价功能 === | ||
行 147: | 行 178: | ||
=== 指定关联 === | === 指定关联 === | ||
- | 若指定关联,该网页插件由该关联接入客户互动云。若不指定,该网页插件由系统分配的关联接入客户互动云。 | + | 若指定关联,该网页插件由该关联接入客服云。若不指定,该网页插件由系统分配的关联接入客服云。 |
- | === H5网页标题 === | + | ==== 信息栏设置 ==== |
- | 设置H5网页在浏览器页签中显示的名称。 | + | === 常见问题 === |
- | 注:该功能只对H5网页生效。 | + | 网页插件-信息栏设置,用户可手动添加常见问题,添加后在访客端展示常见问题列表,访客可点击问题查看对应答案。 |
- | ==== 显示样式设置 ==== | + | 常见问题仅支持文字类型(问题描述最多20个字符,答案描述最多1000个字符)。 |
- | === 信息栏设置(文本) === | + | 开关打开时,访客端会自动显示常见问题。关闭时,不显示常见问题。 |
- | 开关开启,可以设置广告消息,并展示在聊天窗口。 | + | {{:cs:releasenote:网页插件-常见问题new.png?nolink|网页插件-常见问题}} |
- | {{:cs:300visitoraccess:admin-channel-web10.png?nolink|信息栏(文本)}} | + | === 自助服务 === |
- | === 企业形象展示位 === | + | 网页插件-信息栏设置,新增自助服务功能,用户可通过设定业务名称、业务链接、业务图标添加自助服务。 |
- | 开关开启,可以设置企业品牌广告,并展示在聊天窗口。 | + | 开关打开时,访客端会自动显示自助服务。关闭时,不显示自助服务。最多可以配置 8 个自助服务。 |
- | {{:cs:300visitoraccess:admin-channel-web11.png?nolink|企业形象展示}} | + | {{:cs:releasenote:网页插件-自助服务new.png?nolink|网页插件-自助服务}} |
- | === 选择主题风格 === | + | 添加自助服务: |
- | 选择聊天窗口和悬浮按钮的颜色主题。 | + | {{:cs:releasenote:添加自助服务new.png?nolink|添加自助服务}} |
- | {{:cs:300visitoraccess:admin-channel-web12.png?nolink|主题风格}} | + | === 访客端信息栏样式说明 === |
+ | PC端样式说明: | ||
- | === 信息栏设置(导航菜单) === | + | - 根据常见问题开关状态、自助服务开关状态,在访客端右侧显示或不显示常见问题列表、自助服务按钮。 |
+ | - 点击常见问题列表可以展开显示问题和答案或收起只显示问题;点击自助服务按钮,跳转至设定的URL。 | ||
+ | - 悬浮窗显示(集成网页插件)时,访客端宽度增加一倍,聊窗尺寸不变,聊窗右侧显示常见问题和自助服务。 | ||
+ | - 独立页面显示(集成网页链接)时,访客端默认显示1024*768,聊窗右侧显示常见问题和自助服务(各占一半)。 | ||
- | 支持将文本信息栏切换为自定义导航菜单,并展示在聊天窗口。自定义导航菜单包含一级菜单和二级菜单,可创建最多3个一级菜单,每个一级菜单下可创建最多5个二级菜单。可在菜单上设置图文消息(从素材库选择),当访客点击菜单项时,自动向访客发送对应的图文消息。 | + | {{:cs:releasenote:访客pc端信息栏样式.png?nolink|访客pc端信息栏样式}} |
- | 开关打开时,同时将访客对导航菜单的选择作为轨迹消息发送给客服,并创建会话。 | + | 移动端样式说明: |
- | + | ||
- | {{:cs:300visitoraccess:admin-channel-web13.png?nolink|信息栏(导航菜单)}} | + | |
- | + | ||
- | 访客端示例(导航菜单显示在聊天窗口上方): | + | |
- | + | ||
- | {{:cs:300visitoraccess:admin-channel-web14.png?nolink|导航菜单示例}} | + | |
- | 注:自定义导航菜单为标准版/旗舰版增值服务。如需开通,请提供租户ID并联系环信商务经理。 | + | - 新增一个访客端落地页,显示信息栏内容,联系客服作为悬浮按钮,点击后跳转显示聊窗(刷新页面)。 |
+ | - 悬浮窗显示(集成网页插件)时,点击悬浮按钮后:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | ||
+ | - 独立页面显示(集成网页链接)时:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 | ||
+ | {{:cs:releasenote:访客移动端信息栏样式.png?nolink|访客移动端信息栏样式}} | ||
===== 高级功能(聊天窗口) ===== | ===== 高级功能(聊天窗口) ===== | ||
行 296: | 行 328: | ||
userNickname: '我是黎小冷', | userNickname: '我是黎小冷', | ||
description: '描述信息', | description: '描述信息', | ||
- | email: '123456@**.com' | + | email: '123456@**.com', |
+ | tags:[ | ||
+ | 'vip1', | ||
+ | 'vip2' | ||
+ | ] | ||
} | } | ||
}; | }; | ||
行 306: | 行 342: | ||
* 若再次更新 visitor 字段信息,需要访客端清除浏览器 cookie 才能正确显示更新后的用户信息。 | * 若再次更新 visitor 字段信息,需要访客端清除浏览器 cookie 才能正确显示更新后的用户信息。 | ||
* 在会话过程中,如果客服对访客的资料进行了编辑,则显示客服编辑后的访客资料。 | * 在会话过程中,如果客服对访客的资料进行了编辑,则显示客服编辑后的访客资料。 | ||
+ | * ‘tags’字段可标出VIP用户,其值可以为零到多个。 | ||
参数解释: | 参数解释: | ||
行 315: | 行 352: | ||
==== 集成用户体系 ==== | ==== 集成用户体系 ==== | ||
- | 集成用户体系,指将您的用户的环信username和password,以及昵称等信息写入网页插件,以便用户发起咨询时,能够在环信客户互动云识别对应的用户。 | + | 集成用户体系,指将您的用户的环信username和password,以及昵称等信息写入网页插件,以便用户发起咨询时,能够在环信客服云识别对应的用户。 |
执行以下步骤: | 执行以下步骤: | ||
- | - 参考环信服务器端[[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关联。 |
- 参考下述配置示例,配置configId(与上一步“网页插件”的configId一致)、您的用户的环信username和password、用户昵称等信息,集成指定用户。 | - 参考下述配置示例,配置configId(与上一步“网页插件”的configId一致)、您的用户的环信username和password、用户昵称等信息,集成指定用户。 | ||
行 352: | 行 389: | ||
} | } | ||
</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> | ||
行 488: | 行 561: | ||
<code http>https://kefu.easemob.com/webim/im.html?configId={configId}&wechatAuth=true&appid=wx1e7ed77036581061</code> | <code http>https://kefu.easemob.com/webim/im.html?configId={configId}&wechatAuth=true&appid=wx1e7ed77036581061</code> | ||
- | 注意:当您配置wechatAuth和appid这两个参数时,还需要在客户互动云的“管理员模式 > 渠道管理 > 微信”页面通过授权的方式绑定您的微信公众号。 | + | 注意:当您配置wechatAuth和appid这两个参数时,还需要在客服云的“管理员模式 > 渠道管理 > 微信”页面通过授权的方式绑定您的微信公众号。 |
参数解释: | 参数解释: | ||
行 555: | 行 628: | ||
^参数^类型^必选^描述^桌面网页是否支持^移动端网页是否支持^ | ^参数^类型^必选^描述^桌面网页是否支持^移动端网页是否支持^ | ||
|configId|String|是|设置为您的网页插件页面显示的configId的值|是|是| | |configId|String|是|设置为您的网页插件页面显示的configId的值|是|是| | ||
- | |domain|String|是|环信客户互动云域,必须配置为'%%//%%kefu.easemob.com'|是|是| | + | |domain|String|是|环信客服云域,必须配置为'%%//%%kefu.easemob.com'|是|是| |
|path|String|是|im.html的本机服务器路径,例如:'%%//%%XXX'|是|是| | |path|String|是|im.html的本机服务器路径,例如:'%%//%%XXX'|是|是| | ||
|staticPath|String|是|访客插件static的路径,例如:'%%//%%XXX/static'|是|是| | |staticPath|String|是|访客插件static的路径,例如:'%%//%%XXX/static'|是|是| | ||
行 571: | 行 644: | ||
|onready: function () { }|Function|否|聊天窗口加载成功回调|是|是| | |onready: function () { }|Function|否|聊天窗口加载成功回调|是|是| | ||
|onsessionclosed: function () { }|Function|否|会话结束回调|是|是| | |onsessionclosed: function () { }|Function|否|会话结束回调|是|是| | ||
- |