<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
// 在这里开启手动模式(必须紧跟美洽的嵌入代码)
_MEIQIA('manualInit');
</script>
<!-- 这是你自己的 JavaScript 代码 -->
<script>
// 你可以自己的代码中选择合适的时机来调用手动初始化
_MEIQIA('init');
</script>
<!-- 在实际使用时你可能会面临很复杂的场景,但是沿着这个套路发挥吧。May force
be with you -->
有时候,也许你不想要显示美洽自带的聊天按钮,那么你可以使用
_MEIQIA('withoutBtn');
。
<script type='text/javascript'>
// 当你使用了「手动初始化」时,就可以在自己的逻辑中选择合适的时机调用 withoutBtn
// 只要是在美洽初始化之前,就可以被正确执行
_MEIQIA('withoutBtn');
_MEIQIA('init');
</script>
有时候,也许你需要在美洽网站插件加载成功后执行一些事件,那么可以使用
_MEIQIA('allSet', callback)
。
<script type='text/javascript'>
// 当你使用了「手动初始化」时,就可以在自己的逻辑中选择合适的时机调用 allSet
// 只要是在美洽初始化之前,就可以被正确执行
_MEIQIA('allSet', yourFunction);
_MEIQIA('init');
</script>
如果你想在初始化成功时获知客服的在线状态,那么可以为你编写的 callback 函数添加一个参数,美洽插件在调用它时,会返回当前的客服状态。
<!-- 我直接扩展上边例子中写的 yourFunction -->
<script type='text/javascript'>
* [yourFunction]
* @param {boolean} servability [true: 有客服在线, false: 无客服在线]
function yourFunction(servability) {
// 你可以根据自己的需求编写相应的代码
console.log('美洽网站插件初始化完毕。');
if (servability) {
console.log('有客服在线');
} else {
console.log('无客服在线');
</script>
如果你想让美洽加载成功后直接打开聊天窗口可以如下设置:
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
// 初始化成功后调用美洽 showPanel
_MEIQIA('allSet', function(){
_MEIQIA('showPanel');
</script>
<!-- 这是你的代码 -->
<script type='text/javascript'>
function handleStart() {
console.log('会话开始回调')
</script>
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
//会话开始时的回调
_MEIQIA('startConversation',handleStart)
</script>
<!-- 这是你的代码 -->
<script type='text/javascript'>
function handleEnd() {
console.log('会话开始回调')
</script>
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
//会话结束时的回调
_MEIQIA('endConversation',handleEnd)
</script>
<!-- 这是你的代码 -->
<script type='text/javascript'>
function showGuide() {
console.log('智能引导展开')
</script>
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
//智能引导展开
_MEIQIA('showSmartGuide',showGuide)
</script>
<!-- 这是你的代码 -->
<script type='text/javascript'>
function closeGuide() {
console.log('智能引导消失')
</script>
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
//智能引导消失
_MEIQIA('closeSmartGuide',closeGuide)
</script>
顾客点击 Widget 的关闭按钮时,您可以获取到该点击事件。
<!-- 这是你的代码 -->
<script type='text/javascript'>
function handleBeforeCloseWindow() {
console.log('点击了关闭')
</script>
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
//点击关闭按钮后的回调
_MEIQIA('beforeCloseWindow', handleBeforeCloseWindow);
</script>
我们目前支持以下语言:
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
//如果需要英文版,可用如下配置
_MEIQIA('language','en')
</script>
聊天链接英语版示例:
/standalone.html?eid=我是企业ID&language=en
您可以在网页插件 / 聊天链接中携带
languageLocal
参数来控制他们初始化时是否跟随顾客的浏览器语言。
Widget 启用跟随示例:
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
//如果需要英文版,可用如下配置
_MEIQIA('language','en');
//启用跟随浏览器语言,可用如下配置
_MEIQIA('languageLocal','true')
</script>
聊天链接启用跟随示例:
/standalone.html?eid=我是企业ID&language=en&languageLocal=true
当您启用了跟随,美洽会按以下优先级判断网页插件 / 聊天链接的语言:
<!-- 你可以直接在 HTML 元素中绑定 showPanel -->
<a href="javascript:void(0)" onclick="_MEIQIA('showPanel')">联系客服</a>
<!-- 当然也可以在 Javascript 中调用 -->
<script>
_MEIQIA('showPanel');
</script>
如果你想要在调用聊天窗时指定客服或客服组,只需要添加相应的参数即可。
<!-- HTML -->
<a href="javascript:void(0)" onclick="_MEIQIA('showPanel', {agentToken:
'客服智子的 Token'})">联系客服-智子</a>
<!-- Javascript -->
<script>
// 指定客服
_MEIQIA('showPanel', {
agentToken: '客服智子的 Token'
// 指定客服组
_MEIQIA('showPanel', {
groupToken: '客服组的 Token'
// 如果你同时传递了 agentToken 和 groupToken
// 那么 groupToken 将被忽略
_MEIQIA('showPanel', {
agentToken: '客服智子的 Token', // 只有我会起作用
groupToken: '客服组的 Token' // 我被抛弃了
</script>
在美洽网站插件初始化成功的前提下,调用
_MEIQIA('hidePanel')
就可以隐藏美洽聊天窗。
<!-- HTML -->
<button onclick="_MEIQIA('hidePanel')">隐藏窗口</button>
<!-- Javascript -->
<script>
_MEIQIA('hidePanel');
</script>
某些情况下,你可能希望直接以配置的形式来指定要分配的客服或客服组,那么你可以使用
_MEIQIA('assign', {})
。
assign 配置对美洽自带按钮和「打开聊天窗」接口都生效,但是当「打开聊天窗」接口本身携带了客服信息时,就会忽略 assign 的配置。
_MEIQIA('assign', { agentToken: '客服智子的 Token', // 只有我会起作用 groupToken: '客服组的 Token' // 我被抛弃了 </script>
在美洽工作台中,你可以手动为对话中的顾客添加个人信息,而通过
_MEIQIA('metadata', {})
接口,可以将这个工作自动化。
美洽默认的顾客个人信息包括:
address // 地址
age // 年龄
comment // 备注
email // 邮箱
gender // 性别
name // 名字
qq // QQ
tel // 电话
weibo // 微博
weixin // 微信
contact // 联系人
在美洽工作台中,上方传入的数据将以如下形式分类呈现:
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[i] = m[i] || function() {
(m[i].a = m[i].a || []).push(arguments)
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://static.meiqia.com/dist/meiqia.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MEIQIA');
_MEIQIA('entId', '我是企业ID');
// 在这里添加自定义事件,使用请取消注释并修改以下内容
// _MEIQIA('trackEvent','添加购物车',{'金额':'180元','数量':'2'});
</script>
有时访客点击了您网站上某个特定的聊天按钮,但是出于某些原因可能并没有主动发起对话。此时您可以通过追踪这个特定聊天按钮的点击事件来判断客户的访问意图。通过调用
_MEIQIA(' showPanel', {greeting: "消息内容"})
方法来通知客服人员,客服就可以根据消息内容来做出判断,从而更好地和客户主动展开对话,进而提高您的访客转化率。
注意: 此用法适用于自定义聊天按钮场景,仅在对话创建前生效。若开启了强制对话或者无消息访客过滤均会导致此方法无效
美洽官方的聊天按钮可以显示未读消息的数量,以及提供最近一条未读消息的预览。
如果你设置了无按钮模式,这两个数据也就无法被呈现了。但是通过
_MEIQIA('getUnreadMsg', callback);
接口,你可以从
callback
的参数中得到这些数据,用自己的方式在显示它们。
<script type='text/javascript'>
// 当你使用了「手动初始化」时,就可以在自己的逻辑中选择合适的时机调用 getUnreadMsg
// 只要是在美洽初始化之前,就可以被正确执行
_MEIQIA('getUnreadMsg', yourFunction);
_MEIQIA('init');
</script>
如果你不想使用美洽提供的邀请弹窗,那么可以用
_MEIQIA('getInviting', callback);
来获取邀请事件,然后编写自己喜欢的弹窗。
<script type='text/javascript'>
// 当你使用了「手动初始化」时,就可以在自己的逻辑中选择合适的时机调用 getInviting
// 只要是在美洽初始化之前,就可以被正确执行
_MEIQIA('getInviting', yourFunction);
_MEIQIA('init');
</script>
当你使用「获取邀请事件」接口时,可以用
_MEIQIA('rejectInvitation')
在自己编写的弹窗中触发美洽的拒绝邀请事件。
<script type='text/javascript'>
// 当你使用了「手动初始化」时
// 就可以在自己的逻辑中选择合适的时机调用 getPanelVisibility
// 只要是在美洽初始化之前,就可以被正确执行
_MEIQIA('getPanelVisibility', yourFunction);
_MEIQIA('init');
</script>
当你指定的客服不在线或无法服务时,可以通过在美洽嵌入代码之后设置
_MEIQIA('fallback', 1);
来指定不同的处理方式。
fallback 接受的参数为数字类型,目前有 1、2、3
1 // 不转接(进入留言页面)
2 // 转接到客服所属于的组
3 // 转接到全企业(这是美洽默认的处理方式)
<script type='text/javascript'>
// 当你使用了「手动初始化」时,就可以在自己的逻辑中选择合适的时机调用 fallback
// 只要是在美洽初始化之前,就可以被正确执行
_MEIQIA('fallback', 1);
_MEIQIA('init');
</script>
如果你的产品有多种形式(网页、APP),且都使用了美洽,那么可以使用
_MEIQIA('clientId', '顾客的唯一标识')
来同步顾客的身份(包括顾客信息、聊天记录等)。
「顾客的唯一标识」来自你自己的用户系统。
<script type='text/javascript'> (function(m, ei, q, i, a, j, s) { m[i] = m[i] || function() { (m[i].a = m[i].a || []).push(arguments) j = ei.createElement(q), s = ei.getElementsByTagName(q)[0]; j.async = true; j.charset = 'UTF-8'; j.src = 'https://static.meiqia.com/dist/meiqia.js'; s.parentNode.insertBefore(j, s); })(window, document, 'script', '_MEIQIA'); _MEIQIA('entId', '我是企业ID'); // 设置 clientId,使用请取消注释并使用自己系统的顾客ID // _MEIQIA('clientId', '每个顾客都拥有唯一标识,且不可重复'); </script><script type='text/javascript'>
// 当你使用了「手动初始化」时,就可以在自己的逻辑中选择合适的时机调用 clientId
// 只要是在美洽初始化之前,就可以被正确执行
_MEIQIA('clientId', '顾客的唯一标识');
_MEIQIA('init');
</script>
你可以通过给链接添加 metadata 参数来传递顾客的信息到美洽工作台。
如果你传递了默认信息以外的数据,它在美洽工作台中将以「自定义信息」的方式被呈现出来。
美洽默认的顾客个人信息包括:
address, // 地址 age, // 年龄 comment, // 备注 email, // 邮箱 gender, // 性别 name, // 名字 qq, // QQ tel, // 电话 weibo, // 微博 weixin // 微信
注意: metadata 中,key 和 value 都要添加双引号
/standalone.html?eid=我是企业ID&metadata=
{"name":"老王","qq":"123456","age":"11","gender":"男"}
注意: 如果你要在 metadata 中添加带有 & 或者 = 的数据,那么你应该先对它们进行转义
= %3D/standalone.html?eid=我是企业ID&metadata={"name":"老王","qq":"123456",
"age":"11","gender":"男","网址":"http://meiqia.com?a%3D1%26b%3D2"}
/standalone.html?eid=我是企业ID&metadata={"name":"老王","qq":"123456",
"age":"11","gender":"男","网址":"http://meiqia.com?a=1&b=1"}
/standalone.html?eid=我是企业ID&fallback=1&agentid=token1,token2,token3
/standalone.html?eid=我是企业ID&fallback=1&groupid=token1,token2,token3
当你指定的客服不在线或无法服务时,可以通过在链接中增加 fallback 参数来指定不同的处理方式。
fallback 接受的参数为数字类型,目前有 1、2、3
1 // 不转接(进入留言页面)
2 // 转接到客服所属于的组
3 // 转接到全企业(这是美洽默认的处理方式)
/standalone.html?eid=我是企业ID&fallback=1
如果你的产品有多种形式(网页、APP),且都使用了美洽,那么可以通过在链接中添加 clientid 参数来传递顾客的唯一标识,从而同步顾客的身份(包括顾客信息、聊天记录等)。
「顾客的唯一标识」来自你自己的用户系统。
顾客唯一标识是由你来生成的,请保证每个顾客拥有独一无二的字符串,否则会出现多个客户串消息的情况!
/standalone.html?eid=我是企业ID&clientid=我是顾客唯一标识
点击聊天按钮展开聊天窗时调用(必须处于有对话,或排队,或留言的状态之一)。
_MEIQIA('convClickCallback', clickCallback); function clickCallback(type, convId) { console.log(type); if (type === 'conv') { console.log(convId); </script>网页插件发送商品卡片
企业希望看到用户发起对话时正在浏览的商品信息,以便客服更好的进行客户服务,那么企业可以通过以下方式实现:
<button onclick="sendCardMsg()">发送商品卡片</button> <script> function sendCardMsg() { _MEIQIA('product', { picUrl: 'https://xxx/xxx.jpg', title: '美洽 - 客服系统', description: '支持PC端/移动端/微信/APP/微博...等全渠道对话接入,稳定快速,无需下载部署,注册即用', productUrl: 'https://xxx/xxx.html', salesCount: 111, success: data => { console.log(data, 'data'); error: error => { console.log(error, 'error'); </script>工作台插件(iframe)发送商品卡片
如果你已经配置美洽「自定义iframe」,同时希望嵌入在 iframe 中的页面能够直接发送商品卡片给客户(ex:比如嵌入的页面是企业商品库,客服可以直接在该页面发送商品卡片),那么通过以下方式实现:
<button onclick="sendCardMsg()">发送商品卡片</button> <script> function sendCardMsg() { window.parent.postMessage({ type: 'sendProductCard', content: { picUrl: 'https://xxx/xxx.jpg', title: '美洽 - 客服系统', description: '支持PC端/移动端/微信/APP/微博...等全渠道对话接入,稳定快速,无需下载部署,注册即用', productUrl: 'https://xxx/xxx.html', salesCount: 111, }, '*'); </script>商品卡片消息的字段规则:
字段 | 是否必传 | 验证规则 | 描述 |
picUrl | 是 | 字符串且长度小于等于2000 | 建议商品配图尺寸:242*184,或同等比例 |
title | 是 | 字符串且长度小于等于100 | 商品标题 |
description | 是 | 字符串且长度小于等于500 | 商品介绍 |
productUrl | 是 | 字符串且长度小于等于2000 | 商品 URL |
salesCount | 否 | 正整数且不超过15位 | 商品销量数目 |
你可以通过给链接添加 encryptedMetadata 参数来传递顾客
传递顾客信息数据的时候,需要开发者先加密后,再通过 encryptedMetadata 字段来传递
1.准备待传递数据(待传递数据是一个 JSON 对象):
{"name":"value"}
2.加密数据(参考下面的加密算法,该示例中,密码 和 偏移量为:2bab953cb29e7a1e3be20ab97d5c675b),得到加密数据:
cd0caf04a1c6ff63d7951cd5e2016167066c6032e2fd2c8ae543a02d6145e897
3.在链接中添加 encryptedMetadata 参数来传递
/standalone.html?eid=我是企业ID&encryptedMetadata=cd0caf04a1c6ff63d7951cd5e2016167066c6032e2fd2c8ae543a02d6145e897
4.在插件中使用
function setEncryptedmetadata () {
_MEIQIA('encryptedMetadata', 'cd0caf04a1c6ff63d7951cd5e2016167066c6032e2fd2c8ae543a02d6145e897');
AES 加密模式:CBC
填充模式:PKCS7Padding
数据块:128
密码:(约定为企业 ID)
偏移量:(约定为企业 ID)
输出:Hex
字符集:UTF-8
企业 ID 在 工作台 - 设置 - 团队 - 团队管理 - ID 查询 中查看
在线加密测试:http://tool.chacuo.net/cryptaes
加密&解密参考:https://gist.github.com/ksxkq/00a21e18bcadb86512a023f95c4ecb13