如何在对接页面一键发送消息给用户 · 芝麻小客服帮助文档

# 在对接页面发送消息通过本功能，可以在对接页面一键发送消息给当前咨询用户。消息内容可以自定义。 ## 应用场景在对接页面，一键发送商品、订单、物流等信息给用户。 ## 支持应用类型 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> ~~~