差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
cs:300visitoraccess:20webplugin [2018/05/11 11:40]
黄谦
cs:300visitoraccess:20webplugin [2019/02/25 10:22] (当前版本)
刘丽君
行 1: 行 1:
 ====== 网页渠道集成(旧版) ====== ====== 网页渠道集成(旧版) ======
  
-可以通过以下两种方式,实现网页渠道与环信客户互动云的对接:+可以通过以下两种方式,实现网页渠道与环信客云的对接:
  
   * [[cs:​300visitoraccess:​20webplugin#​引用标准版本_集成聊天窗口|引用标准版本]]:引用线上 web 插件,在桌面网站植入聊天窗口并提供 H5 网页,让访客与客服聊天;   * [[cs:​300visitoraccess:​20webplugin#​引用标准版本_集成聊天窗口|引用标准版本]]:引用线上 web 插件,在桌面网站植入聊天窗口并提供 H5 网页,让访客与客服聊天;
行 13: 行 13:
 ===== 前提条件 ===== ===== 前提条件 =====
  
-Web 插件依赖环信客户互动云中的APP关联收发消息。+Web 插件依赖环信客云中的APP关联收发消息。
  
-  * 对于在kefu.easemob.com注册的用户:环信已为您创建了一个隐藏的“体验关联”,直接在您的网页添加JS代码,就可以实现与客户互动云对接。 +  * 对于在kefu.easemob.com注册的用户:环信已为您创建了一个隐藏的“体验关联”,直接在您的网页添加JS代码,就可以实现与客云对接。 
-  * 对于其他用户(多租户系统的用户):请您登录环信客户互动云后,选择“管理员模式 > 渠道管理 > 手机APP”,在该页面依次点击“添加APP关联”和“快速创建”,环信将为您创建一个APP关联。该关联可以作为网页访客端收发消息的通道,也可用于APP渠道集成。+  * 对于其他用户(多租户系统的用户):请您登录环信客云后,选择“管理员模式 > 渠道管理 > 手机APP”,在该页面依次点击“添加APP关联”和“快速创建”,环信将为您创建一个APP关联。该关联可以作为网页访客端收发消息的通道,也可用于APP渠道集成。
 ===== 快速集成 ===== ===== 快速集成 =====
  
行 59: 行 59:
 集成后,在桌面网页点击“联系客服”按钮,可以打开聊天窗口与客服聊天,窗口内默认按钮和会话状态如下图所示。 集成后,在桌面网页点击“联系客服”按钮,可以打开聊天窗口与客服聊天,窗口内默认按钮和会话状态如下图所示。
  
-您可以通过参数[[cs:​300visitoraccess:​20webplugin#​引用标准版本_集成聊天窗口|设置]]是否显示“留言”等按钮及其他个性化设置;还可以登录环信客户互动云,在“管理员模式 > 渠道管理 > 网页”页面设置聊天窗口的主题颜色、信息栏内容、以及企业形象展示(在客户互动云设置的主题颜色等对聊天窗口和H5网页同时生效)。+您可以通过参数[[cs:​300visitoraccess:​20webplugin#​引用标准版本_集成聊天窗口|设置]]是否显示“留言”等按钮及其他个性化设置;还可以登录环信客云,在“管理员模式 > 渠道管理 > 网页”页面设置聊天窗口的主题颜色、信息栏内容、以及企业形象展示(在客云设置的主题颜色等对聊天窗口和H5网页同时生效)。
  
 {{:​cs:​300visitoraccess:​access-web6.png?​nolink|聊天窗口}} {{:​cs:​300visitoraccess:​access-web6.png?​nolink|聊天窗口}}
行 72: 行 72:
 打开该H5网页后可以与客服聊天,窗口内默认按钮和会话状态如下图所示。 打开该H5网页后可以与客服聊天,窗口内默认按钮和会话状态如下图所示。
  
-您可以通过参数[[cs:​300visitoraccess:​20webplugin#​引用标准版本_集成h5网页|设置]]是否显示“留言”等按钮及其他个性化设置;还可以登录环信客户互动云,在“管理员模式 > 渠道管理 > 网页”页面设置聊天窗口的主题颜色、信息栏内容、以及企业形象展示(在客户互动云设置的主题颜色等对聊天窗口和H5网页同时生效)。+您可以通过参数[[cs:​300visitoraccess:​20webplugin#​引用标准版本_集成h5网页|设置]]是否显示“留言”等按钮及其他个性化设置;还可以登录环信客云,在“管理员模式 > 渠道管理 > 网页”页面设置聊天窗口的主题颜色、信息栏内容、以及企业形象展示(在客云设置的主题颜色等对聊天窗口和H5网页同时生效)。
  
 {{:​cs:​300visitoraccess:​access-web5.png?​nolink|H5网页}} {{:​cs:​300visitoraccess:​access-web5.png?​nolink|H5网页}}
行 131: 行 131:
 </​code>​ </​code>​
  
-方式二:登录环信客户互动云,选择“管理员模式 > 渠道管理 > 网页”,将页面内的代码拷贝到</​body>​标签之前。+方式二:登录环信客云,选择“管理员模式 > 渠道管理 > 网页”,将页面内的代码拷贝到</​body>​标签之前。
 ==== 自定义“联系客服”按钮 ==== ==== 自定义“联系客服”按钮 ====
  
行 189: 行 189:
 ==== 指定技能组 ==== ==== 指定技能组 ====
  
-对于随机访客,只需添加 emgroup 参数,并将技能组名称赋值给 emgroup 即可;如需绑定自己的用户,需要在环信客户互动云管理员面板使用相同 AppKey 创建多个关联,并使用关联绑定技能组功能。+对于随机访客,只需添加 emgroup 参数,并将技能组名称赋值给 emgroup 即可;如需绑定自己的用户,需要在环信客云管理员面板使用相同 AppKey 创建多个关联,并使用关联绑定技能组功能。
  
 参照下面的示例,在 A 标签中设置 emgroup 参数的值为“技能组名称”,该技能组名称须和客服系统设置的技能组名称完全一致,中英文均可(确保 tenantId 为自己的)。 参照下面的示例,在 A 标签中设置 emgroup 参数的值为“技能组名称”,该技能组名称须和客服系统设置的技能组名称完全一致,中英文均可(确保 tenantId 为自己的)。
行 215: 行 215:
 ==== 指定关联 ==== ==== 指定关联 ====
  
-默认情况下,Web渠道通过租户下的“体验关联”收发消息,无需在代码中指定该“体验关联”。如果您在客户互动云的“管理员模式 > 渠道管理 > 手机APP”页面创建了一个“快速创建的关联”,或者绑定了一个您在环信即时通讯云后台(console.easemob.com)创建的应用,您可以将“联系客服”按钮指定到您自己的关联,这样,点击该按钮咨询客服的访客的消息均通过该关联连接客服系统。将按钮指定某个关联,需要配置参数:to 和 appKey。+默认情况下,Web渠道通过租户下的“体验关联”收发消息,无需在代码中指定该“体验关联”。如果您在客云的“管理员模式 > 渠道管理 > 手机APP”页面创建了一个“快速创建的关联”,或者绑定了一个您在环信即时通讯云后台(console.easemob.com)创建的应用,您可以将“联系客服”按钮指定到您自己的关联,这样,点击该按钮咨询客服的访客的消息均通过该关联连接客服系统。将按钮指定某个关联,需要配置参数:to 和 appKey。
  
 配置示例: 配置示例:
行 346: 行 346:
 参考环信服务器端[[http://​docs.easemob.com/​im/​100serverintegration/​20users|用户体系集成]],获取环信后台 username 和 password,写入 easemobIM.config.user 完成集成指定用户。 参考环信服务器端[[http://​docs.easemob.com/​im/​100serverintegration/​20users|用户体系集成]],获取环信后台 username 和 password,写入 easemobIM.config.user 完成集成指定用户。
  
-注:集成用户体系前,需要[[#​指定关联|指定关联]],并且在客户互动云的“管理员模式 > 渠道管理 > 手机APP”页面绑定该AppKey。+注:集成用户体系前,需要[[#​指定关联|指定关联]],并且在客云的“管理员模式 > 渠道管理 > 手机APP”页面绑定该AppKey。
  
 配置示例: 配置示例:
行 434: 行 434:
 ==== 自动上报客户信息 ==== ==== 自动上报客户信息 ====
  
-可以在 easemobim.config 方法下配置 eventCollector 为 true,以便用户访问网站时自动上报访客信息给环信客户互动云(客服端)。客服端收到上报的访客信息后,在“待接入”列表展示访客信息,客服可以主动发起会话。+可以在 easemobim.config 方法下配置 eventCollector 为 true,以便用户访问网站时自动上报访客信息给环信客云(客服端)。客服端收到上报的访客信息后,在“待接入”列表展示访客信息,客服可以主动发起会话。
  
 限制条件: 限制条件:
行 566: 行 566:
 ==== 指定关联 ==== ==== 指定关联 ====
  
-默认情况下,Web渠道通过租户下的“体验关联”收发消息,无需在代码中指定该“体验关联”。如果您在客户互动云的“管理员模式 > 渠道管理 > 手机APP”页面创建了一个“快速创建的关联”,或者绑定了一个您在环信即时通讯云后台(console.easemob.com)创建的应用,您可以将“联系客服”按钮指定到您自己的关联,这样,点击该按钮咨询客服的访客的消息均通过该关联连接客服系统。将按钮指定某个关联,需要配置参数:to 和 appKey。+默认情况下,Web渠道通过租户下的“体验关联”收发消息,无需在代码中指定该“体验关联”。如果您在客云的“管理员模式 > 渠道管理 > 手机APP”页面创建了一个“快速创建的关联”,或者绑定了一个您在环信即时通讯云后台(console.easemob.com)创建的应用,您可以将“联系客服”按钮指定到您自己的关联,这样,点击该按钮咨询客服的访客的消息均通过该关联连接客服系统。将按钮指定某个关联,需要配置参数:to 和 appKey。
  
 参数说明如下: 参数说明如下:
行 633: 行 633:
 <code http>​https://​kefu.easemob.com/​webim/​im.html?​tenantId=0000&​wechatAuth=true&​appid=wx1e7ed77036581061</​code>​ <code http>​https://​kefu.easemob.com/​webim/​im.html?​tenantId=0000&​wechatAuth=true&​appid=wx1e7ed77036581061</​code>​
  
-注意:当您配置wechatAuth和appid这两个参数时,还需要在客户互动云的“管理员模式 > 渠道管理 > 微信”页面通过授权的方式绑定您的微信公众号。+注意:当您配置wechatAuth和appid这两个参数时,还需要在客云的“管理员模式 > 渠道管理 > 微信”页面通过授权的方式绑定您的微信公众号。
  
 ===== 定制开发模式 ===== ===== 定制开发模式 =====
行 680: 行 680:
     //​租户id ​     //​租户id ​
     tenantId: '', ​       tenantId: '', ​  
-    //环信客户互动云域,固定值,请按照示例配置+    //环信客云域,固定值,请按照示例配置
     domain: '//​kefu.easemob.com', ​                   ​     domain: '//​kefu.easemob.com', ​                   ​
     //​您网站上im.html文件的完整路径     //​您网站上im.html文件的完整路径
行 699: 行 699:
 ^参数^类型^必选^描述^桌面网页是否支持^移动端网页是否支持^ ^参数^类型^必选^描述^桌面网页是否支持^移动端网页是否支持^
 |tenantId|String|是|租户id(注意:tenantId中I大写)|是|是| |tenantId|String|是|租户id(注意:tenantId中I大写)|是|是|
-|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'​|是|是|
行 742: 行 742:
     //​租户id ​     //​租户id ​
     tenantId: '', ​       tenantId: '', ​  
-    //环信客户互动云域,固定值,请按照示例配置+    //环信客云域,固定值,请按照示例配置
     domain: '//​kefu.easemob.com', ​                   ​     domain: '//​kefu.easemob.com', ​                   ​
     //​您网站上im.html文件的完整路径     //​您网站上im.html文件的完整路径
行 766: 行 766:
  
 注:使用浏览器打开网址后,右键点击页面,并选择“查看源代码”即可查看详细配置信息。 注:使用浏览器打开网址后,右键点击页面,并选择“查看源代码”即可查看详细配置信息。
-