Hello, welcome to use the IM workspace assistant component. With the assistant component, you can send messages to customers through the customer service system.

Basic Usage

Custom assistant component pages communicate with the customer service system page through postMessage, following specific message formats and channel restrictions. Only one message can be sent per second.

Message Channel Restrictions

• Normal Messages: Can be sent through all channels.
• Product Messages: Web channels and SDK channels (SDK version greater than or equal to 5.1).
• Mini Program Card Messages: Mini Program channels.

1. Text Message

Parameter Description

Parameter Name	Type	Value	Required	Description
method	String	'sendMsg'	Yes	Method name: sendMsg
type	String	'text'	Yes	Message type: Text Message
content	String	'string'	Yes	Message content

Example

var data = JSON.stringify({
    method: "sendMsg",   // Fixed method
    type: "text",        // Fixed type
    content:  "xxx"      // Message to be sent
});
var origin = "*";
window.parent.postMessage(data, origin);

2. Rich Text Message

Parameter Description

Parameter Name	Type	Value	Required	Description
method	String	'sendMsg'	Yes	Method name: sendMsg
type	String	'rich'	Yes	Message type: Rich Text Message
content	String	'string'	Yes	Message content

Example

var data = JSON.stringify({
    method: "sendMsg",   // Fixed method
    type: "rich",        // Fixed type
    content:  "<p style='font-size:18px'>hello world</p>"      // Message to be sent
});
var origin = "*";
window.parent.postMessage(data, origin);

Rich Text Message with Mini Program Links

Any tag containing a data-miniprogram-path attribute. When the customer clicks on this tag, they will be redirected to the corresponding page.

Example

var data = JSON.stringify({
    method: "sendMsg",   // Fixed method
    type: "rich",        // Fixed type
    content:  "<a data-miniprogram-path='/path/navigate/to'>Jump to another page in Mini Program</a>"      // Message to be sent
});
var origin = "*";
window.parent.postMessage(data, origin);

3. Product Message Parameter Details

Parameter Description

Parameter Name	Type	Value	Required	Description
method	String	'sendMsg'	Yes	Method name: sendMsg
type	String	'product'	Yes	Message type: Product Message
content	Object	object	Yes	Message content: Sample format

Example

var data = JSON.stringify({
    method: "sendMsg",      // Fixed method
    type: "product",        // Fixed type
    content: {              // Product message format
        name: "Apple iPhone X (A1903) 64GB Space Gray Mobile Unicom 4G Phone",
        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: "Additional ¥30 for orders over ¥1999"
        }]
    }
});
var origin = "*";
window.parent.postMessage(data, origin);

Jumping to a Mini Program Page After Clicking

When accessing the IM client in a Mini Program web-view, set the URL to a path (not starting with http), then wx.miniProgram.navigateTo will be used for redirection.

var data = JSON.stringify({
    method: "sendMsg",      // Fixed method
    type: "product",        // Fixed type
    content: {              // Product message format
        name: "Apple iPhone X (A1903) 64GB Space Gray Mobile Unicom 4G Phone",
        url: "/pages/product/detail", // Here the URL is a path
        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: "Additional ¥30 for orders over ¥1999"
        }]
    }
});
var origin = "*";
window.parent.postMessage(data, origin);

4. Mini Program Card Message

Parameter Description

Parameter Name	Type	Value	Required	Description
method	String	'sendMsg'	Yes	Method name: sendMsg
type	String	'product'	Yes	Message type: Mini Program Card Message
content	Object	object	Yes	Message content: Note! 'thumb_media_id' and 'pic_url' are mandatory, one of them must be filled in

Example

var data = JSON.stringify({
    method: "sendMsg",              // Fixed method
    type: "miniprogrampage",        // Fixed type
    content: {                      // Product message format
        title: "title",             // Required
        pagepath: "pagepath",       // Required, Mini Program path
        thumb_media_id: "thumb_media_id",                 // Media ID of the Mini Program card image
        pic_url: "http://img12.360buyimg.com/n1/xxx.jpg",  // Image address to display. Note!!! One of 'thumb_media_id' and 'pic_url' must be filled in
    }
});
var origin = "*";
window.parent.postMessage(data, origin);

Notes

1. Please limit the sending frequency.

2. Pay attention to the message format.