การผสานการทำงาน WhatsApp เข้ากับ Shopify

ในฐานะผู้พัฒนา Shopify สำหรับธุรกิจขนาดกลางหรือขนาดใหญ่ คุณคงทราบดีว่าการสื่อสารกับลูกค้าของคุณอย่างราบรื่นมีความสำคัญเพียงใด เพื่อให้บรรลุเป้าหมายนี้ คุณสามารถใช้ประโยชน์จากแพลตฟอร์ม WhatsApp Business เพื่อช่วยส่งข้อความอัตโนมัติให้กับลูกค้าหลายพันรายและปรับขนาดกระบวนการได้อย่างมีประสิทธิภาพเมื่อมีฐานลูกค้าเพิ่มมากขึ้น

บทแนะนำการใช้งานนี้จะอธิบายกระบวนการเชื่อมต่อ WhatsApp กับ Shopify และการส่งข้อความแจ้งเตือน WhatsApp ให้กับลูกค้าตามเหตุการณ์ที่เกิดขึ้นในร้านค้า เช่น การเพิ่มสินค้าไปยังรถเข็นหรือการสั่งซื้อ ซึ่งในกระบวนการนี้ เราจะใช้ API ระบบคลาวด์ที่โฮสต์โดย Meta

ข้อกำหนดเบื้องต้น

ในการทำตามบทแนะนำการใช้งานนี้ คุณจะต้องดำเนินการและมีสิ่งต่อไปนี้

• ติดตั้ง Node.js และ npm
• ร้านค้าใน Shopify ที่มีการตั้งค่าผลิตภัณฑ์และการดำเนินการชำระเงิน
• ลงทะเบียนบัญชีผู้พัฒนาใน Meta for Developer ตั้งค่าแอพทางธุรกิจ และเลือกบัญชี WhatsApp Business

เมื่อดำเนินขั้นตอนสุดท้ายเสร็จสมบูรณ์ ระบบจะมอบโทเค็นการเข้าถึงชั่วคราว ให้เก็บโทเค็นนี้ไว้ เพราะคุณจะต้องใช้ตลอดบทแนะนำการใช้งานที่เหลือนี้

เมื่อปฏิบัติตามข้อกำหนดเหล่านี้แล้ว คุณก็สามารถดำเนินการตามบทแนะนำการใช้งานในส่วนที่เหลือได้

สร้างเทมเพลตข้อความใน WhatsApp

เทมเพลตข้อความ WhatsApp ช่วยให้คุณสร้างรูปแบบข้อความได้หลายรูปแบบ ซึ่งคุณสามารถใช้เพื่อส่งข้อความถึงลูกค้าได้มากกว่า 1 ครั้งหลังจากที่ลูกค้าให้สิทธิ์การอนุญาตแก่แอพของคุณในการส่งข้อความแล้ว

ให้ทำตามขั้นตอนเหล่านี้เพื่อสร้างเทมเพลตสำหรับข้อความแจ้งเตือนคำสั่งซื้อ

• ลงชื่อเข้าใช้ตัวจัดการธุรกิจ แล้วเลือกบัญชีธุรกิจของคุณ
• คลิกที่ไอคอนสามขีดที่มุมซ้ายบนของหน้า แล้วคลิกที่ตัวจัดการ WhatsApp
• ใช้แถบนำทางด้านข้าง วางเมาส์เหนือไอคอนเครื่องมือบัญชี แล้วคลิกที่เทมเพลตข้อความ
• คลิกสร้างเทมเพลตที่มุมขวาบนของหน้า
• ในหน้าต่อมา ให้เลือกตัวเลือกทางธุรกรรมสำหรับหมวดหมู่ของคุณ จากนั้นตั้งชื่อเทมเพลต (ในกรณีนี้คือ “order_confirmation”) แล้วเลือกภาษาของเทมเพลต

• คลิกดำเนินการต่อเพื่อไปยังตัวแก้ไขเทมเพลต

เมื่อตั้งค่าเทมเพลต order_confirmation เรียบร้อยแล้ว ก็ถึงเวลากำหนดโครงร่าง โดยข้อความที่แสดงให้ลูกค้าเห็นควรมีลักษณะดังนี้

• เราได้รับคำสั่งซื้อของคุณแล้ว!

• สวัสดีคุณ [ชื่อลูกค้า]

• ขอขอบคุณที่ช้อปปิ้งกับเรา

• ขณะนี้เรากำลังประมวลผลคำสั่งซื้อของคุณ (23190) โดยพัสดุจะถูกจัดส่งถึงคุณภายใน 2-3 วันทำการถัดไป (ไม่รวมวันหยุดเทศกาลและวันหยุดสุดสัปดาห์)

• เมื่อดำเนินการจัดส่งแล้ว คุณจะได้รับอีเมลอีกฉบับจากเรา

ในตัวแก้ไขเทมเพลตของคุณ ให้เลือกข้อความสำหรับส่วนหัว โดยย่อหน้า “เราได้รับ…” จะเป็นส่วนหัว ส่วนข้อความที่เหลือจะถูกคัดลอกลงในส่วนเนื้อความ

จากนั้น คลิกเพิ่มตัวแปร 2 ครั้งใต้กล่องข้อความส่วนเนื้อความเพื่อเพิ่มตัวแปร 2 ตัว คัดลอกและวางตัวแปรแรก ซึ่งก็คือ {{1}} ลงในตำแหน่งชื่อลูกค้า จากนั้น คัดลอกและวางตัวแปรที่ 2 ซึ่งก็คือ {{2}} ลงในตำแหน่งหมายเลขคำสั่งซื้อในวงเล็บ

เมื่อดำเนินการเสร็จแล้ว ข้อความของคุณควรมีลักษณะดังนี้ คุณสามารถตรวจสอบพื้นที่การแสดงตัวอย่างได้ในหน้าเดียวกัน

คลิกส่งเพื่อบันทึกเทมเพลตข้อความ

เมื่อเทมเพลตพร้อมแล้ว คุณก็สามารถใช้แพลตฟอร์ม WhatsApp Business เพื่อสร้าง Webhook ในส่วนผู้ดูแล Shopify ของคุณและแมปแอพพลิเคชั่นที่ส่งข้อความถึงลูกค้าโดยอัตโนมัติเมื่อลูกค้าทำการสั่งซื้อ

การใช้ Webhooks เพื่อส่งการแจ้งเตือนไปยังเซิร์ฟเวอร์ Express

สมมติว่าคุณต้องการส่งข้อความอัตโนมัติถึงลูกค้าทุกครั้งที่ลูกค้าทำการสั่งซื้อจากร้านค้า Shopify ของคุณ คุณสามารถตรวจสอบร้านค้าเพื่อดูคำสั่งซื้อใหม่ทุกๆ 5 นาทีหรือราวๆ นั้นได้ แต่การส่งคำขอ API ไปยังร้านค้าของคุณอย่างต่อเนื่องไม่ใช่วิธีที่มีประสิทธิภาพ โดยเฉพาะอย่างยิ่งหากไม่มีคำสั่งซื้อใหม่ๆ

ส่วนการให้ Webhook คอยติดตามเหตุการณ์ “การสร้างคำสั่งซื้อ” ในร้านค้าของคุณและแจ้งให้คุณทราบทุกครั้งที่ลูกค้าทำการสั่งซื้อจะมีประสิทธิภาพดีกว่ามาก

ขั้นตอนพื้นฐานในการสร้าง Webhook “การสร้างคำสั่งซื้อ” และแมปกับเซิร์ฟเวอร์ Express มีดังต่อไปนี้

ตั้งค่าโปรเจ็กต์ Node.js

เริ่มต้นด้วยการสร้างโฟลเดอร์ชื่อ “whatsapp-demo” สำหรับโปรเจ็กต์ของคุณ

จากนั้น เปิดเทอร์มินัลคำสั่ง cd ใน “whatsapp-demo” แล้วเรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มต้นโปรเจ็กต์ Node.js

npm init -y

ติดตั้ง Express ซึ่งเป็นไลบรารีที่ใช้สร้างเว็บเซิร์ฟเวอร์บน Node.js โดยเรียกใช้คำสั่งต่อไปนี้

npm i express

เมื่อตั้งค่าสภาพแวดล้อมการพัฒนาของคุณเรียบร้อยแล้ว ต่อไปจะเป็นการสร้างเซิร์ฟเวอร์ Express

สร้างเซิร์ฟเวอร์ Express

สร้างไฟล์ชื่อ test.js ภายในโฟลเดอร์ whatsapp-demo จากนั้นเปิดไฟล์ด้วยตัวแก้ไขซอร์สโค้ดที่คุณต้องการแล้วคัดลอกและวางโค้ดต่อไปนี้ลงไป

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

เมื่อใช้โค้ดข้างต้นแล้ว เซิร์ฟเวอร์ Express พื้นฐานก็จะได้รับการตั้งค่า โดยจะแสดงข้อความบนเทอร์มินัลของเซิร์ฟเวอร์เมื่อ Webhook ส่งการแจ้งเตือน “การสร้างคำสั่งซื้อ”

ทั้งนี้ คุณจะต้องตั้งค่าช่องทางการรับส่งข้อมูลก่อนที่จะแมปเข้ากับ Webhook ของ Shopify

ตั้งค่าช่องทางการรับส่งข้อมูล HTTPS

เมื่อตั้งค่า Webhook ทาง Shopify จะกำหนดให้คุณต้องระบุ URL สาธารณะที่จะส่งการแจ้งเตือน

หากคุณตั้งค่าตามบทแนะนำการใช้งานนี้บนเซิร์ฟเวอร์สาธารณะ ให้ใช้ URL ของเซิร์ฟเวอร์นั้น แต่ถ้าหากคุณตั้งค่าตามบทแนะนำการใช้งานนี้บนเครื่องในระบบของคุณ คุณจะต้องสร้างช่องทางการรับส่งข้อมูลที่มี URL HTTPS ที่เข้าถึงได้แบบสาธารณะ

ขั้นตอนแรก ให้ติดตั้ง ngrok โดยเรียกใช้คำสั่งต่อไปนี้

npm install -g ngrok

จากนั้น เปิดหน้าต่างเทอร์มินัลขึ้นมาอีกหน้าต่างหนึ่งแล้วเรียกใช้คำสั่งต่อไปนี้เพื่อรับ URL ที่มีการตั้งค่าช่องทางการรับส่งข้อมูลสำหรับเซิร์ฟเวอร์ในระบบของคุณ

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

จด URL ที่ได้รับ เนื่องจากคุณจะต้องใช้ในขั้นตอนถัดไป โปรดทราบว่าหากคุณรีสตาร์ทไคลเอ็นต์นี้ คุณจะได้รับ URL ใหม่และจะต้องอัพเดตการอ้างอิงถึง URL ดังกล่าวทั้งหมด

สร้าง Webhook ใน Shopify

ไปที่ส่วนผู้ดูแลร้านค้า Shopify ของคุณแล้วไปที่การตั้งค่า > การแจ้งเตือน เมื่อเข้ามาแล้ว ให้เลื่อนลงไปที่ Webhooks แล้วคลิกที่ปุ่มสร้าง Webhook

เพิ่ม Webhook สำหรับ “การสร้างคำสั่งซื้อ” และระบุ URL ช่องทางการรับส่งข้อมูลหรือ URL สาธารณะที่คุณสร้างไว้ในส่วนก่อนหน้านี้

เรียกใช้เซิร์ฟเวอร์ในระบบของคุณบนอีกเทอร์มินัลหนึ่งที่มีโหนด index.js จากนั้นคลิกส่งการแจ้งเตือนทดสอบ

หากทุกอย่างเป็นไปด้วยดี คุณจะได้รับข้อความนี้บนเทอร์มินัลของเซิร์ฟเวอร์ของคุณว่า “ใช่ เราได้รับคำสั่งซื้อแล้ว”

ตอนนี้คุณมีการเชื่อมต่อที่ใช้งานได้ระหว่างร้านค้า Shopify ของคุณกับเซิร์ฟเวอร์ Express แล้ว ขั้นตอนต่อไป คุณจะส่งเทมเพลตข้อความ WhatsApp ให้กับลูกค้าหลังจากที่ลูกค้าสั่งซื้อ

ส่งข้อความที่กำหนดเองด้วยเทมเพลต "order_notification"

ขั้นตอนแรก ให้ติดตั้ง Axios โดยเรียกใช้คำสั่งต่อไปนี้บนเทอร์มินัลของคุณ

npm i axios

คุณจะใช้ Axios เพื่อส่งคำขอ POST ที่ใช้ในการส่งข้อความ WhatsApp ให้กับลูกค้า

หลังจากติดตั้ง Axios แล้ว ให้สร้างอีกไฟล์หนึ่งในโฟลเดอร์โปรเจ็กต์ของคุณที่ชื่อว่า customMessage.js จากนั้นนำเข้า Axios และ Express ลงในไฟล์ด้วยโค้ดต่อไปนี้

const axios = require('axios').default
const express = require('express')
const app = express()

จากนั้น สร้างเส้นทางเพื่อจัดการการแจ้งเตือนการสร้างคำสั่งซื้อจาก Shopify โดยเรียกใช้คำสั่งต่อไปนี้

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

เมื่อ Shopify เรียกใช้ /webhooks/orders/create ที่มีคำสั่งซื้อ ระบบจะส่งรายละเอียดคำสั่งซื้อไปยังเส้นทางภายใน res ซึ่งเป็นอาร์กิวเมนต์ที่ 2 ของฟังก์ชั่นการเรียกกลับแบบไม่ซิงค์กันและอ็อบเจ็กต์ JavaScript ของคุณ

จากนั้น ให้รับหมายเลขโทรศัพท์ ชื่อ และ ID คำสั่งซื้อของลูกค้าจากรายละเอียดคำสั่งซื้อ และใช้ข้อมูลเหล่านี้เพื่อสร้างพารามิเตอร์คำขอ API ดังนี้

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
} 

อ็อบเจ็กต์ข้างต้นมีพารามิเตอร์ทั้งหมดที่จำเป็นสำหรับการดำเนินการตามคำขอ อย่าลืมตรวจสอบให้แน่ใจว่าชื่อเทมเพลตที่ระบุในอ็อบเจ็กต์นั้นตรงกับชื่อที่สร้างขึ้นก่อนหน้านี้ในตัวจัดการ WhatsApp Business ของคุณ

ขั้นตอนต่อไป สร้างอ็อบเจ็กต์การกำหนดค่าที่มีอ็อบเจ็กต์ส่วนหัวที่ซ้อนกัน ภายในส่วนหัว ให้กำหนดโทเค็นการเข้าถึง WhatsApp ของคุณเป็นค่าของการอนุญาต (แทนที่ ACCESS_TOKEN ด้วยโทเค็นดังกล่าว) และกำหนด application/json เป็น Content-Type ดังนี้

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

ขั้นตอนต่อไป สร้างคำขอ POST ด้วย Axios แล้วส่งทั้งอ็อบเจ็กต์การกำหนดค่าและอ็อบเจ็กต์ข้อมูลเป็นอาร์กิวเมนต์ ให้ซ้อนเมธอด then และ catch เพื่อแสดงผลลัพธ์ (หรือข้อความแสดงข้อผิดพลาดหากพรอมิสล้มเหลว) ดังนี้

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

แทนที่ YOUR_WABA_ID ด้วย ID ของ WhatsApp Business จากแดชบอร์ดของแอพ WhatsApp ของคุณและแทนที่ API_VERSION ด้วยเวอร์ชั่นของ API ระบบคลาวด์ที่เข้ากันได้ (ค่าเริ่มต้นคือเวอร์ชั่น 15.0)

ตั้งค่าแอพเสร็จแล้ว!

ในการทดสอบ ช่องทางการรับส่งข้อมูล ngrok ยังควรทำงานอยู่ และคุณจะต้องสตาร์ทเซิร์ฟเวอร์ Express ในเทอร์มินัลที่แยกกัน ดังนี้

node customMessages.js

เหตุการณ์ Shopify อื่นๆ

นอกจากการสั่งซื้อแล้ว Shopify ยังมี Webhooks มากกว่า 50 รูปแบบสำหรับเหตุการณ์ต่างๆ โดยคุณสามารถสมัครรับข้อมูลเกี่ยวกับการสร้างและอัพเดตรถเข็น การสร้างและอัพเดตคอลเลกชั่นผลิตภัณฑ์ ความพยายามในการเรียกเก็บเงินที่สำเร็จและล้มเหลว และอื่นๆ อีกมากมาย

หากต้องการใช้ Webhooks เหล่านี้ ให้ทำตามรูปแบบที่คล้ายกันดังที่อธิบายไว้ข้างต้นโดยสร้าง Webhook ขึ้นมาใหม่ในส่วนผู้ดูแล Shopify และลงทะเบียนหัวข้อนั้นเป็นเส้นทางในเซิร์ฟเวอร์ Express ของคุณ

ดังที่ได้เห็นกันไปแล้ว แพลตฟอร์ม WhatsApp Business ช่วยให้คุณสื่อสารกับลูกค้าได้อย่างราบรื่น ไม่ว่าจะเป็นการสื่อสารด้วยตนเองหรือด้วยโปรแกรมตามเหตุการณ์ในร้านค้า Shopify ของคุณ

การผสานการทำงาน WhatsApp ของ Shopify ช่วยให้คุณสามารถส่งข้อความจำนวนมากถึงลูกค้าได้แบบเรียลไทม์ คุณจะส่งข้อความแบบอัตโนมัติ (เช่น ตามเหตุการณ์) หรือส่งด้วยตนเองก็ได้ ซึ่งการส่งข้อความนั้นไม่เพียงแค่ตั้งค่าได้ง่าย แต่ยังสามารถปรับขนาดได้อีกด้วย การนำ WhatsApp มาใช้ร่วมกับ Shopify ทำให้การสื่อสารกับลูกค้ามีความสอดคล้องกัน มีประสิทธิภาพ และสร้างผลลัพธ์ที่ดี

หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับวิธีผสานการทำงาน WhatsApp เข้ากับแอพและโปรเจ็กต์ต่างๆ ของคุณ โปรดดูบทแนะนำการใช้งานสำหรับผู้พัฒนาอื่นๆ ของเรา