差别

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

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版
前一修订版
cs:300visitoraccess:web-widget [2019/06/05 12:06]
吴玉萍 [显示样式设置]
cs:300visitoraccess:web-widget [2022/06/01 09:21] (当前版本)
xiaowei [指定技能组]
行 16: 行 16:
   * 兼容性:兼容旧版网页插件的代码集成方式,升级新版后,不影响已有的网页聊天窗口功能。   * 兼容性:兼容旧版网页插件的代码集成方式,升级新版后,不影响已有的网页聊天窗口功能。
  
-{{:cs:300visitoraccess:admin-channel-web4.png?​nolink|新版网页插件}}+{{:cs:releasenote:渠道管理-网页插件.png?​nolink|渠道管理-网页插件}}
  
 === 旧版网页插件 === === 旧版网页插件 ===
行 40: 行 40:
   * 对于其他用户(多租户系统的用户):请您登录环信客服云后,选择“管理员模式 > 渠道管理 > 手机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网页生效。 
 + 
 +=== 自动邀请 === 
 + 
 +开关开启,网页访客端可自动弹出邀请窗口,邀请访客加入会话。 
 + 
 +配置窗口可配置邀请机制及邀请样式。 
 + 
 +{{:​cs:​releasenote:​图片1.png?​nolink&​850|}} 
 + 
 +<WRAP center round tip 100%> 
 + 
 +**注意:** 
 + 
 +  - 加载configId时,只能在easemobim.config={}里配置使用,easemobim.bind()配置的configId不生效 
 +  - 只能使用easemob.js方式集成 
 +</​WRAP>​
  
-设置网页插件: 
  
-  - 在“网页”页面,选择一个网页插件。 
-  - [[#​功能设置|设置网页插件的功能]]。 
-  - [[#​显示样式设置|设置网页插件的样式显示]]。 
-  - 点击“预览实际效果”按钮,对网页插件进行预览。 
-  - 点击“保存”按钮,保存该网页插件的设置。 
  
 ==== 功能设置 ==== ==== 功能设置 ====
行 106: 行 146:
   * 展示默认消息(需要设置消息内容)   * 展示默认消息(需要设置消息内容)
   * 进入聊天窗口   * 进入聊天窗口
 +
 +=== 满意度评价邀请方式 ===
 +
 +可选择“发送系统消息”或“主动弹出邀请”两种邀请评价方式。
 +
 +=== 发送附件功能 ===
 +
 +开关开启将允许客户在聊天过程中发送附件(不限类型的文件)。
  
 === 主动评价功能 === === 主动评价功能 ===
行 149: 行 197:
 若指定关联,该网页插件由该关联接入客服云。若不指定,该网页插件由系统分配的关联接入客服云。 若指定关联,该网页插件由该关联接入客服云。若不指定,该网页插件由系统分配的关联接入客服云。
  
-=== H5网页标题 ​===+=== 输入框上方快捷操作 ​===
  
-H5网页在浏览页签显示名称+支持自定义访客端输入框上方快捷操作,最多可配16个操作,支持跳转链接、发送消息、转人工、评价行为,可将访客常见问题或快捷业务入口配置在这里。 
 +  * 跳转链接:点击时,在新的标签打开指定链接。可配置一些活动说明或用户通知类,点击跳转至详情。 
 +  * 发送消息:可简短描述访客常见操作问题,点击此快捷操作时系统以访客身份自动发送问题,可人知识库预设相关问题的答案,自动回复访客。 
 +  * 转人工:可配置转人工业务入口,比如“投诉”,点击投诉时就会转人工。 
 +  * 评价:点击时进行服务评价
  
-注:该功能只对H5网页生+{{:​cs:​releasenote:​输入框上方快捷操作果.png?​nolink&​1000|}}
  
-==== 显示样式设置 ====+=== H5工具栏扩展操作 ​===
  
-=== 信息栏设置(文本) ===+  * 背景:H5端由于备原因,除了输入框和选择表情在工具栏上直接展示,其他的操作都要点击+才能看到。这里说的工具栏扩展操作就是指点击+之后看到的操作,可以支持自定义。 
 +  * 功能说明:支持自定义扩展操作,最多可配16个操作,支持跳转链接、弹出窗口、拍照/​选照片、拍视频/​选视频、评价行为,可将快捷业务入口配置在这里。 
 +      * 跳转链接:点击时,跳转至指定链接。可配置一些活动说明或用户通知类,点击跳转至详情。 
 +      * 弹出窗口:点击时,在当前页面弹出60%高度窗口,支持嵌入iframe页面,比如:商品/​订单。iframe页面可按[[cs:​300visitoraccess:​extended-message-format|扩展消息格式说明]]发送商品/​订单轨迹消息格式集成,支持访客一键发送商品/​订单卡片消息。 
 +      * 拍照/​选照片:点击可拍照/​选照片。 
 +      * 拍视频/​选视频:点击可拍视频/​选视频。 
 +      * 评价:点击可触发服务评价。
  
-开关开启,可以设置广告消息,并展示在聊天窗口。+{{:​cs:​300visitoraccess:​img_3286.png?​nolink&​300|}}
  
-{{:​cs:​300visitoraccess:​admin-channel-web10.png?​nolink|信息栏(文本)}} 
  
-=== 企业形象展示位 ​===+==== 侧边栏设置 ====
  
-开关开启,可设置企业品牌广告并展在聊天窗口+网页插件-侧边栏设置,可设置侧边栏宽度、常见问题、自助服务及iframe页面。开启后访客端右侧可显自助服务及常见问题,节省人力,提高客户服务效率。 
 +侧边栏配置完成后,打开侧边栏开关,侧边栏即可生效
  
-{{:cs:300visitoraccess:admin-channel-web11.png?​nolink|企业形象展示}}+pc端访客端样式: 
 +{{:cs:releasenote:访客pc端信息栏样式.png?​nolink|访客pc端信息栏样式}}
  
-=== 选择主题风格 ===+移动端访客端样式: 
 +{{:​cs:​releasenote:​访客移动端信息栏样式.png?​nolink|访客移动端信息栏样式 }}
  
-选择聊天窗口和悬浮按钮的颜色主+=== 常见问题 ===
  
-{{:​cs:​300visitoraccess:​admin-channel-web12.png?​nolink|主风格}}+网页插件-侧边栏设置,用户可手动添加常见问题,添加后在访客端展示常见问题列表,访客可点击问查看对应答案。
  
 +常见问题仅支持文字类型(问题描述最多20个字符,答案描述最多1000个字符)。
  
-=== 信息栏设置(导航菜单) ===+开关打开时,访客端会自动显示常见问题。关闭时,不显示常见问题。
  
-支持将文本信息栏切换为自定义导航菜单,并展示在聊天窗口。自定义导航菜单包含一级菜单和二级菜单,可创建最多3个一级菜单,每个一级菜单下可创建最多5个二级菜单。可在菜单上设置图文消息(从素材库选择)访客点击菜单项时,自动向访客发送对应的图文消+开启常见问题后,访客端样式请参考:[[#​访客端信栏样式|访客端信息栏样式]]
  
-开关打开时,同时将访客对导航菜单的选择作为轨迹消息发送给客服,并创建会话。+{{:​cs:​releasenote:​网页插件-常见问题new.png?​nolink|网页插件-常见问题}}
  
-{{:​cs:​300visitoraccess:​admin-channel-web13.png?​nolink|信息栏(定义导航菜单)}}+=== 助服务 ===
  
-访客端示例(导航菜单显示在聊天窗口上方):+网页插件-侧边栏设置,新增自助服务功能,用户可通过设定业务名称、业务链接、业务图标添加自助服务。
  
-{{:cs:300visitoraccess:admin-channel-web14.png?​nolink|导航菜单示例}}+开关打开时,访客端会自动显示自助服务。关闭时,不显示自助服务。最多可以配置 8 个自助服务。 
 + 
 +开启自助服务后,访客端样式请参考:[[#​访客端信息栏样式|访客端信息栏样式]] 
 + 
 +{{:cs:releasenote:网页插件-自助服务new.png?​nolink|网页插件-自助服务}} 
 + 
 +添加自助服务:
  
-:自定义导航菜单企业版、旗舰版功能+{{:​cs:​releasenote:​添加自助服务new.png?​nolink|添加自助服务}} 
 + 
 + 
 +=== 访客端侧边栏样式 === 
 + 
 +PC端样式说明 
 + 
 +   - 根据常见问题开关状态、助服务开关状态,在访客端右侧显示或不显示常见问题列表、自助服务按钮。 
 +   - 点击常见问题列表可以展开显示问题和答案或收起只显示问题;点击自助服务按钮,跳转至设的URL。 
 +   - 悬浮窗显示(集成网页插件)时,访客端宽度增加一倍,聊窗尺寸不变,聊窗右侧显示常见问题和自助服务。  
 +   - 独立页面显示(集成网页链接)时,访客端默认显示1024*768,聊窗右侧显示常见问题和自助服务(各占一半)。 
 + 
 +{{:​cs:​releasenote:​访客pc端信息栏样式.png?​nolink|访客pc端信息栏样式}} 
 + 
 +移动端样式说明: 
 + 
 +   - 新增一个访客端落地页,显示侧边栏内容,联系客服作悬浮按钮,点击后跳转显示聊窗(刷新页面)。 
 +   - 悬浮窗显示(集成网页插件)时,点击悬浮按钮后:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面。 
 +   - 独立页面显示(集成网页链接)时:常见问题和自助服务,开关有一方打开,访客端显示新的落地页;开关均关闭,显示现有访客端页面
  
 +{{:​cs:​releasenote:​访客移动端信息栏样式.png?​nolink|访客移动端信息栏样式}}
  
 ===== 高级功能(聊天窗口) ===== ===== 高级功能(聊天窗口) =====
行 209: 行 295:
 easemobim.config = { easemobim.config = {
     hide: true,     hide: true,
-    autoConnect: ​true    +    autoConnect: ​false    
 }; };
 </​script>​ </​script>​
行 215: 行 301:
 </​code>​ </​code>​
  
-注意:当设置 hide 为 true 时,建议同时设置 autoConnect 为 true,以便访客端聊天窗口最小化时,收到新消息提醒。+⚠️注意:当设置 hide 为 true 时,建议同时设置 autoConnect 为 true,以便访客端聊天窗口最小化时,收到新消息提醒。
  
 参数解释: 参数解释:
行 254: 行 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>​
  
 ==== 指定客服 ==== ==== 指定客服 ====
行 281: 行 385:
  
 当访客发起咨询时(前提为已登录用户),网站可自动将该用户信息(如名称、手机、邮箱、QQ 等)发送给客服,并显示在聊天窗口右侧。 当访客发起咨询时(前提为已登录用户),网站可自动将该用户信息(如名称、手机、邮箱、QQ 等)发送给客服,并显示在聊天窗口右侧。
 +
 +管理员模式 >设置 > 功能设置 >​允许访客端修改客户信息 要打开,nickName不能为空。
  
 配置示例: 配置示例:
行 296: 行 402:
         userNickname:​ '​我是黎小冷',​         userNickname:​ '​我是黎小冷',​
         description:​ '​描述信息',​         description:​ '​描述信息',​
-        email: '​123456@**.com'​+        email: '​123456@**.com'​
 +        tags:​[ ​  
 +          '​vip1',​ 
 +          '​vip2'​ 
 +        ]
     }     }
 }; };
行 306: 行 416:
   * 若再次更新 visitor 字段信息,需要访客端清除浏览器 cookie 才能正确显示更新后的用户信息。   * 若再次更新 visitor 字段信息,需要访客端清除浏览器 cookie 才能正确显示更新后的用户信息。
   * 在会话过程中,如果客服对访客的资料进行了编辑,则显示客服编辑后的访客资料。   * 在会话过程中,如果客服对访客的资料进行了编辑,则显示客服编辑后的访客资料。
 +  * ‘tags’字段可标出VIP用户,其值可以为零到多个。
  
 参数解释: 参数解释:
行 312: 行 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|}}
  
 ==== 集成用户体系 ==== ==== 集成用户体系 ====
行 319: 行 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关联。
行 352: 行 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>​
  
行 444: 行 612:
 |onsessionclosed:​ function () { }|Function|否|会话结束回调| |onsessionclosed:​ function () { }|Function|否|会话结束回调|
  
 +
 +==== 支持业务标识路由 ====
 +
 +访客端在集成时候在easemob.config里增加字段 routingRuleFlag:""​
 +
 +配置示例:
 +
 +<code html>
 +easemobim.config ={ 
 +//​增加业务标识路由字段
 +configId: '​84a85315-4ce7-4f5c-8fac-17e0bccbece0',​ routingRuleFlag:"​测试的业务标识路由",​ }
 +</​code>​
 ===== 高级功能(H5网页) ===== ===== 高级功能(H5网页) =====
  
行 547: 行 727:
  
 注:domain、path、staticPath 三个参数,请填写双斜杠(%%//​%%)开头的可访问的服务器路径,不要加协议头,结尾无需添加“/​”。 注:domain、path、staticPath 三个参数,请填写双斜杠(%%//​%%)开头的可访问的服务器路径,不要加协议头,结尾无需添加“/​”。
 +
 +
 ==== 支持的配置项 ==== ==== 支持的配置项 ====
  
行 570: 行 752:
 |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|否|会话结束回调|是|是|
 +
 +