二维码是将信息密集型内容嵌入小图片的简单方法。我们经常看到二维码用于各种用途,例如用在海报上为观众提供更多信息、为餐厅食客提供菜单等。
从根本上讲,二维码和短链接是复杂链接的简化版和更易读的版本,是直接与客户建立联系的轻松方式。WhatsApp 使用二维码和短链接来协助您更好地与客户建立联系。结合使用这些功能,可让客户无需输入电话号码即可与您发起对话,或者快速访问产品信息、优惠活动等内容。
本文会介绍如何使用由 Meta 托管的云端 API,通过 WhatsApp Business 开放平台生成及使用二维码和短链接。我们会查看如何创建、更新、获取及删除新二维码和短链接,并展示如何在 WhatsApp 消息中发送这些二维码和链接。您可随时在此查看完整代码。
如要按照本教程操作,您将需要:
按照新手入门指南,在 Meta 开发者帐户中拥有 WhatsApp 应用,而且能够发送测试消息(无需设置 Webhooks)。
具有必要权限的系统用户访问口令(权限包括 whatsapp_business_management、whatsapp_business_messaging 和 business_management
)
掌握 Node.js 和 Express.js 的基础知识
此外,本教程会使用多个 Node.js 库(包括 dotenv)来存储必要的配置,以便使用云端 API 发起 HTTP 请求。您也会使用 Postman 测试此应用的端点。最后,作为本文的基础,您需要使用这个 boilerplate 代码。
在项目的根目录下创建并打开 .env
文件,并使用前提条件第 1 步和第 2 步中的值填充所有缺失的变量。
# Your WhatsApp Business app Id APP_ID= # Your WhatsApp Business app secret APP_SECRET= # Recipient phone number without "+" symbol RECIPIENT_PHONE_NUMBER= # Your WhatsApp phone number Id PHONE_NUMBER_ID= # Business Account Id BUSINESS_ACCOUNT_ID= # System User Access Token. Not temporary access token ACCESS_TOKEN= # Cloud API version number VERSION=v15.0 # Override the default app listener port. LISTENER_PORT=3000
添加环境变量后,使用捷径脚本 npm init 启动应用,系统即会创建一个框架应用。
首先,使用 WhatsApp Business 管理 API(属于 WhatsApp Business 开放平台)新建二维码和短链接。
按照文档指示,首先向 /{phone-number-ID}/message_qrdls
端点发送 POST 请求,其中包含以下三个查询参数: prefilled_message、generate_qr_image
以及您的 access_token
。
现在,您需要将已扫描的二维码和短链接存储至 prefilled_message
。这可让用户向您发送预先写好的消息,有助于开展客户服务、电子商务、取得订阅营销信息的决定等。
然后, generate_qr_image
让您能够支持两种生成的二维码图片格式:.svg 或 .png。您可以使用以下方法选择您偏好的格式。在此示例中,我们使用 .png 格式。
使用样板文件前往 controllers/qrCode.js
,并使用以下代码更新 createQRCode 方法:
const qrdlObject = { "prefilled_message" : message, "generate_qr_image" : type } const config = { "method" : "post", "url" : `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/message_qrdls`, "headers" : { Authorization: `Bearer ${process.env.ACCESS_TOKEN}`, 'Content-Type': 'application/json' }, "data" : qrdlObject, }; try { await axios( config ); } catch( error ) { console.log( "") } }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };
然后,您需要在请求正文中传送两个变量:消息(稍后将用作 prefilled_message
)和您的图片格式。之后,使用 Postman 对其进行测试。
请求正文如下所示:
{ "message":"Creating the example QR Code and Short Link", "type":"png" }
当您点击右上方的“发送”按钮时,API 会返回如下方截图所示的响应。此响应将包括 deep_link_url
(用作短链接)和 qr_image_url
(用作二维码图片)。此外,当中还会包含 id
和 prefilled_message
。
接下来,您可以将新生成的二维码和短链接发送给客户。为此,您需要使用云端 API。您可以将该文档中的示例作为参考点。通过使用 API,您可以将短链接作为文字消息发送,还可以将图片网址作为媒体消息发送。
curl -X POST \ 'https://graph.facebook.com/v15.0/BUSINESS_ACCOUNT_ID/messages' \ -H 'Authorization: Bearer ACCESS_TOKEN' \ -d '{ "messaging_product": "whatsapp", "recipient_type": "individual", "to": "RECIPIENT_PHONE_NUMBER", "type": "text", "text": { // the text object "preview_url": false, "body": "MESSAGE_CONTENT" } }'
curl -X POST \ 'https://graph.facebook.com/v15.0/BUSINESS_ACCOUNT_ID/messages' \ -H 'Authorization: Bearer ACCESS_TOKEN' \ -d '{ "messaging_product": "whatsapp", "recipient_type": "individual", "to": "RECIPIENT_PHONE_NUMBER", "type": "image", "image": { "id" : "MEDIA_OBJECT_ID" } }'
您需要创建方法以接受类似的请求对象并执行 HTTP 请求,此方法会调用 /phone_number_id/messages
端点并发送消息。在 controllers/qrCode.js
中,使用以下代码创建 sendMessage 方法。此时,已在样板文件中使用 shell 方法。
exports.sendMessage = async (req, res) => { const { to, type } = req.body; if (!to || !type) { return res.status(400).json({ error: "Required Fields: to and type", }); } request.post( { url: `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/messages`, headers: { Authorization: `Bearer ${process.env.ACCESS_TOKEN}`, "content-type": "application/json", }, body: JSON.stringify(req.body), }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };
接下来,发送带有新生成的二维码的消息。复制 qr_image_url
并将其作为图片链接添加至请求正文。
Postman 请求对象如下所示。在此,PHONE_NUMBER_TO_SEND 可以是任何可拨打格式。
{ "messaging_product": "whatsapp", "recipient_type": "individual", "to": "RECIPIENT_PHONE_NUMBER", "type": "image", "image": { "link": "https://scontent.fybz2-1.fna.fbcdn.net/m1/v/t6/An95lHumHOGcQ_Fl8cDwVrARmc9T9tmtMLyeTOeSFny-OoLLAqSFHEd8gQzAYVsVS6jNm9IBVU27fcb1H05ERwyb5i87Jtp4fjsNppvFnTu26k7ss_dN8S1ZtkSl6XRZtwB68GUabG8?ccb=10-5&oh=00_AT-LCjyu6J8kkeoW1Qj2rxMZikjrHw0fvwA2C6cn9DYkEA&oe=62C8EC07&_nc_sid=f36290" } }
如果您收到类似于下图的响应,即表示消息发送成功。
下图显示了收信人所看到的消息画面:
现在,如果有用户使用智能手机或任何其他装置扫描此二维码,系统会在没有用户输入的情况下预填消息,并发起新的对话。
获取现有二维码和短链接清单的方法简单直接,只需向 /{phone-number-ID}/message_qrdls
端点发送 GET 请求即可。这会返回一组对象,其中各个对象包括 code(id)、prefilled_message
和 deep_link_url
。
在 controllers/qrCode.js
文件中,使用以下代码更新方法:
exports.fetchQRCodes = async (req, res) => { request.get( { url: `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/message_qrdls`, headers: { Authorization: `Bearer ${process.env.ACCESS_TOKEN}` } }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };
添加代码后,使用 Postman 测试 API。下图显示了 Postman 中的请求画面:
成功的响应会提供一组二维码和短链接。
更新二维码非常有用,因为这样可以在不变更二维码图片的情况下更新消息。这样您便无需重印或重新分享新的二维码。如要在二维码中存储联系方式和优惠活动详情等信息,此功能便特别实用。
如要更新二维码消息,您需要知道所创建二维码的代码(编号),这个编号可作为查询参数传送给 /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id}
端点。
在 controllers/qrCode.js
文件中,使用以下代码更新 updateQRCode 方法:
exports.updateQRCode = async (req, res) => { const { message, qr-code-id } = req.body; if (!message || !qr-code-id) { return res.status(400).json({ error: "Required Fields: message and id", }); } request.post( { url: `https://graph.facebook.com/v14.0/${process.env.META_PHONE_ID}/message_qrdls/${qr-code-id}?prefilled_message=${message}`, headers: { Authorization: `Bearer ${process.env.ACCESS_TOKEN}`, "content-type": "application/json", } }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };
在 Postman 中测试此方法时,您会看到以下请求对象:
{ "message":"This is my first Updated QR code", "id":"4WW67TGNCGPXB1" }
成功的请求会传回更新后的代码。
二维码不会过期,因此当二维码内的信息过时或不再有效时,您可能需要将其删除。
首先,您需要发送 DELETE 请求至 /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id}
端点。
前往 controllers/qrCode.js
,使用以下代码更新 shell 方法中的 deleteQRCode 方法:
exports.deleteQRCode = async (req, res) => { const { qr_code_id } = req.query; request.delete( { url: `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/message_qrdls/${qr_code_id}`, headers: { Authorization: `Bearer ${process.env.ACCESS_TOKEN}` } }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };
此时,您需要将要删除的二维码的代码编号作为查询参数进行传送。成功的响应会输出 JSON 对象,并将其中的 success 设为 true。
请注意,在删除二维码后,您便无法再用它来发起对话,并无法在没有用户输入的情况下输入消息。
在本教程中,我们为您介绍了如何使用由 Meta 托管的云端 API,通过 WhatsApp Business 开放平台创建、更新、获取及删除二维码和短链接,并简单介绍了几个用例。
WhatsApp 二维码易于管理,可以通过多种实用方式显著提升与客户的互动成效。有了 WhatsApp 的二维码和短链接功能,您可更轻松地与用户群保持联系。