คิวอาร์โค้ดเป็นวิธีที่ง่ายในการฝังรายการที่อัดแน่นไปด้วยข้อมูลลงในรูปภาพขนาดเล็ก เรามักจะเห็นว่ามีการใช้คิวอาร์โค้ดเพื่อวัตถุประสงค์ต่างๆ ตั้งแต่การให้ข้อมูลเพิ่มเติมแก่ผู้ชมโปสเตอร์ไปจนถึงการนำเสนอเมนูอาหารให้กับผู้มารับประทานอาหารที่ร้านอาหาร
ในระดับพื้นฐาน คิวอาร์โค้ดและลิงก์แบบสั้นซึ่งเป็นลิงก์ที่ซับซ้อนในเวอร์ชั่นที่ย่อให้สั้นลงและอ่านได้ง่ายขึ้น เป็นวิธีในการเชื่อมต่อกับลูกค้าของคุณอย่างตรงไปตรงมาและเข้าถึงได้ WhatsApp ใช้คิวอาร์โค้ดและลิงก์แบบสั้นเพื่อช่วยให้คุณเชื่อมต่อกับลูกค้าได้ดียิ่งขึ้น เมื่อใช้ร่วมกัน จะช่วยให้ลูกค้าของคุณสามารถเริ่มการสนทนากับคุณได้โดยไม่ต้องป้อนหมายเลขโทรศัพท์ หรือสามารถเข้าถึงข้อมูลผลิตภัณฑ์ โปรโมชั่น และอื่นๆ ได้อย่างรวดเร็ว
บทความนี้จะสาธิตวิธีสร้างและใช้งานทั้งคิวอาร์โค้ดและลิงก์แบบสั้นจากแพลตฟอร์ม WhatsApp Business โดยใช้ API ระบบคลาวด์ซึ่งโฮสต์โดย Meta เราจะทบทวนวิธีการสร้าง การอัพเดต การรับ และการลบคิวอาร์โค้ดและลิงก์แบบสั้นใหม่ และแสดงวิธีการส่งคิวอาร์โค้ดและลิงก์แบบสั้นในข้อความ WhatsApp คุณสามารถเข้าชมที่นี่ได้ทุกเวลา
ในการทำตามบทแนะนำการใช้งานนี้ คุณจะต้องมีสิ่งต่อไปนี้
แอพ WhatsApp ในบัญชีผู้พัฒนา Meta ของคุณตามคู่มือการเริ่มต้นใช้งาน และสามารถส่งข้อความทดสอบได้ (โดยไม่จำเป็นต้องตั้งค่า Webhook)
โทเค็นการเข้าถึงผู้ใช้ระบ โดยมีสิทธิ์การอนุญาตที่จำเป็น (whatsapp_business_management, whatsapp_business_messaging, and business_management
)
ความรู้เบื้องต้นเกี่ยวกับ Node.js และ Express.js
นอกจากนี้ บทแนะนำการใช้งานนี้จะใช้ไลบรารี Node.js ต่างๆ มากมาย ซึ่งรวมถึง dotenv เพื่อจัดเก็บการกำหนดค่าที่จำเป็นเพื่อสร้างคำขอ HTTP ด้วย API ระบบคลาวด์ คุณสามารถใช้ 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 ซึ่งจะสร้างแอพพลิเคชั่น Skeleton ขึ้นมา
คุณจะเริ่มต้นด้วยการสร้างคิวอาร์โค้ดและลิงก์แบบสั้นใหม่โดยใช้ API การจัดการธุรกิจ ซึ่งเป็นส่วนหนึ่งของแพลตฟอร์ม WhatsApp Business
ตามเอกสารประกอบ ให้เริ่มด้วยการส่งคำขอ POST ไปยังตำแหน่งข้อมูล /{phone-number-ID}/message_qrdls
พร้อมด้วยพารามิเตอร์การสืบค้น 3 พารามิเตอร์ ดังนี้ prefilled_message, generate_qr_image,
และ access_token
.
ในจุดนี้คุณต้องใช้คิวอาร์โค้ดและลิงก์แบบสั้นที่สแกนเพื่อจัดเก็บไปยัง prefilled_message
ซึ่งจะช่วยให้ผู้ใช้สามารถส่งข้อความที่เขียนไว้ล่วงหน้าถึงคุณได้ ซึ่งจะเป็นประโยชน์สำหรับการดูแลลูกค้า อีคอมเมิร์ซ การเลือกรับข้อความทางการตลาด และอื่นๆ
จากนั้น generate_qr_image
จะช่วยให้คุณรองรับรูปภาพคิวอาร์โค้ดที่สร้างขึ้นได้ 2 รูปแบบ ได้แก่ .svg หรือ .png คุณสามารถเลือกรูปแบบที่คุณต้องการได้โดยใช้วิธีต่อไปนี้ ตัวอย่างนี้ใช้ .png
หากต้องการใช้ Boilerplate ให้ไปที่ 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)); } } ); };
จากนั้น คุณต้องส่งตัวแปร 2 ตัวจากเนื้อหาในคำขอ ซึ่งก็คือข้อความ (ซึ่งในภายหลังจะใช้เป็น 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 เพื่อส่งลิงก์แบบสั้นเป็นข้อความ SMS และส่ง URL รูปภาพเป็นข้อความสื่อได้
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 ด้วยโค้ดต่อไปนี้ เมธอดเชลล์จะอยู่ใน Boilerplate อยู่แล้ว
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" } }
หากคุณได้รับการตอบกลับที่คล้ายกับรูปภาพด้านล่าง แสดงว่าส่งข้อความสำเร็จแล้ว
รูปภาพด้านล่างนี้แสดงมุมมองข้อความของผู้รับ:
ในตอนนี้ เมื่อมีคนสแกนคิวอาร์โค้ดนี้โดยใช้สมาร์ทโฟนหรืออุปกรณ์อื่นๆ ระบบจะเติมข้อความล่วงหน้าโดยที่ผู้ใช้ไม่ต้องป้อนข้อมูลและเริ่มการสนทนาใหม่
การเรียกดูรายการคิวอาร์โค้ดและลิงก์แบบสั้นที่มีอยู่นั้นทำได้ง่ายๆ เนื่องจากคุณเพียงแค่ส่งคำขอ GET ไปยังตำแหน่งข้อมูล /{phone-number-ID}/message_qrdls
เท่านั้นเอง ระบบจะส่งคืนอาร์เรย์ของอ็อบเจ็กต์ โดยที่แต่ละอ็อบเจ็กต์จะประกอบด้วย 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)); } } ); };
หลังจากที่เพิ่มโค้ดแล้ว ให้ทดสอบ API กับ Postman รูปภาพด้านล่างนี้แสดงให้เห็นว่าคำขอใน Postman จะมีลักษณะดังนี้
การตอบกลับที่สำเร็จจะแสดงอาร์เรย์ของคิวอาร์โค้ดและลิงก์แบบสั้น
การอัพเดตคิวอาร์โค้ดจะมีประโยชน์อย่างมาก เนื่องจากเป็นการอัพเดตข้อความโดยไม่ต้องเปลี่ยนรูปภาพรหัสคิวอาร์ คุณจึงไม่ต้องปริ้นท์หรือแชร์คิวอาร์โค้ดใหม่อีกครั้ง ฟีเจอร์นี้จะมีประโยชน์อย่างยิ่งเมื่อจัดเก็บข้อมูลต่างๆ เช่น รายละเอียดผู้ติดต่อและโปรโมชั่น ไว้ในคิวอาร์โค้ด
หากต้องการอัพเดตข้อความคิวอาร์โค้ด คุณต้องทราบ Code (ID) ของคิวอาร์โค้ดที่สร้างขึ้น ซึ่งคุณสามารถส่งเป็นพารามิเตอร์การสืบค้นไปยังตำแหน่งข้อมูล /{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
และอัพเดตเมธอด 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)); } } ); };
ในจุดนี้ คุณจะส่ง Code ID ของคิวอาร์โค้ดที่คุณต้องการเลิกใช้งานโดยเป็นพารามิเตอร์การสืบค้น การตอบกลับที่สำเร็จจะส่งอ็อบเจ็กต์ JSON โดยตั้งค่าความสำเร็จไว้เป็น True
สิ่งที่ควรสังเกตคือ เมื่อลบคิวอาร์โค้ดแล้ว คุณจะไม่สามารถใช้คิวอาร์โค้ดนั้นเพื่อเริ่มการสนทนาและพิมพ์ข้อความโดยที่ผู้ใช้ไม่ต้องป้อนข้อมูลได้อีกต่อไป
ในบทแนะนำการใช้งานจริงนี้ คุณได้เรียนรู้วิธีสร้าง อัพเดต ดึงข้อมูล และลบคิวอาร์โค้ดและลิงก์แบบสั้นด้วยแพลตฟอร์ม WhatsApp Business โดยใช้ API ระบบคลาวด์ซึ่งโฮสต์โดย Meta พร้อมกับได้รับชมกรณีการใช้งานต่างๆ โดยสังเขปไปแล้ว
คิวอาร์โค้ดของ WhatsApp นั้นจัดการได้ง่ายและช่วยเพิ่มการมีส่วนร่วมกับลูกค้าของคุณได้อย่างมากด้วยวิธีต่างๆ ที่มีประสิทธิภาพ ฟีเจอร์คิวอาร์โค้ดและลิงก์แบบสั้นของ WhatsApp ช่วยให้คุณเชื่อมต่อกับฐานผู้ใช้ได้ง่ายกว่าที่เคย