网页渠道集成

网页插件配置方式升级。支持在客服工作台创建多个网页插件，分别设置每个网页插件的功能，并对网页聊天窗口的实际效果进行预览。

网页插件分为新版和旧版两种。新版网页插件支持管理员直接设置聊天窗口的各种功能并预览；旧版网页插件需要工程师通过参数配置聊天窗口的功能。建议尽快升级至新版网页插件。

新版网页插件有如下特点：

• 多个网页插件：支持添加多个网页插件，并设置不同的功能，用于不同的网页。
• 极简集成：支持在客服工作台设置网页插件的UI、功能，只需在您的网页添加一行代码即可。
• 效果预览：支持随时预览网页插件的实际效果。
• 兼容性：兼容旧版网页插件的代码集成方式，升级新版后，不影响已有的网页聊天窗口功能。

可以自定义聊天窗的颜色主题、信息栏是否显示和显示内容、企业形象是否展示以及展示内容。

进入“管理员模式 > 渠道管理 > 网页”，点击“升级新版网页插件”按钮，了解新版网页插件功能后，确认升级至新版网页插件。

网页插件依赖环信客服云中的APP关联收发消息。

• 对于在kefu.easemob.com注册的用户：环信已为您创建了一个隐藏的“体验关联”，直接在您的网页添加JS代码，就可以实现与客服云对接。
• 对于其他用户（多租户系统的用户）：请您登录环信客服云后，选择“管理员模式 > 渠道管理 > 手机APP”，在该页面依次点击“添加APP关联”和“快速创建”，环信将为您创建一个APP关联。该关联可以作为网页访客端收发消息的通道，也可用于APP渠道集成。

可以在客服工作台设置网页插件的接入方式、样式设置、功能设置、信息栏设置。除特殊说明外，以下设置对PC端、移动端聊天窗口和H5网页均生效。

支持集成网页插件和集成网页链接两种方式。

在“管理员模式 > 渠道管理 > 网页 > 接入方式”页面，将网页插件的代码复制并粘贴到您的网站的</body>标签之前，保存并发布。

英文版集成网页插件：

1. 进入“客服模式 > 客服信息”页面，将系统语言修改为英文。
2. 进入“Admin mode > Channels > web”页面，拷贝网页插件的代码，并插入您的网站的HTML源码的</body>标签之前。

代码示例：

<script src='//kefu.easemob.com/webim/easemob.js?configId=982d8f2d-06db-49ab-9e14-673c151172b6'></script>

使用网页链接将客服聊天页面集成到您到网站，即可完成客服云的快速接入。

网页链接示例：

https://kefu.easemob.com/webim/im.html?configId=982d8f2d-06db-49ab-9e14-673c151172b6

注意：en-US区分大小写。

文本模式：

开关开启，可以设置广告消息，并展示在聊天窗口。

导航菜单模式：

支持将文本信息栏切换为自定义导航菜单，并展示在聊天窗口。自定义导航菜单包含一级菜单和二级菜单，可创建最多3个一级菜单，每个一级菜单下可创建最多5个二级菜单。可在菜单上设置图文消息（从素材库选择），当访客点击菜单项时，自动向访客发送对应的图文消息。

开关打开时，同时将访客对导航菜单的选择作为轨迹消息发送给客服，并创建会话。

访客端示例（导航菜单显示在聊天窗口上方）：

注：自定义导航菜单为企业版、旗舰版功能。

开关开启，可以设置企业品牌广告，并展示在聊天窗口。

选择聊天窗口和悬浮按钮的颜色主题。

设置H5网页在浏览器页签中显示的名称。

注：该功能只对H5网页生效。

开关开启，网页访客端可自动弹出邀请窗口，邀请访客加入会话。

配置窗口可配置邀请机制及邀请样式。

开关开启，将在聊天窗口显示“留言”按钮，允许客户在聊天过程中提交留言。

设置下班后，关闭客服或机器人接待时，访客点击联系客服按钮：

• 进入留言页面
• 展示默认消息（需要设置消息内容）
• 进入聊天窗口

可选择“发送系统消息”或“主动弹出邀请”两种邀请评价方式。

开关开启将允许客户在聊天过程中发送附件（不限类型的文件）。

开关开启，将在聊天窗口显示“评价客服”按钮，允许客户在聊天过程中主动进行满意度评价。

开关开启，将允许客户在聊天窗口查看会话事件，如会话开始、转接、结束等。

开关开启，将允许客户打开多个窗口时收到新消息通知。

开关开启，将在聊天窗口显示“最小化”按钮，允许客户最小化窗口。

注：H5网页不支持。

开关开启，将在聊天窗口显示“提示音”按钮，访客收到新消息时会有声音提示。该按钮允许客户开启/关闭提示音。

注：移动端浏览器不支持。

开关开启，将允许客户拖拽聊天窗口。

注：H5网页、移动端浏览器不支持。

开关开启，机器人接待会话时，将在聊天窗口显示“转人工”按钮，允许客户点击按钮联系人工客服。

若指定技能组，客户发起的会话由指定的技能组接待。若不指定，客户发起的会话按系统默认规则分配。

若指定关联，该网页插件由该关联接入客服云。若不指定，该网页插件由系统分配的关联接入客服云。

支持自定义访客端输入框上方快捷操作，最多可配置16个操作，支持跳转链接、发送消息、转人工、评价行为，可将访客常见问题或快捷业务入口配置在这里。

• 跳转链接：点击时，在新的标签页打开指定链接。可配置一些活动说明或用户通知类，点击跳转至详情。
• 发送消息：可简短描述访客常见操作问题，点击此快捷操作时系统以访客身份自动发送问题，可在机器人知识库中预设相关问题的答案，自动回复访客。
• 转人工：可配置转人工的业务入口，比如“投诉”，点击投诉时就会转人工。
• 评价：点击时进行服务评价。

• 背景：H5端由于设备原因，除了输入框和选择表情在工具栏上直接展示，其他的操作都要点击+才能看到。这里说的工具栏扩展操作就是指点击+之后看到的操作，可以支持自定义。
• 功能说明：支持自定义扩展操作，最多可配置16个操作，支持跳转链接、弹出窗口、拍照/选照片、拍视频/选视频、评价行为，可将快捷业务入口配置在这里。
  • 跳转链接：点击时，跳转至指定链接。可配置一些活动说明或用户通知类，点击跳转至详情。
  • 弹出窗口：点击时，在当前页面弹出60%高度窗口，支持嵌入iframe页面，比如：商品/订单。iframe页面可按扩展消息格式说明发送商品/订单轨迹消息格式集成，支持访客一键发送商品/订单卡片消息。
  • 拍照/选照片：点击可拍照/选照片。
  • 拍视频/选视频：点击可拍视频/选视频。
  • 评价：点击可触发服务评价。

网页插件-侧边栏设置，可设置侧边栏宽度、常见问题、自助服务及iframe页面。开启后，访客端右侧可显示自助服务及常见问题，节省人力，提高客户服务效率。 侧边栏配置完成后，打开侧边栏开关，侧边栏即可生效。

pc端访客端样式：

移动端访客端样式：

网页插件-侧边栏设置，用户可手动添加常见问题，添加后在访客端展示常见问题列表，访客可点击问题查看对应答案。

常见问题仅支持文字类型（问题描述最多20个字符，答案描述最多1000个字符）。

开关打开时，访客端会自动显示常见问题。关闭时，不显示常见问题。

开启常见问题后，访客端样式请参考：访客端信息栏样式

网页插件-侧边栏设置，新增自助服务功能，用户可通过设定业务名称、业务链接、业务图标添加自助服务。

开关打开时，访客端会自动显示自助服务。关闭时，不显示自助服务。最多可以配置 8 个自助服务。

开启自助服务后，访客端样式请参考：访客端信息栏样式

添加自助服务：

PC端样式说明：

1. 根据常见问题开关状态、自助服务开关状态，在访客端右侧显示或不显示常见问题列表、自助服务按钮。
2. 点击常见问题列表可以展开显示问题和答案或收起只显示问题；点击自助服务按钮，跳转至设定的URL。
3. 悬浮窗显示（集成网页插件）时，访客端宽度增加一倍，聊窗尺寸不变，聊窗右侧显示常见问题和自助服务。
4. 独立页面显示（集成网页链接）时，访客端默认显示1024*768，聊窗右侧显示常见问题和自助服务（各占一半）。

移动端样式说明：

1. 新增一个访客端落地页，显示侧边栏内容，联系客服作为悬浮按钮，点击后跳转显示聊窗（刷新页面）。
2. 悬浮窗显示（集成网页插件）时，点击悬浮按钮后：常见问题和自助服务，开关有一方打开，访客端显示新的落地页；开关均关闭，显示现有访客端页面。
3. 独立页面显示（集成网页链接）时：常见问题和自助服务，开关有一方打开，访客端显示新的落地页；开关均关闭，显示现有访客端页面。

在基础设置和样式显示设置的基础上，还可以为网页插件配置以下高级功能。

如果默认的“联系客服”按钮不符合您网站的整体风格，您可以将该按钮隐藏，更换为新的按钮。

具体实现方法：设置 hide 参数为 true，并将 easemobim.bind 方法绑定到 A 标签。

配置示例：

<a href='javascript:;' onclick='easemobim.bind({configId: "304fe7b6-3046-416b-b169-0398f647b90e"})'>快联系我</a>
<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    hide: true,
    autoConnect: false    
};
</script>
<script src='//kefu.easemob.com/webim/easemob.js'></script>

⚠️注意：当设置 hide 为 true 时，建议同时设置 autoConnect 为 true，以便访客端聊天窗口最小化时，收到新消息提醒。

参数解释：

支持设置“联系客服”按钮的文字、聊天窗口的尺寸和位置。

配置示例：

<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    configId: '304fe7b6-3046-416b-b169-0398f647b90e',
    buttonText: '联系客服',
    dialogWidth: '360px',
    dialogHeight: '550px',
    dialogPosition: { x: '10px', y: '10px' }
};
</script>
<script src='//kefu.easemob.com/webim/easemob.js'></script>

注：设定的“联系客服”按钮的文字、聊天窗口的尺寸和位置，仅PC端浏览器生效。

参数解释：

为聊天窗口指定技能组，使客户发起的会话分配到该技能组进行接待。

<script>
function sendCrmExt(){
		window.easemobim.sendExt(
			{
				// 技能组
				ext:{
					weichat:{
						queueName:"技能组名称",
						queueId:"技能组ID"
					}
				}
			}
	}

为聊天窗口指定客服，使客户发起的会话均由该客服接待。

<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    configId: '304fe7b6-3046-416b-b169-0398f647b90e',
    agentName: 'kefu@123.com'
};
</script>
<script src='//kefu.easemob.com/webim/easemob.js'></script>

注：“指定客服”比“指定技能组”的优先级高。若同时指定客服和技能组，则会话分配给指定的客服。

参数解释：

当访客发起咨询时（前提为已登录用户），网站可自动将该用户信息（如名称、手机、邮箱、QQ 等）发送给客服，并显示在聊天窗口右侧。

管理员模式 >设置 > 功能设置 >允许访客端修改客户信息 要打开，nickName不能为空。

配置示例：

<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    configId: '304fe7b6-3046-416b-b169-0398f647b90e',
    visitor: {         
        trueName: '黎小冷',
        qq: '567**34',
        phone: '188****8888',
        companyName: '环信',
        userNickname: '我是黎小冷',
        description: '描述信息',
        email: '123456@**.com',
        tags:[  
          'vip1',
          'vip2'
        ]
    }
};
</script>
<script src='//kefu.easemob.com/webim/easemob.js'></script>

注意：

• 若再次更新 visitor 字段信息，需要访客端清除浏览器 cookie 才能正确显示更新后的用户信息。
• 在会话过程中，如果客服对访客的资料进行了编辑，则显示客服编辑后的访客资料。
• ‘tags’字段可标出VIP用户，其值可以为零到多个。

参数解释：

配置示例

<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"}',
},

userDefineColumn里边的key必须是客服系统添加的自定义字段ID才会生效。 比如：

集成用户体系，指将您的用户的环信username和password，以及昵称等信息写入网页插件，以便用户发起咨询时，能够在环信客服云识别对应的用户。

执行以下步骤：

1. 参考环信服务器端用户体系集成，获取环信后台 username 和 password，以及管理员Token。
2. 登录环信客服云，进入“管理员模式 > 渠道管理 > 手机App”页面，使用您的AppKey等信息创建App关联。
3. 进入环信客服云的“管理员模式 > 渠道管理 > 网页”页面，在您的网页插件的功能设置区域，找到指定关联，选择上一步创建的App关联。
4. 参考下述配置示例，配置configId（与上一步“网页插件”的configId一致）、您的用户的环信username和password、用户昵称等信息，集成指定用户。

配置示例：

<script src='//kefu.easemob.com/webim/easemob.js'></script>
<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    configId: '304fe7b6-3046-416b-b169-0398f647b90e',
    // 用户所在的 appKey 需要与 configId 中指定的关联的 appKey 一致
    user: {            
        // username 必填，password 和 token 任选一项填写
        username: 'webim-test-user',  
        password: 'GQWWERP46V',  
        token: 'YWMtzGo52JaqEeeELnmPrOc5h15sv_A0eRHkoOT3YpQCxx70JPTKiW4R56U-k0L6lDp3AwMAAAFebzmSdABPGgCyzGooJgc5V4LBxr0TtaAsXQld8naV_3qc-8GEDDMAHw'      
    },
    // 访客信息（可选）
    visitor: {
        trueName: '黎小冷',
        qq: '12345678',
        phone: '18812345678',
        companyName: '环信',
        userNickname: '小冷',
        description: '意向客户',
        email: 'xiaoleng@easemob.com'
    }
}
</script>

获取用户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：

{
    "grant_type":"password",
    "username":"user",
    "password":"pwd"
}

Response示例

{
    "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"
    }
}

参数解释：

通过在onready方法下调用sendExt接口发送订单或轨迹消息。

发送订单消息，请参考下文示例：

<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    configId: '304fe7b6-3046-416b-b169-0398f647b90e',
    //聊天窗口加载成功回调
    onready: function () {                  
            easemobim.sendExt({
                ext:{
                    "imageName": "mallImage3.png",
                    //custom代表自定义消息，无需修改
                    "type": "custom",           
                    "msgtype": {
                        "order": {
                            "img_url": "h\n.pn",
                            "title": "测试track1",
                            "desc": "端午节粽子四",
                            "order_title":"订单号：123456789012345678901234567890",
                            "price": "",
                            "item_url": "https://www.baidu.com?s=order_sn/123123"
                        }
                    }
                }
            });
    },
};
</script>
<script src='//kefu.easemob.com/webim/easemob.js'></script>

发送轨迹消息，请参考下文示例：

<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    configId: '304fe7b6-3046-416b-b169-0398f647b90e',
    //聊天窗口加载成功回调
    onready: function () {                  
            easemobim.sendExt({
                ext:{
                    "imageName": "mallImage3.png",
                    //custom代表自定义消息，无需修改
                    "type": "custom",           
                    "msgtype": {
                        "track":{
                            "title":"我正在看：",
                            "price":"¥: 235.00",
                            "desc":"女装小香风气质蕾丝假两件短袖",
                            "img_url":"https://www.yourdomain.com/img/a.jpg",
                            "item_url":"https://www.yourdomain.com/item/a.html"
                        }
                    }
                }
            });
    },
};
</script>
<script src='//kefu.easemob.com/webim/easemob.js'></script>

参数解释：

访客端在集成时候在easemob.config里增加字段 routingRuleFlag:“”

配置示例：

easemobim.config ={ 
//增加业务标识路由字段
configId: '84a85315-4ce7-4f5c-8fac-17e0bccbece0', routingRuleFlag:"测试的业务标识路由", }

在基础设置和样式显示设置的基础上，还可以为H5网页配置以下高级功能。

在H5网页地址中指定客服，使客户发起的会话均由该客服接待。

配置示例：

https://kefu.easemob.com/webim/im.html?configId={configId}&agentName=kefu@123.com

注：“指定客服”比“指定技能组”的优先级高。若同时指定客服和技能组，则会话分配给指定的客服。

参数解释：

H5网页右上角默认有一个键盘图标，用于切换输入框的位置。如不需要该功能，可将图标隐藏。

配置示例：

https://kefu.easemob.com/webim/im.html?configId={configId}&hideKeyboard=true

参数解释：

当前，微信的H5页面，并不会传微信公众号信息到客服端，所以客服端显示的访客ID是webim id（环信ID）。

如果您需要H5页面将微信的openid等公众号信息传至客服端，使客服端显示的访客ID包含微信的openid，可以配置参数wechatAuth=true和appid={appid}。其中，appid为微信公众号的ID。

配置示例：

https://kefu.easemob.com/webim/im.html?configId={configId}&wechatAuth=true&appid=wx1e7ed77036581061

注意：当您配置wechatAuth和appid这两个参数时，还需要在客服云的“管理员模式 > 渠道管理 > 微信”页面通过授权的方式绑定您的微信公众号。

参数解释：

下载 web 插件源码至自己的服务器，修改并引用服务器上的源码文件，实现高级定制功能。通过修改源码文件，您可以设置更多样式、图标。

需要在本地搭建一个服务器环境，使用 IP 或者域名方式访问，并且要安装 node、gulp 等工具，具体可见 web 插件源码中 gulpfile.js 和 packkage.json 文件。

1. 下载源码：https://github.com/easemob/kefu-webim/releases（选择最新版）；
2. 解压源码包，将其放到您的服务器所指向的文件目录。例如，将解压后的文件夹直接放在您的服务器根目录下，目录结构如下：

/kefu-webim-plugin_47.18.0
  |----static文件夹
  |----easemob.js
  |----im.html

将 easemob.js 引入到您网站源代码</body>标签前，并配置相应的方法和参数。定制开发模式支持的配置项和引用标准版本支持的参数的配置方法相同。

使用定制开发模式时，以下几项为必填：

<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    //设置为您的网页插件页面显示的configId的值
    configId: '304fe7b6-3046-416b-b169-0398f647b90e',
    //环信移动客服域，固定值，请按照示例配置
    domain: '//kefu.easemob.com',                    
    //您网站上im.html文件的完整路径
    path: '//www.yourdomain.com/kefu-webim-plugin_47.18.0',       
    //访客插件static的路径
    staticPath: '//www.yourdomain.com/kefu-webim-plugin_47.18.0/static',
};
</script>
<script src='//www.yourdomain.com/kefu-webim-plugin_47.18.0/easemob.js'></script>

注：domain、path、staticPath 三个参数，请填写双斜杠（//）开头的可访问的服务器路径，不要加协议头，结尾无需添加“/”。

使用定制开发版时，“管理员模式 > 渠道管理 > 网页”页面上，“网页插件”（与configId对应）的配置对桌面网页和移动端网页的聊天窗口依然生效。额外可配置的参数如下表。

如果您的网页支持在移动端浏览，访客在移动端点击“联系客服”按钮会生成H5网页，该H5网页支持的参数也如下表所示。