1. 首页
  2. 开发指南
  3. JavaScript 网页插件

JavaScript 网页插件

不使用 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>

强制对话

如果你想加载成功后直接打开聊天窗口可以如下设置:

示例:

<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 // 备注

你也可以在工作台设置自定义联系人字段信息

非加密方式

  1. 聊天插件

通过 _MIXDESK('metadata', {}) 接口,可以将这个工作自动化;需要等待mixdesk代码初始化成功之后,才能调用被执行。

<script type='text/javascript'>
     function doSomething () {
         // 传递联系人信息
         _MIXDESK('metadata', {
            name: 'test',
            }
         );
     }
</script>
  1. 聊天链接

通过给链接添加 metadata 参数来传递联系人的信息到工作台

示例:

/standalone-priv.html?eid=我是企业ID&metadata=
{"name":"Test","email":"123456@mail.com"}

示例:

注意: 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.在聊天链接中添加 encryptedMetadata 参数来传递
 /standalone-priv.html?eid=EnterpriseID&encryptedMetadata=cd0caf04a1c6ff63d7951cd5e2016167066c6032e2fd2c8ae543a02d6145e897

4.在聊天插件中使用
 function setEncryptedmetadata () {
  _MIXDESK('encryptedMetadata', 'cd0caf04a1c6ff63d7951cd5e2016167066c6032e2fd2c8ae543a02d6145e897');
 }

同步联系人唯一标识

「联系人唯一标识」来自你自己的用户系统。

可以使用 _MIXDESK('clientId', '联系人唯一标识') 来同步

注意:

  • 联系人唯一标识为长度6到32的字符串,是由你来生成的,请保证每个联系人拥有独一无二的字符串,否则会出现多个客户串消息的情况!
  1. 聊天插件

示例:

<!-- 这是 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>
  1. 聊天链接

示例:

/standalone-priv.html?eid=我是企业ID&clientid=联系人唯一标识

获取关闭聊天窗口事件

访客点击聊天窗口的关闭按钮时,您可以获取到该点击事件。

示例:

<!-- 这是你的代码 -->
<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>
更新时间 2025年2月24日
这篇文章对您有帮助吗?