こんにちは、IMワークステーション補助コンポーネントへようこそ。この補助コンポーネントを通じて、カスタマーサポートシステムからお客様にメッセージを送信できます。
基本使用方法
カスタム補助コンポーネントページは、postMessageを使用してカスタマーサポートシステムページと通信します。特定のメッセージ形式とチャネル制限に従う必要があり、メッセージは1秒間に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);
注意事項
- 送信頻度を制限してください
- メッセージ形式に注意してください