您好,欢迎使用im工作台辅助组件,通过辅助组件您可以通过客服系统来给客户发送消息.

基本用法

自定义辅助组件页面通过 postMessage 和客服系统页面通信, 需遵循特定的消息格式和渠道限制, 且消息1s内只能发送1次.

消息渠道限制

普通消息: 所有渠道可以发送

商品消息: web渠道和SDK渠道(SDK版本大于等于5.1)

小程序卡片消息: 小程序渠道

1. 文本消息

参数说明

参数名称 类型 是否必填 说明
method String 'sendMsg' 方法名称: sendMsg
type String 'text' 消息类型: 文本消息
content String 'string' 消息内容

示例

    var data = JSON.stringify({
            method: "sendMsg",   // 固定method
            type: "text",        // 固定type
            content:  "xxx"      // 需要发送的消息
        });
    var origin = "*";
    window.parent.postMessage(data, origin);

2. 富文本消息

参数说明

参数名称 类型 是否必填 说明
method String 'sendMsg' 方法名称: sendMsg
type String 'rich' 消息类型: 富文本消息
content String 'string' 消息内容

示例

    var data = JSON.stringify({
            method: "sendMsg",   // 固定method
            type: "rich",        // 固定type
            content:  "<p style='font-size:18px'>hello world</p>"      // 需要发送的消息
        });
    var origin = "*";
    window.parent.postMessage(data, origin);

富文本消息中带小程序链接

任意标签,包含一个 data-miniprogram-path 属性。当客户点击这个标签即可跳转到对应的页面

示例
    var data = JSON.stringify({
            method: "sendMsg",   // 固定method
            type: "rich",        // 固定type
            content:  "<a data-miniprogram-path='/path/navigate/to'>跳到小程序其他页面</a>"      // 需要发送的消息
        });
    var origin = "*";
    window.parent.postMessage(data, origin);

3. 商品消息 参数详情

参数说明

参数名称 类型 是否必填 说明
method String 'sendMsg' 方法名称: sendMsg
type String 'product' 消息类型: 商品消息
content Object object 消息内容: 示例格式

示例

    var data = JSON.stringify({
            method: "sendMsg",      // 固定method
            type: "product",        // 固定type
            content: {              // 商品消息格式
                name: "Apple iPhone X (A1903) 64GB 深空灰色 移动联通4G手机",
                url: "https://item.jd.com/6748052.html",
                imgUrl: "http://img12.360buyimg.com/n1/s450x450_jfs/t10675/253/1344769770/66891/92d54ca4/59df2e7fN86c99a27.jpg",
                params: [{
                    text: "¥6999.00",
                    color: "#FF0000",
                    fold: false,
                    break: false,
                    size: 12
                }, {
                    text: "满1999元另加30元"
                }]
            }
        });
    var origin = "*";
    window.parent.postMessage(data, origin);

点击后跳到小程序页面

在小程序 web-view 中访问 im 客户端时,将 url 设置为一个路径(不以 http 开头),则会使用 wx.miniProgram.navigateTo 方法进行跳转

    var data = JSON.stringify({
            method: "sendMsg",      // 固定method
            type: "product",        // 固定type
            content: {              // 商品消息格式
                name: "Apple iPhone X (A1903) 64GB 深空灰色 移动联通4G手机",
                url: "/pages/product/detail", // 这里的 url 是一个路径
                imgUrl: "http://img12.360buyimg.com/n1/s450x450_jfs/t10675/253/1344769770/66891/92d54ca4/59df2e7fN86c99a27.jpg",
                params: [{
                    text: "¥6999.00",
                    color: "#FF0000",
                    fold: false,
                    break: false,
                    size: 12
                }, {
                    text: "满1999元另加30元"
                }]
            }
        });
    var origin = "*";
    window.parent.postMessage(data, origin);

4. 小程序卡片消息

参数说明

参数名称 类型 是否必填 说明
method String 'sendMsg' 方法名称: sendMsg
type String 'product' 消息类型: 小程序卡片消息
content Object object 消息内容: 注意! 'thumb_media_id' 和 'pic_url' 必填其一

示例

    var data = JSON.stringify({
            method: "sendMsg",              // 固定method
            type: "miniprogrampage",        // 固定type
            content: {                      // 商品消息格式
                title: "title",             // 必填
                pagepath: "pagepath",       // 必填,小程序路径
                thumb_media_id: "thumb_media_id",                 // 小程序卡片图片的媒体ID
                pic_url: "http://img12.360buyimg.com/n1/xxx.jpg",  // 需要显示的图片地址 注意!!! 和thumb_media_id两者必填其一
            }
        });
    var origin = "*";
    window.parent.postMessage(data, origin);

注意事项

  1. 请限制发送频率
  2. 注意消息格式