Tích hợp WhatsApp vào Shopify

Với vai trò là nhà phát triển Shopify cho doanh nghiệp có quy mô vừa hoặc lớn, bạn biết tầm quan trọng của việc giao tiếp liền mạch với khách hàng. Để đạt được điều này, bạn có thể tận dụng Nền tảng WhatsApp Business để gửi tin nhắn tự động cho hàng nghìn khách hàng và mở rộng quy trình này một cách hiệu quả khi cơ sở khách hàng tăng lên.

Hướng dẫn này trình bày quy trình kết nối WhatsApp với Shopify và gửi tin nhắn thông báo WhatsApp cho khách hàng dựa trên các sự kiện họ kích hoạt trong cửa hàng, chẳng hạn như thêm sản phẩm vào giỏ hàng hoặc đặt hàng. Để thực hiện việc này, chúng tôi sẽ sử dụng API Đám mây do Meta lưu trữ.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, bạn sẽ cần:

• Cài đặt Node.js và npm
• Có cửa hàng trên Shopify đã thiết lập quy trình xử lý sản phẩm và khoản thanh toán
• Đăng ký tài khoản nhà phát triển trên Meta for Developer, thiết lập Ứng dụng kinh doanh và chọn Tài khoản WhatsApp Business.

Sau khi hoàn tất bước cuối cùng, bạn sẽ được cấp một mã truy cập tạm thời. Hãy giữ mã đó vì bạn sẽ cần đến trong phần còn lại của hướng dẫn này.

Khi đã đáp ứng các yêu cầu nêu trên, bạn có thể tiếp tục thực hiện phần còn lại của hướng dẫn.

Tạo mẫu tin nhắn trên WhatsApp

Mẫu tin nhắn trên WhatsApp giúp bạn tạo nhiều định dạng tin nhắn mà bạn có thể dùng nhiều lần để nhắn tin cho khách hàng sau khi họ cho phép ứng dụng của bạn làm như vậy.

Hãy làm theo các bước dưới đây để tạo mẫu cho tin nhắn thông báo về đơn đặt hàng:

• Đăng nhập vào Trình quản lý kinh doanh và chọn tài khoản kinh doanh của bạn.
• Nhấp vào biểu tượng 3 dòng kẻ ở góc trên cùng bên trái của trang rồi nhấp vào Trình quản lý WhatsApp.
• Trên bảng điều hướng bên, di chuột lên biểu tượng Công cụ trong tài khoản rồi nhấp vào Mẫu tin nhắn.
• Nhấp vào Tạo mẫu ở góc trên cùng bên phải của trang.
• Trên trang tiếp theo, chọn tùy chọn Giao dịch cho hạng mục của bạn, sau đó đặt tên cho mẫu (trong trường hợp này là "order_confirmation") rồi chọn ngôn ngữ cho mẫu đó.

• Nhấp vào Tiếp tục để chuyển đến công cụ chỉnh sửa mẫu.

Giờ thì mẫu order_confirmation đã được thiết lập xong, đã đến lúc xác định dàn ý của mẫu. Sau đây là cách tin nhắn sẽ hiển thị với khách hàng:

• Chúng tôi đã nhận được đơn đặt hàng của bạn!

• Chào [tên khách hàng],

• Cảm ơn bạn đã mua sắm trên hệ thống của chúng tôi.

• Chúng tôi đang xử lý đơn đặt hàng của bạn (23190). Bạn sẽ nhận được gói hàng trong vòng 2-3 ngày làm việc tới (không tính ngày lễ và cuối tuần).

• Lúc đó, bạn sẽ nhận được một email khác từ chúng tôi.

Trong công cụ chỉnh sửa mẫu, hãy chọn Văn bản cho phần Tiêu đề. Đoạn văn "Chúng tôi đã nhận được…" sẽ là Tiêu đề, nội dung còn lại của tin nhắn nêu trên sẽ được sao chép vào phần Nội dung.

Tiếp theo, nhấp vào Thêm biến (ở bên dưới ô văn bản Nội dung) 2 lần để thêm 2 biến. Sao chép và dán biến đầu tiên - {{1}} - thay cho tên khách hàng. Sau đó, sao chép và dán biến thứ hai - {{2}} - thay cho số đơn đặt hàng vào bên trong dấu ngoặc.

Khi hoàn tất, tin nhắn của bạn sẽ trông như thế này. Bạn có thể kiểm tra khu vực xem trước trên chính trang đó.

Nhấp vào Gửi để lưu mẫu tin nhắn.

Giờ thì mẫu đã sẵn sàng. Bạn có thể sử dụng Nền tảng WhatsApp Business để tạo một webhook trên trang quản trị Shopify và ánh xạ một ứng dụng tự động gửi tin nhắn cho khách hàng khi họ đặt hàng.

Sử dụng webhook để gửi thông báo đến máy chủ express

Giả sử bạn muốn gửi tin nhắn tự động cho khách hàng mỗi khi họ đặt hàng trong cửa hàng Shopify của bạn. Cứ sau khoảng 5 phút, bạn có thể kiểm tra các đơn đặt hàng mới trong cửa hàng này. Tuy nhiên, việc gửi yêu cầu API liên tục đến cửa hàng của bạn không hiệu quả - đặc biệt trong trường hợp không có đơn đặt hàng mới nào.

Sẽ hiệu quả hơn nhiều nếu có một webhook theo dõi sự kiện "tạo đơn đặt hàng" trên cửa hàng của bạn và thông báo cho bạn mỗi khi khách hàng đặt hàng.

Sau đây là các bước cơ bản để tạo webhook "tạo đơn đặt hàng" và đối ghép webhook này với máy chủ express.

Thiết lập dự án Node.js

Bắt đầu bằng cách tạo một thư mục có tên là "whatsapp-demo" cho dự án của bạn.

Tiếp đến, khởi chạy cửa sổ dòng lệnh cd trong thư mục "whatsapp-demo" rồi thực thi lệnh dưới đây để khởi tạo dự án Node.js:

npm init -y

Cài đặt express - thư viện dùng để tạo máy chủ web trên Node.js - bằng cách chạy lệnh dưới đây:

npm i express

Giờ thì môi trường phát triển đã được đặt xong, bạn sẽ tạo máy chủ express.

Tạo máy chủ express

Tạo một file có tên là test.js bên trong thư mục whatsapp-demo. Mở file đó bằng công cụ chỉnh sửa mã nguồn bạn muốn rồi sao chép và dán mã dưới đây vào đó:

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!'))

Bằng việc sử dụng mã ở trên, bạn đã thiết lập một máy chủ express cơ bản để hiển thị tin nhắn trên cửa sổ dòng lệnh của máy chủ đó khi webhook gửi thông báo "tạo đơn đặt hàng".

Trước tiên, bạn phải thiết lập một hệ thống phân luồng thì mới ánh xạ được thông báo đó với webhook Shopify.

Thiết lập hệ thống phần luồng lưu lượng truy cập HTTPS

Khi thiết lập webhook, Shopify sẽ yêu cầu bạn cung cấp một URL công khai để gửi thông báo.

Nếu bạn làm theo hướng dẫn này trên một máy chủ công khai, hãy dùng URL của máy chủ đó. Nếu làm theo hướng dẫn này trên máy cục bộ của mình, bạn sẽ cần tạo một hệ thống phân luồng với URL HTTPS có thể truy cập công khai.

Trước tiên, cài đặt ngrok bằng cách thực thi lệnh dưới đây:

npm install -g ngrok

Tiếp theo, khởi chạy một cửa sổ dòng lệnh khác rồi chạy lệnh dưới đây để lấy URL đã phân luồng cho máy chủ cục bộ của bạn:

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

Ghi lại URL này vì bạn sẽ cần đến trong bước tiếp theo. Lưu ý rằng nếu khởi động lại máy khách này, bạn sẽ nhận được một URL mới và cần cập nhật toàn bộ thông tin tham chiếu đến URL đó.

Tạo webhook trong Shopify

Truy cập vào trang quản trị của cửa hàng Shopify và chuyển đến phần Cài đặt > Thông báo. Tại đây, cuộn xuống mục Webhooks rồi nhấp vào Tạo webhook.

Thêm webhook "tạo đơn đặt hàng" và chỉ định URL phân luồng hoặc URL công khai mà bạn đã tạo ở phần trước.

Chạy máy chủ cục bộ của bạn trên một cửa sổ dòng lệnh khác bằng nút index.js rồi nhấp vào Gửi thông báo thử nghiệm.

Nếu không có vấn đề gì, bạn sẽ nhận được tin nhắn như sau trên cửa sổ dòng lệnh của máy chủ đó: "Vâng, chúng tôi đã nhận được một đơn đặt hàng."

Bây giờ, bạn đã có một kết nối hoạt động giữa cửa hàng Shopify và máy chủ Express. Tiếp đến, bạn sẽ gửi mẫu tin nhắn trên WhatsApp cho khách hàng sau khi họ đặt hàng.

Gửi tin nhắn tùy chỉnh bằng mẫu "order_notification"

Trước tiên, cài đặt Axios bằng cách chạy lệnh dưới đây trên cửa sổ dòng lệnh của bạn:

npm i axios

Bạn sẽ dùng Axios để tạo yêu cầu POST chịu trách nhiệm gửi tin nhắn WhatsApp cho khách hàng.

Sau khi cài đặt Axios, hãy tạo một file khác trong thư mục dự án có tên là customMessage.js rồi nhập axios và express vào file này bằng mã dưới đây:

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

Tiếp theo, tạo một đường dẫn để xử lý thông báo tạo đơn đặt hàng từ Shopify bằng cách chạy lệnh dưới đây:

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

})

Khi Shopify gọi /webhooks/orders/create bằng một đơn đặt hàng, thông tin chi tiết về đơn đặt hàng đó sẽ được gửi đến đường dẫn bên trong phản hồi, đối số thứ hai của hàm gọi lại không đồng bộ và một đối tượng JavaScript.

Sau đó, lấy số điện thoại, tên và ID đơn đặt hàng của khách hàng trong thông tin chi tiết về đơn đặt hàng, rồi dùng những thông tin này để tạo các thông số yêu cầu 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}`
          }
        ]
      }
    ] 
  } 
} 

Đối tượng ở trên chứa tất cả những thông số bắt buộc để hoàn tất yêu cầu. Đảm bảo tên mẫu được chỉ định trong đối tượng này khớp với tên mẫu đã tạo trước đó trong Trình quản lý WhatsApp Business.

Tiếp theo, tạo một đối tượng cấu hình có đối tượng tiêu đề lồng nhau. Bên trong phần tiêu đề, đặt mã truy cập WhatsApp làm giá trị Ủy quyền (thay thế ACCESS_TOKEN bằng mã này) và đặt application/json làm Content-Type:

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

Sau đó, tạo một yêu cầu POST bằng Axios và chuyển cả đối tượng cấu hình lẫn đối tượng dữ liệu vào làm đối số. Lồng rồi đón bắt các phương thức để hiển thị kết quả (hoặc thông báo lỗi nếu cơ chế bất đồng bộ gặp sự cố):

  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);
}

Thay thế YOUR_WABA_ID bằng ID WhatsApp Business của bạn trong bảng điều khiển Ứng dụng WhatsApp và thay thế API_VERSION bằng phiên bản API Đám mây tương thích (mặc định là v15.0)

Vậy là đã thiết lập xong ứng dụng!

Nếu muốn thử nghiệm ứng dụng này, bạn sẽ cần khởi động máy chủ express trong một cửa sổ dòng lệnh riêng biệt vì hệ thống phân luồng ngrok vẫn đang chạy:

node customMessages.js

Sự kiện khác trên Shopify

Ngoài webhook đặt hàng, Shopify còn cung cấp hơn 50 webhook cho các sự kiện khác nhau. Bạn có thể đăng ký nhận webhook tạo và cập nhật giỏ hàng, tạo và cập nhật bộ sưu tập sản phẩm, lần lập hóa đơn thành công và không thành công cùng nhiều webhook khác.

Nếu bạn muốn sử dụng bất kỳ webhook nào trong số này, hãy làm theo quy trình tương tự như mô tả ở trên, bằng cách tạo webhook mới trên trang quản trị Shopify và đăng ký chủ đề làm đường dẫn trong máy chủ express.

Như bạn thấy, Nền tảng WhatsApp Business giúp bạn giao tiếp liền mạch với khách hàng cả theo cách thủ công lẫn theo cách lập trình dựa trên các sự kiện trong cửa hàng Shopify của bạn.

Với tiện ích tích hợp WhatsApp của Shopify, bạn có thể gửi hàng loạt tin nhắn cho khách hàng theo thời gian thực. Tin nhắn có thể được gửi tự động (ví dụ: dựa trên một sự kiện) hoặc thủ công. Tiện ích tích hợp này không chỉ dễ thiết lập, mà còn có khả năng mở rộng quy mô khá tốt. Khi ghép nối WhatsApp với Shopify, hoạt động giao tiếp với khách hàng sẽ trở nên nhất quán, hiệu quả và có tác động mạnh mẽ.

Để biết thêm về cách tích hợp WhatsApp vào ứng dụng và dự án của bạn, hãy xem các tài liệu khác dành cho nhà phát triển mà chúng tôi cung cấp.