网页渠道集成

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

介绍

网页插件支持管理员直接设置聊天窗口的各种功能并预览；（注：旧版网页插件已停止维护，如您仍在使用，请尽快联系我们为您免费升级至新版网页插件。

新版网页插件

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

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

渠道管理-网页插件

前提条件

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

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

设置网页插件

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

接入方式

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

方式1：集成网页插件

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

英文版集成网页插件：

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

在您的网站上插入代码示例（请将configId换成您自己租户上的h5渠道对应的configId值）：

<script src='//kefu.sh.absoloop.com/webim/easemob.js?configId=c612d953-f3a9-4aaa-aab7-c027cbebc1b2'></script>

最简集成完成Demo样例如下：配置示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>环信客服云-h5渠道最简接入Demo</title>
	</head>
	<body>
		<!-- 此处展示您的网站内容 -->
	</body>
	<!-- 注：请将下面这行的configId值换成您自己租户里的h5对应渠道的configId值 -->
	<script src='//kefu.sh.absoloop.com/webim/easemob.js?configId=c612d953-f3a9-4aaa-aab7-c027cbebc1b2'></script>
</html>

方式2：集成网页链接

您可以直接将h5网页的链接挂载在您现有的网站上，可通过a链接或者按钮等绑定，当访客点击按钮或链接时，即可打开我们的网页访客端，通过这种网页链接的方式将客服聊天页面快速便捷地集成到您到网站。

网页链接示例：

https://kefu.sh.absoloop.com/webim/im.html?configId=c612d953-f3a9-4aaa-aab7-c027cbebc1b2

最简集成完成Demo样例如下：配置示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>环信客服云-h5渠道最简接入Demo</title>
	</head>
	<body>
		<a href="https://kefu.sh.absoloop.com/webim/im.html?configId=c612d953-f3a9-4aaa-aab7-c027cbebc1b2" target="_blank" title="联系客服">联系客服</a>
	</body>
</html>

注意：

en-US区分大小写。
如果您有关于参数加密传输的安全合规要求，请联系我们商务，为您做定制化的加密传输方案。

样式设置

广告栏设置

文本模式：

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

信息栏（文本）

导航菜单模式：

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

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

信息栏（自定义导航菜单）

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

导航菜单示例

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

企业形象展示位

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

企业形象展示

选择主题风格

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

主题风格

H5网页标题

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

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

自动邀请

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

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

注意：

加载configId时，只能在easemobim.config={}里配置使用，easemobim.bind()配置的configId不生效
只能使用easemob.js方式集成

功能设置

启用留言

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

下班留言设置

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

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

满意度评价邀请方式

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

发送附件功能

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

主动评价功能

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

会话事件提示

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

消息同步功能

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

最小化窗口功能

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

注：H5网页不支持。

提示音

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

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

窗口拖拽功能

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

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

转人工客服

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

指定技能组

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

指定关联

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

输入框上方快捷操作

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

跳转链接：点击时，在新的标签页打开指定链接。可配置一些活动说明或用户通知类，点击跳转至详情。
发送消息：可简短描述访客常见操作问题，点击此快捷操作时系统以访客身份自动发送问题，可在机器人知识库中预设相关问题的答案，自动回复访客。
转人工：可配置转人工的业务入口，比如“投诉”，点击投诉时就会转人工。
评价：点击时进行服务评价。
弹出窗口：此功能可以实现访客进入聊天页面时，自动弹出例如订单列表弹窗，当访客不需时可以关闭弹窗，也可以在会话过程中，访客自行打开弹窗，点击弹窗内容实现消息上屏等操作，iframe支持动态传参、自行控制初始打开或关闭等多种操作。（注：iframe页面内部显示内容需业务系统自行开发）。

h5访客端弹窗显示效果如下（如需做复杂场景下的开发，请联系商务人员进行对接支持）：

H5工具栏扩展操作

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

侧边栏设置

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

pc端访客端样式：

访客pc端信息栏样式

移动端访客端样式：

访客移动端信息栏样式

常见问题

网页插件-侧边栏设置，用户可手动添加常见问题，常见问题支持2种类型

类型1：单击上屏，此种仅需管理员维护好常见问题标题即可，访客点击常见问题标题后，点击的内容会上屏，机器人接待后即可给予对应的回复；
类型2：想下展开，此种需要管理员同时维护好常见问题列表及答案，维护完成后，即可在访客端展示常见问题列表，访客可点击问题标题，即可展开查看对应答案。

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

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

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

网页插件-常见问题

自助服务

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

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

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

网页插件-自助服务

添加自助服务：

添加自助服务

访客端侧边栏样式

PC端样式说明：

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

访客pc端信息栏样式

移动端样式说明：

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

访客移动端信息栏样式

高级功能（聊天窗口）

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

自定义“联系客服”按钮

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

具体实现方法：设置 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.sh.absoloop.com/webim/easemob.js'></script>

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

参数解释：

参数	类型	必选	描述
configId	String	是	设置为您的网页插件页面显示的configId的值
hide	Boolean	否	是否隐藏小的悬浮按钮，默认值：false（不隐藏）
autoConnect	Boolean	否	自动连接，例如：false

设置聊天窗口

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

配置示例：

<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.sh.absoloop.com/webim/easemob.js'></script>

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

参数解释：

参数	类型	必选	描述
configId	String	是	设置为您的网页插件页面显示的configId的值
buttonText	String	否	设置小按钮的文案，例如：'联系客服'
dialogWidth	String	否	聊天窗口宽度，默认值：'360px'
dialogHeight	String	否	聊天窗口高度，默认值：'550px'
dialogPosition	Object	否	聊天窗口初始位置，坐标以视口右边距和下边距为基准，默认值：{ x: '10px', y: '10px' }

展示样式：

指定技能组

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

<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.sh.absoloop.com/webim/easemob.js'></script>

特殊说明：

1、“指定客服”比“指定技能组”的优先级高。

2、若同时指定客服和技能组，则会话分配给指定的客服。只要指定的客服已登录，无论该客服处于各种状态下，且无论是否配置机器人优先接待，此会话均会强制直接分配给此客服接起。

3、对应的指定客服处于未登录状态下，该会话依然会被正常创建并指向给该坐席。

参数解释：

参数	类型	必选	描述
configId	String	是	设置为您的网页插件页面显示的configId的值
agentName	String	否	指定客服，例如：'kefu@123.com'

显示访客信息

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

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

配置示例：

<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    configId: '304fe7b6-3046-416b-b169-0398f647b90e',
    visitor: {         
        userNickname: 'Tom King',	// 昵称
        trueName: 'Tom',	// 姓名        
        qq: '131218512',	// QQ
        weixin:'dyj13121166188',  //微信号
        phone: '13121166188',	// 手机
        email: 'xiaoleng@easemob.com',	//邮箱        
        companyName: 'easemob',		// 公司
        description: '意向客户',	//描述
        userDefineColumn: '{"ext01":"扩展字段01","ext02":"扩展字段02"}'
        tags:[  
          'vip1',
          'vip2'
        ]
    }
};
</script>
<script src='//kefu.sh.absoloop.com/webim/easemob.js'></script>

注意：

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

参数解释：

参数	类型	必选	描述
configId	String	是	设置为您的网页插件页面显示的configId的值
visitor	Object	否	访客信息

自定义字段传参集成用户信息

配置示例

<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，以及昵称等信息写入网页插件，以便用户发起咨询时，能够在环信客服云识别对应的用户。

执行以下步骤：

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

配置示例：

<script src='//kefu.sh.absoloop.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（默认使用客服快速关联appkey）：
- https://a1-vip5.easemob.com/orgName/appName/token（客服快速关联appkey）
- https://a1.easemob.com/orgName/appName/token（北京集群）;
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"
    }
}

注意：

需要在取得im用户名和token之后，才能调用 window.easemobim.bind(config) 来初始化网页插件
调用 window.easemobim.bind(config) 之前要确保 easemob.js 已加载

参数解释：

参数	类型	必选	描述
configId	String	是	设置为您的网页插件页面显示的configId的值
user	Object	否	用户信息，用于集成用户体系
visitor	Object	否	访客信息

发送订单/轨迹消息

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

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

<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
    configId: '304fe7b6-3046-416b-b169-0398f647b90e',
    //聊天窗口加载成功回调
    onready: function () {  
            传递访客的订单消息                    
            easemobim.sendExt({
                ext:{
                    "imageName": "mallImage3.png",
                    "type": "custom",  //custom代表自定义消息，无需修改         
                    "msgtype": {
                        "order": {
                            "img_url": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0502648b-4c64-4040-8751-325cba157ed0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696555838&t=dbe8e5c6025acb5f90f3a5fad0721b59",  //订单显示的图片
                            "title": "1-3岁宝宝上衣",   //订单标题
                            "desc": "适合1-3岁的宝宝穿的连体衣", //订单描述
                            "order_title":"订单号：123456789012345678901234567890",
                            "price": "59.90元",  //订单价格，不需要本项时可以直接注释掉本行
                            "item_url": "https://www.baidu.com?s=order_sn/123123"  //点击订单后跳转地址
                        }
                    }
                }
            });
    },
};
</script>
<script src='//kefu.sh.absoloop.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",
                    "type": "custom",  //custom代表自定义消息，无需修改
                    "msgtype": {
                        "track":{
                            "title":"我正在看：",  //消息标题
                            "price":"¥: 235.00",  //价格，不需要可以直接注释掉本行
                            "desc":"女装小香风气质蕾丝假两件短袖",  //描述内容
                            "img_url": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0502648b-4c64-4040-8751-325cba157ed0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696555838&t=dbe8e5c6025acb5f90f3a5fad0721b59",  //显示的图片地址
                            "item_url":"https://www.yourdomain.com/item/a.html"  //消息链接点击后的跳转地址
                        }
                    }
                }
            });
    },
};
</script>
<script src='//kefu.sh.absoloop.com/webim/easemob.js'></script>

订单/轨迹消息在PC端浏览器里展示样式如下所示：

订单/轨迹消息在手机端浏览器里展示样式如下所示：

参数解释：

参数	类型	必选	描述
configId	String	是	设置为您的网页插件页面显示的configId的值
onready: function () { }	Function	否	聊天窗口加载成功回调
onmessage: function ( message ) { }	Function	否	收消息回调，只对当前打开的聊天窗口有效，当访客收到来自系统消息、机器人消息、坐席消息均会触发此回调
onsessionclosed: function () { }	Function	否	会话结束事件回调
onsessioncreat: function () { }	Function	否	会话创建事件回调

注意事项：

订单消息或者轨迹消息里如果某个字段不需要，直接去掉该字段即可，例如不需要消息可点击，则去掉“item_url”字段即可；
订单消息和轨迹类型消息是两种类型消息，其字段和标识是不一致的，请注意区分；
默认H5访客端是看不到自己发送的轨迹消息的，如果需要让访客自己看到，则需要在管理员模式》设置》在线客服》功能设置》访客端里开启下访客端显示订单轨迹的开关，如下所示：
如果您在对接过程中还有疑问或者问题，请联系我们的商务或CSM为您提供服务支持!

访客端自动/手动弹窗

此功能可以实现访客进入聊天页面时，自动弹出例如订单列表弹窗，当访客不需时可以关闭弹窗，也可以在会话过程中，访客自行打开弹窗，点击弹窗内容实现消息上屏等操作，弹窗iframe支持动态传参、自行控制初始打开或关闭等多种操作。（注：iframe页面内部显示内容需业务系统自行开发，如有需要请联系环信商务人员为您提供对接技术支持。）

支持业务标识路由

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

配置示例：

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

客服系统侧业务标识路由规则配置：

访客端直接渲染聊天页面

1、如果您希望访客进入到你们系统中以后，当需要发起聊天后，可以直接进入到聊天详情页，跳转事件和时机由你们自由控制，且访客退出聊天页面时，可以自由返回到任何的你们指定的页面，那么我们也提供这种场景下的集成

配置示例：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
		<title>JS方式集成H5访客端直接渲染内容</title>

	</head>

	<body>

	</body>

	<script>
		
		console.log("JS代码开始加载");

		//访客端初始化集成代码如下
		window.easemobim = window.easemobim || {};

		easemobim.config = {
			hide: true,
			autoConnect: true,
			/* 控制窗口的宽高显示 */
			dialogWidth: '100%',
			dialogHeight: '100%',
			dialogPosition: {
				x: '0px',
				y: '0px'
			},
			hideKeyboard: true, //true会隐藏右上角的键盘上下调整图标

			routingRuleFlag: "D0", //此处对应业务信息指定里配置的 路由标识

			/* 此处负责传递用户信息 */
			visitor: {
				userNickname: '王老师', // 昵称
				trueName: '黄金001', // 姓名
				qq: '12345678', // QQ
				weixin: 'lixiaohuan', //微信
				phone: '18812345678', // 手机
				companyName: '环信', // 公司
				email: 'xiaoleng@easemob.com', //邮箱
				description: '卖家;LV1;普通卖家;', //描述
				userDefineColumn: '{"Platformlicensing":"Platformlicensing","sellerId":"sellerId111","itemcode":"itemcode111"}', //针对自定义字段的内容传输，需要客服系统中先行配置扩展字段

			},

			//捕捉各种回调事件
			onopen: function() {
				console.log("【onopen】聊天窗口打开");
			},

			//聊天窗口加载成功回调
			onready: function() {
				console.log("【onready】聊天窗口加载完成");

				/* 传订单-支持发送多个信息，此种方式为自动发送，不需要自动发送，直接注释掉代码即可*/
				easemobim.sendExt({
					ext: {
						"imageName": "mallImage3.png",
						//custom代表自定义消息，无需修改
						"type": "custom",
						"msgtype": {
							"order": {
								"title": "已完成的订单",
								"price": "198元", //价格
								"desc": "端午节粽子", //订单描述
								"order_title": "订单号：123456789012345678901234567890",
								"img_url": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0502648b-4c64-4040-8751-325cba157ed0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696555838&t=dbe8e5c6025acb5f90f3a5fad0721b59",
								"item_url": "https://www.baidu.com?s=order_sn/123123"
							}
						}
					}
				});


				//传递访客端浏览轨迹
				easemobim.sendExt({
					ext: {
						"imageName": "mallImage3.png",
						"type": "custom", //custom代表自定义消息，无需修改
						"msgtype": {
							"track": {
								"title": "我正在看：", //消息标题
								"price": "¥: 235.00", //价格，不需要可以直接注释掉本行
								"desc": "女装小香风气质蕾丝假两件短袖", //描述内容
								"img_url": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0502648b-4c64-4040-8751-325cba157ed0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696555838&t=dbe8e5c6025acb5f90f3a5fad0721b59", //显示的图片地址
								"item_url": "https://www.yourdomain.com/item/a.html" //消息链接点击后的跳转地址
							}
						}
					}
				});

			},

			/* 聊天窗口关闭回调 */
			onclose: function() {
				console.log("【onclose】窗口即将关闭，感谢您的咨询");
			},

			/* 满意度评价提交回调 */
			onEvaluationsubmit: function() {
				console.log("onEvaluationsubmit")
			},

			/* 收消息回调，只对当前打开的聊天窗口有效 */
			onmessage: function() {
				console.log("收到 onmessage");
			},

			/* 会话结束回调 */
			onsessionclosed: function() {
				console.log("onsessionclosed")
			},
			// 会话创建成功的回调
			onsessioncreat: function() {
				console.log("oncreat");

			}
		};
	</script>

	<script>
		//增加一个监听，确保easemob.js文件加载之后再执行
		function onScriptLoad() {
			console.log('easemob.js文件已加载完成!');
			easemobim.bind({
				configId: "b8062fff-aa52-4cea-929a-547366bfc6e2"
			}); //执行关键的configId绑定操作，此处的configId请换成您自己的网站渠道ID
		}
	</script>

	<!-- 核心js文件加载 -->
	<script src='//kefu.sh.absoloop.com/webim/easemob.js' defer onload="onScriptLoad()"></script>

</html>

注意事项：

此种方式集成的核心就是一定确保configId的绑定事件，一定要在easemob.js加载完成之后，开始执行，不然会引发绑定异常，从而导致页面加载失败。
上述demo里包含有页面直接渲染大小控制、访客自定义身份传参、访客进线自动发送订单或轨迹消息等功能
此种集成方式，本部分代码需要放在您自己的服务器页面上，访客进入此页面后，将直接渲染聊天窗发起沟通
关于网页渠道集成的更多问题，欢迎您随时咨询我们，我们将为您提供及时的帮助！

高级功能（H5网页）

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

指定客服

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

配置示例：

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

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

参数解释：

参数	类型	必选	描述
configId	String	是	设置为您的网页插件页面显示的configId的值
agentName	String	否	指定客服，例如：'kefu@123.com'

隐藏键盘图标

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

配置示例：

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

参数解释：

参数	类型	必选	描述
configId	String	是	设置为您的网页插件页面显示的configId的值
hideKeyboard	Boolean	否	是否隐藏H5右上角的键盘图标，默认值：false（不隐藏）

获取微信公众号的粉丝信息

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

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

配置示例：

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

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

参数解释：

参数	类型	必选	描述
configId	String	是	设置为您的网页插件页面显示的configId的值
wechatAuth	Boolean	否	是否获取微信授权，例如：true
appid	String	否	微信公众号的ID，例如：'wx1e7ed77036581061'

定制开发模式支持的配置项

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

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

参数	类型	必选	描述	桌面网页是否支持	移动端网页是否支持
configId	String	是	设置为您的网页插件页面显示的configId的值	是	是
domain	String	否	环信客服云域，必须配置为'//kefu.sh.absoloop.com'	是	是
agentName	String	否	指定坐席，例如：'kefu@123.com'	是	是
user	Object	否	用户信息，用于集成用户体系	是	是
visitor	Object	否	访客信息	是	是
language	String	否	访客端展示语言，不填写时默认为中文，例如需要英文展示传en即可	是	是
autoConnect	Boolean	否	自动连接，例如：false	是	是
buttonText	String	否	设置小按钮的文案，例如：'联系客服'	是	是
hide	Boolean	否	是否隐藏小的悬浮按钮，默认值：false（不隐藏）	是	是
hideKeyboard	Boolean	否	是否隐藏H5右上角的键盘图标，默认值：false（不隐藏）	否	是
dialogWidth	String	否	聊天窗口宽度，默认值：'360px'	是	否
dialogHeight	String	否	聊天窗口高度，默认值：'550px'	是	否
dialogPosition	Object	否	聊天窗口初始位置，坐标以视口右边距和下边距为基准，默认值：{ x: '10px', y: '10px' }	是	否
onmessage: function ( message ) { }	Function	否	收消息回调，只对当前打开的聊天窗口有效，，当访客收到来自系统消息、机器人消息、坐席消息均会触发此回调	是	是
onready: function () { }	Function	否	聊天窗口加载成功回调	是	是
onopen: function () { }	Function	否	聊天窗口打开回调	是	是
onclose: function () { }	Function	否	聊天窗口关闭回调	是	是
onsessioncreat: function () { }	Function	否	会话创建事件回调，例如访客发送首条消息后会话成功建立起来后会触发此回调事件	是	是
onsessionclosed: function () { }	Function	否	会话结束事件回调	是	是
onEvaluationsubmit:function(){}	Function	否	满意度评价提交回调	是	是

APP里通过WebView集成h5访客端

如果您想直接在app里嵌入我们的h5访客端页面，以最小的技术投入和最快的时间来实现快速投放给用户使用，我们也支持此种方式集成来满足您的使用，不过需要注意的是由于app端嵌入的h5页面，当需要使用到图片、视频等文件的上传功能时，app端会有对应的限制，需要您对集成部分的代码做下改造才能保证文件上传的功能可正常使用：
我们为您提供了一个基于java语言的demo文件，方便您了解如果进行集成，WebViewActivity.java文件代码如下：

package com.example.zarah.testmyself;

import android.annotation.TargetApi;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.os.Environment;
import android.os.Handler;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.DownloadListener;
import android.webkit.JsResult;
import android.webkit.PermissionRequest;
import android.webkit.ValueCallback;
import android.webkit.WebBackForwardList;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageButton;
import android.widget.TextView;

import java.io.FileInputStream;

public class WebViewActivity extends Activity {


    public ValueCallback<Uri> mUploadMessage;
    public ValueCallback<Uri[]> mUploadMessageForAndroid5;

    public final static int FILECHOOSER_RESULTCODE = 1;
    public final static int FILECHOOSER_RESULTCODE_FOR_ANDORID_5 = 2;

    ProgressDialog progressBar;

    private WebView webview;
    private ImageButton btnBack;
    private TextView titleBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);
        initView();
    }

    private void initView() {
        webview = findViewById(R.id.webview);
        titleBar = findViewById(R.id.title);
        btnBack = findViewById(R.id.back);
        btnBack.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                finish();
            }
        });
        progressBar = new ProgressDialog(this);
        progressBar.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        webview.getSettings().setJavaScriptEnabled(true);
//        webview.addJavascriptInterface();//本地java对象映射给js调用
        webview.getSettings().setAppCacheEnabled(false);
        webview.getSettings().setDomStorageEnabled(true);
        webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        // 设置可以支持缩放
        webview.getSettings().setSupportZoom(true);
        // 设置出现缩放工具
        webview.getSettings().setBuiltInZoomControls(true);
//扩大比例的缩放
        webview.getSettings().setUseWideViewPort(true);
//自适应屏幕
        webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        webview.loadUrl("https://kefu.easemob.com/webim/im.html?configId=14bdb04a-bdea-45f5-8560-a2656b4dd7be");
//        webview.reload();
        webview.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
//                Log.e("WebviewActivity",request+"");
                return true;
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                //提示错误

            }
        });

        webview.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
                //实现下载
                //跳转浏览器下载，也可以自己去实现下载类去下载
                Uri uri = Uri.parse("");
                Intent intent = new Intent(Intent.ACTION_VIEW,uri);
                startActivity(intent);
            }
        });

        webview.setWebChromeClient(new WebChromeClient() {

            @Override
            public void onPermissionRequest(final PermissionRequest request) {
                WebViewActivity.this.runOnUiThread(new Runnable(){
                    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
                    @Override
                    public void run() {
                        request.grant(request.getResources());
                    }
                });

            }

            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                //title显示
//                if(title.equals("kefu.easemob.com/webim/im.html?configId=14bdb04a-bdea-45f5-8560-a2656b4dd7be"))
                titleBar.setText(title);
            }

            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                if (newProgress == 100) {
                    handler.sendEmptyMessage(1);//如果全部载入，隐藏进度对话框
                }

                super.onProgressChanged(view, newProgress);
            }

            //扩展支持alert事件
            @Override
            public boolean onJsAlert(WebView view, String url, String message,
                                     JsResult result) {
                AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
                builder.setTitle("提示").setMessage(message).setPositiveButton("确定", null);
                builder.setCancelable(false);
                builder.setIcon(R.mipmap.ic_launcher);
                AlertDialog dialog = builder.create();
                dialog.show();
                result.confirm();
                return true;
            }

            //扩展浏览器上传文件
            //3.0++版本
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
                openFileChooserImpl(uploadMsg);
            }

            //3.0--版本
            public void openFileChooser(ValueCallback<Uri> uploadMsg) {
                openFileChooserImpl(uploadMsg);
            }

            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
                openFileChooserImpl(uploadMsg);
            }

            // For Android > 5.0
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> uploadMsg, WebChromeClient.FileChooserParams fileChooserParams) {
                openFileChooserImplForAndroid5(uploadMsg);
                return true;
            }

        });


    }

    private void openFileChooserImpl(ValueCallback<Uri> uploadMsg) {
        mUploadMessage = uploadMsg;
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);
        i.addCategory(Intent.CATEGORY_OPENABLE);
        i.setType("image/*");
        startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
    }

    private void openFileChooserImplForAndroid5(ValueCallback<Uri[]> uploadMsg) {
        mUploadMessageForAndroid5 = uploadMsg;
        Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
        contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
        contentSelectionIntent.setType("image/*");

        Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
        chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
        chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");

        startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE_FOR_ANDORID_5);

//        Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);// 启动系统相机
//        Uri photoUri = Uri.fromFile(new File(Environment.getExternalStorageDirectory().getPath()+ "/" + "temp.png")); // 传递路径
//        intent.putExtra(MediaStore.EXTRA_OUTPUT, photoUri);// 更改系统默认存储路径
//        startActivityForResult(intent, FILECHOOSER_RESULTCODE_FOR_ANDORID_5);

    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (webview.canGoBack() && event.getKeyCode() == KeyEvent.KEYCODE_BACK) {
            //获取历史列表
            WebBackForwardList mWebBackForwardList = webview.copyBackForwardList();
            //判断当前历史列表是否最顶端，其实canGoBack已经判断过
            if (mWebBackForwardList.getCurrentIndex() > 0) {
                webview.goBack();
                return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
        if (requestCode == FILECHOOSER_RESULTCODE) {
            if (null == mUploadMessage)
                return;
            Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
            mUploadMessage.onReceiveValue(result);
            mUploadMessage = null;
        } else if (requestCode == FILECHOOSER_RESULTCODE_FOR_ANDORID_5) {
            FileInputStream fis = null;
            String path = Environment.getExternalStorageDirectory().getPath()+ "/" + "temp.png";
//
            if (null == mUploadMessageForAndroid5)
                return;
//            try {
//                fis = new FileInputStream(Environment.getExternalStorageDirectory().getPath()+ "/" + "temp.png");
//            } catch (FileNotFoundException e) {
//                e.printStackTrace();
//            }
            Uri result = (intent == null || resultCode != RESULT_OK) ? null : intent.getData();
            if (result != null) {
                mUploadMessageForAndroid5.onReceiveValue(new Uri[]{result});
            } else {
                mUploadMessageForAndroid5.onReceiveValue(new Uri[]{});
            }
            mUploadMessageForAndroid5 = null;
        }
    }


    private Handler handler = new Handler() {

        public void handleMessage(android.os.Message msg) {//定义一个Handler， 用于处理下载线程与UI间通讯
            if (!Thread.currentThread().isInterrupted()) {
                switch (msg.what) {
                    case 0:
                        progressBar.show();//显示进度框
                        break;
                    case 1:
                        progressBar.hide();//隐藏进度对话框不可使用dismiss()、cancel()，否则再次调用show()时,显示的对话框小圆圈不会动
                        break;
                }
            }
            super.handleMessage(msg);
        }

        ;
    };


}

目录

网页渠道集成

介绍

新版网页插件

前提条件

设置网页插件

接入方式

方式1：集成网页插件

方式2：集成网页链接

样式设置

广告栏设置

企业形象展示位

选择主题风格

H5网页标题

自动邀请

功能设置

启用留言

下班留言设置

满意度评价邀请方式

发送附件功能

主动评价功能

会话事件提示

消息同步功能

最小化窗口功能

提示音

窗口拖拽功能

转人工客服

指定技能组

指定关联

输入框上方快捷操作

H5工具栏扩展操作

侧边栏设置

常见问题

自助服务

访客端侧边栏样式

高级功能（聊天窗口）

自定义“联系客服”按钮

设置聊天窗口

指定技能组

指定客服

显示访客信息

自定义字段传参集成用户信息

集成用户体系

发送订单/轨迹消息

访客端自动/手动弹窗

支持业务标识路由

访客端直接渲染聊天页面

高级功能（H5网页）

指定客服

隐藏键盘图标

获取微信公众号的粉丝信息

定制开发模式支持的配置项

APP里通过WebView集成h5访客端