不使用 Mixdesk 的聊天按钮
有时候,也许你不想要显示Mixdesk自带的聊天按钮,那么你可以使用 _MIXDESK('withoutBtn');
。
示例:
<!-- 这是Mixdesk的嵌入代码 -->
<script type='text/javascript'>
(function(a, b, c, d, e, j, s) {
a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MIXDESK');
_MIXDESK('entId', '我是企业ID');
// 在这里开启无按钮模式
_MIXDESK('withoutBtn');
</script>
打开聊天窗
在某些需求下,你可能希望在自己编写的代码中掌控 Mixdesk 聊天窗。
在 Mixdesk 网站插件初始化成功的前提下,调用 _MIXDESK('showPanel')
就可以打开聊天窗。
注意:
- 如果你在 Mixdesk 插件还没有初始化成功的情况下调用了本接口,它将无法被正确执行。
- 如果你想要在 Mixdesk 插件加载完毕后立即调用聊天窗,那么可以组合「初始化成功时的回调」接口来实现。
示例:
<!-- 你可以直接在 HTML 元素中绑定 showPanel -->
<a href="javascript:void(0)" onclick="_MIXDESK('showPanel')">联系客服</a>
<!-- 当然也可以在 Javascript 中调用 -->
<script>
_MIXDESK('showPanel');
</script>
初始化成功时的回调
有时候,也许你需要在 Mixdesk 网站插件加载成功后执行一些事件,那么可以使用 _MIXDESK('allSet', callback)
。
注意:
- 本接口不一定要紧跟在 Mixdesk 的嵌入代码后面,但必须在 Mixdesk 插件初始化之前使用。
示例:
<!-- 这是你的代码 -->
<script type='text/javascript'>
function yourFunction() {
// 你可以根据自己的需求编写相应的代码
console.log('Mixdesk网站插件初始化完毕。');
}
</script>
<!-- 这是 Mixdesk 的嵌入代码 -->
<script type='text/javascript'>
(function(a, b, c, d, e, j, s) {
a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MIXDESK');
_MIXDESK('entId', '我是企业ID');
// 初始化成功时的回调
_MIXDESK('allSet', yourFunction);
</script>
<script type='text/javascript'>
// 当你使用了「手动初始化」时,就可以在自己的逻辑中选择合适的时机调用 allSet
// 只要是在Mixdesk初始化之前,就可以被正确执行
_MIXDESK('allSet', yourFunction);
_MIXDESK('init');
</script>
手动初始化
在加载了 Mixdesk 网站插件的前提下,你可以在自己的 JavaScript 中通过调用 _MIXDESK('init')
来实现手动初始化。
使用方法如下:
- 在 Mixdesk 的嵌入代码后加入
_MIXDESK('manualInit');
,这个设置将会阻止 Mixdesk插件代码在下载完毕后自动执行初始化操作。 - 当你需要初始化 Mixdesk 插件的时候,在 JavaScript 代码中调用
_MIXDESK('init')
即可。
注意:
_MIXDESK('manualInit');
必须紧跟在 Mixdesk 的嵌入代码后面。- 没有设置
_MIXDESK('manualInit');
,是无法使用_MIXDESK('init');
的。 - 如果你在 Mixdesk 的代码还没有下载完毕的情况下调用了
_MIXDESK('init')
,它会等到 Mixdesk 代码下载完毕时才被响应。
示例:
<script type='text/javascript'>
(function(a, b, c, d, e, j, s) {
a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MIXDESK');
_MIXDESK('entId', '我是企业ID');
// 在这里开启手动模式(必须紧跟 Mixdesk 的嵌入代码)
_MIXDESK('manualInit');
</script>
<!-- 这是你自己的 JavaScript 代码 -->
<script>
// 你可以自己的代码中选择合适的时机来调用手动初始化
_MIXDESK('init');
</script>
<!-- 在实际使用时你可能会面临很复杂的场景,但是沿着这个套路发挥吧。May force
be with you -->
强制对话
如果你想加载成功后直接打开聊天窗口可以如下设置:
示例:
<script type='text/javascript'>
(function(a, b, c, d, e, j, s) {
a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MIXDESK');
_MIXDESK('entId', '我是企业ID');
// 初始化成功后调用 showPanel
_MIXDESK('allSet', function(){
_MIXDESK('showPanel');
});
</script>
传递联系人信息
默认联系人信息
tel // 电话,格式为:+国家区号加上号码,e.g:+86138XXXX1234,否则会传值失败。
name // 名字
email // 邮箱
comment // 备注
你也可以在工作台设置自定义联系人字段信息
非加密方式
聊天插件
通过 _MIXDESK('metadata', {})
接口,可以将这个工作自动化;需要等待mixdesk代码初始化成功之后,才能调用被执行。
<script type='text/javascript'>
function doSomething () {
// 传递联系人信息
_MIXDESK('metadata', {
name: 'test',
}
);
}
</script>
注意: metadata 中,key 和 value 都要添加双引号
/standalone-priv.html?eid=EnterpriseID&metadata=
{"name":"Test","email":"123456@mail.com"}
注意:如果你要在 metadata 中添加带有 & 或者 = 的数据,那么你应该先对它们进行转义
& %26
= %3D
正确:
/standalone-priv.html?eid=EnterpriseID&metadata=
{"name":"Test","email":"123456@mail.com","url":"http://mixdesk.com?a%3D1%26b%3D2"}
错误:
/standalone-priv.html?eid=EnterpriseID&metadata=
{"name":"Test","email":"123456@mail.com","url":"http://mixdesk.com?a=1&b=1"}
加密方式
加密算法
AES 加密模式:CBC
填充模式:PKCS7Padding
数据块:128
密码:(约定为企业 ID)
偏移量:(约定为企业 ID)
输出:Hex
字符集:UTF-8
验证加密结果的链接: http://tool.chacuo.net/cryptaes
加密&解密代码参考: https://gist.github.com/ksxkq/00a21e18bcadb86512a023f95c4ecb13
示例:
1.准备待传递数据(待传递数据是一个 JSON 对象):
{"name":"value"}
2.加密数据(参考下面的加密算法,该示例中,密码 和 偏移量为:2bab953cb29e7a1e3be20ab97d5c675b),得到加密数据:
cd0caf04a1c6ff63d7951cd5e2016167066c6032e2fd2c8ae543a02d6145e897
3.在聊天插件中使用
function setEncryptedmetadata () {
_MIXDESK('encryptedMetadata', 'cd0caf04a1c6ff63d7951cd5e2016167066c6032e2fd2c8ae543a02d6145e897');
}
同步联系人唯一标识
「联系人唯一标识」来自你自己的用户系统。
可以使用 _MIXDESK('clientId', '联系人唯一标识')
来同步
注意:
- 联系人唯一标识为长度6到32的字符串,是由你来生成的,请保证每个联系人拥有独一无二的字符串,否则会出现多个客户串消息的情况!
聊天插件
示例:
<!-- 这是 Mixdesk 的嵌入代码 -->
<script type='text/javascript'>
(function(a, b, c, d, e, j, s) {
a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s););
_MIXDESK('entId', '我是企业ID');
// 设置 clientId,使用请取消注释并使用自己系统的联系人ID
// _MIXDESK('clientId', '每个联系人都拥有唯一标识,且不可重复');
</script>
获取关闭聊天窗口事件
访客点击聊天窗口的关闭按钮时,您可以获取到该点击事件。
示例:
<!-- 这是你的代码 -->
<script type='text/javascript'>
function handleBeforeCloseWindow() {
console.log('点击了关闭')
}
</script>
<script type='text/javascript'>
(function(a, b, c, d, e, j, s) {
a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MIXDESK');
_MIXDESK('entId', '我是企业ID');
//点击关闭按钮后的回调
_MIXDESK('beforeCloseWindow', handleBeforeCloseWindow);
</script>
获取未读消息
官方的聊天按钮可以显示未读消息的数量,以及提供最近一条未读消息的预览。
如果你设置了无按钮模式,这两个数据也就无法被呈现了。但是通过 _MXIDESK('getUnreadMsg', callback);
接口,你可以从 callback
的参数中得到这些数据,用自己的方式在显示它们。
注意:
- 本接口不一定要紧跟在Mixdesk的嵌入代码后面,但必须在Mixdesk插件初始化之前使用。
- 由于存储未读消息的依赖于浏览器的 localStorage,所以在 IE8 以下的浏览器中,是无法获取未读消息的。
示例:
<div>
<div>我的数据来自未读消息接口</div>
<div>未读消息数量: <b id="unreadNum">0</b></div>
<div>最后一条未读消息的内容:<b id="unreadMsg"></b></div>
</div>
<!-- 这是一个简单的处理未读消息的示例 -->
<script>
/**
* [处理未读消息]
* @param {[string, object]} msg [string: 'hasBeenRead',
object: 未读消息数据]
*/
function yourFunction(msg) {
var text = '',
num = 0;
if (msg === 'hasBeenRead') { // 消息已被阅读
num = 0;
} else if (typeof(msg) === 'object') {
var unreadNum = document.getElementById('unreadNum').innerHTML,
lastMsg = msg[msg.length - 1];
num = isNaN(+unreadNum) ? msg.length : +unreadNum + msg.length;
// content_type 是消息的类型:
// text(文字)、photo(图片)、file(文件)
// content 是消息的内容
if (lastMsg.content_type === 'text') {
// 文字消息中可能会存在表情图片,由于路径问题
// 将文字消息中的图片处理为文字'[表情]'
text = lastMsg.content.replace(
/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '[表情]'
);
} else if (lastMsg.content_type === 'photo') {
text = '[图片]';
} else if (lastMsg.content_type === 'file') {
text = '[文件]';
} else {
text = '[新消息]';
}
}
// 未读消息数量
document.getElementById('unreadNum').innerHTML = num;
// 最后一条消息的内容
document.getElementById('unreadMsg').innerHTML = text;
}
</script>
<script type='text/javascript'>
(function(a, b, c, d, e, j, s) {
a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MIXDESK');
_MIXDESK('entId', '我是企业ID');
// 获取未读消息
_MIXDESK('getUnreadMsg', yourFunction);
</script>
跟随浏览器语言
您可以在网页插件中携带 languageLocal
参数来控制他们初始化时是否跟随用户的浏览器语言。
网页插件启用跟随示例:
<script type='text/javascript'>
(function(a, b, c, d, e, j, s) {
a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MIXDESK');
_MIXDESK('entId', '我是企业ID');
//如果需要英文版,可用如下配置
_MIXDESK('language','en');
//启用跟随浏览器语言,可用如下配置
_MIXDESK('languageLocal','true')
</script>
当您启用了跟随 ,Mixdesk 会按以下优先级判断网页插件的语言:
- 优先浏览器语言,当浏览器语言不在Mixdesk支持的语言范围内时,往下判断;
- 然后是渠道指定的语言,当他们不指定语言或者指定的语言代码不合法时,往下判断;
- 最后是渠道默认语言,默认语言是简体中文。
获取关闭网页插件事件
顾客点击网页插件的关闭按钮时,您可以获取到该点击事件。
示例:
<!-- 这是你的代码 -->
<script type='text/javascript'>
function handleBeforeCloseWindow() {
console.log('点击了关闭')
}
</script>
<script type='text/javascript'>
(function(a, b, c, d, e, j, s) {
a._t = d;
a[d] = a[d] || function() {
(a[d].a = a[d].a || []).push(arguments)
};
j = b.createElement(c),
s = b.getElementsByTagName(c)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = 'https://chat.mixdesk.com/entry.js';
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '_MIXDESK');
_MIXDESK('entId', '我是企业ID');
//点击关闭按钮后的回调
_MIXDESK('beforeCloseWindow', handleBeforeCloseWindow);
</script>