如何在對接頁面一鍵發送消息給用戶 · 芝麻小客服幫助文檔

# 在對接頁面發送消息通過本功能，可以在對接頁面一鍵發送消息給當前咨詢用戶。消息內容可以自定義。 ## 應用場景在對接頁面，一鍵發送商品、訂單、物流等信息給用戶。 ## 支持應用類型 H5云客服（包括PC插件）、公眾號、小程序、小程序插件、抖音企業號、抖音小程序、微信客服 ## 支持消息類型文本：所有類型應用都支持圖片：僅支持H5、公眾號、小程序、微信客服圖文：僅支持H5、公眾號、小程序、微信客服小程序卡片：僅支持公眾號、小程序、微信客服 ##接入流程 - 第一步，下載demo文件。下載地址：[https://ossxkf.oss-cn-beijing.aliyuncs.com/demo.v1.zip](https://ossxkf.oss-cn-beijing.aliyuncs.com/demo.v1.zip); - 第二步，解壓demo，在需要調用JS接口的頁面引入demo\dist 目錄下的zm.bundle.umd.js 文件； - 第三步，調用sendText()方法發送消息。 ## 注意事項 **只有在客服聊天界面側邊欄中打開對接頁面時有效，在其他環境打開對接頁面無效。** **只能發送給當前聊天對象。** ## demo演示 ~~~ html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h3>發送文字</h3> <div> <input id="message" type="text" value="1111" /> <div> <button onclick="sendText()">發送消息</button> <button onclick="sendText2()">發送消息2</button> </div> </div> <h3>發送圖片</h3> <div> <input id="imgSrc" type="text" value="https://oss-huadong1.oss-cn-hangzhou.aliyuncs.com/wechatapp/customer_service/chat/pay/2022/01/26/799235908_2022_01_26_12_09_17c7rvh.jpg?x-oss-process=image/resize,l_1000&v=20220106" /> <div> <button onclick="sendImage()">發送圖片</button> <button onclick="sendImage2()">發送圖片2</button> </div> </div> <h3>發送圖文</h3> <div> 圖片標題(必填)：<input id="imageTextTitle" type="text" value="圖片標題" /><br /> 圖片描述(必填)：<input id="imageTextDescription" type="text" value="圖片描述" /><br /> 跳轉地址(必填，僅H5云客服時可以傳空，但是必須傳這個字段。傳空則點擊鏈接不跳轉)：<input id="imageTextUrl" type="text" value="https://www.baidu.com/" /><br /> 圖片地址(必填)：<input id="imageTextImage" type="text" value="https://oss-huadong1.oss-cn-hangzhou.aliyuncs.com/wechatapp/customer_service/chat/pay/2022/01/26/799235908_2022_01_26_12_09_17c7rvh.jpg?x-oss-process=image/resize,l_1000&v=20220106" /> <div> <button onclick="sendImageText()">發送圖文</button> <button onclick="sendImageText2()">發送圖文2</button> </div> </div> <h3>發送小程序卡片</h3> <div> <div>如果當前應用是小程序則不需要appid</div> appid：<input id="miniprogramAppid" type="text" value="wxf57cf2affa38e55d" /> <br /> 卡片標題(必填)：<input id="miniprogramTitle" type="text" value="卡片標題" /><br /> 頁面名稱：<input id="miniprogramName" type="text" value="頁面名稱" /><br /> 路徑地址(必填)：<input id="miniprogramPath" type="text" value="/pages/index/index" /><br /> 圖片地址(必填)：<input id="miniprogramImage" type="text" value="https://oss-huadong1.oss-cn-hangzhou.aliyuncs.com/wechatapp/customer_service/chat/pay/2022/01/26/799235908_2022_01_26_12_09_17c7rvh.jpg?x-oss-process=image/resize,l_1000&v=20220106" /> <div> <button onclick="sendMiniprogram()">發送小程序卡片</button> <button onclick="sendMiniprogram2()">發送小程序卡片2</button> </div> </div> <script src="./dist/zm.bundle.umd.js"></script> <script> var zmChat = new ZMChat(); // 發送文字 function sendText() { var text = document.getElementById("message").value; zmChat.sendText(text); } function sendText2() { var text = document.getElementById("message").value; zmChat.send({ type: "text", data: { content: text, }, }); } // 發送圖片 function sendImage() { var src = document.getElementById("imgSrc").value; zmChat.sendImage(src); } function sendImage2() { var src = document.getElementById("imgSrc").value; zmChat.send({ type: "image", data: { thumb_url: src, }, }); } // 發送圖文 function sendImageText() { var title = document.getElementById("imageTextTitle").value; var description = document.getElementById("imageTextDescription").value; var url = document.getElementById("imageTextUrl").value; var img = document.getElementById("imageTextImage").value; zmChat.sendImageText({ title: title, description: description, url: url, thumb_url: img, }); } function sendImageText2() { var title = document.getElementById("imageTextTitle").value; var description = document.getElementById("imageTextDescription").value; var url = document.getElementById("imageTextUrl").value; var img = document.getElementById("imageTextImage").value; zmChat.send({ type: "imageText", data: { title: title, description: description, url: url, thumb_url: img, }, }); } // 發送小程序卡片 function sendMiniprogram() { // 如果當前應用是小程序則不需要appid var appid = document.getElementById("miniprogramAppid").value; var title = document.getElementById("miniprogramTitle").value; var page_name = document.getElementById("miniprogramName").value; var page_path = document.getElementById("miniprogramPath").value; var thumb_url = document.getElementById("miniprogramImage").value; zmChat.sendMiniprogram({ appid: appid, title: title, page_name: page_name, page_path: page_path, thumb_url: thumb_url, }); } function sendMiniprogram2() { var appid = document.getElementById("miniprogramAppid").value; var title = document.getElementById("miniprogramTitle").value; var page_name = document.getElementById("miniprogramName").value; var page_path = document.getElementById("miniprogramPath").value; var thumb_url = document.getElementById("miniprogramImage").value; zmChat.send({ type: "miniprogram", data: { appid: appid, title: title, page_name: page_name, page_path: page_path, thumb_url: thumb_url, }, }); } </script> </body> </html> ~~~