將 WhatsApp 整合至 Shopify

2023年3月7日發佈者：Rashed Talukder

訂閱開發人員最新消息

身為中大型企業的 Shopify 開發人員，您想必知道與顧客完美溝通有多重要。為了達成此目標，您可以利用 WhatsApp Business 平台，將自動化訊息傳送給成千上萬的顧客，並隨著您的客群逐漸成長高效率的調整流程規模。

本教學導覽會說明將 WhatsApp 串連至 Shopify 的程序，並根據在商店內觸發的事件傳送 WhatsApp 通知訊息給顧客，例如新增產品至購物車或下單。此功能將會使用由 Meta 代管的雲端 API 進行。

先決條件

若要使用本教學導覽的方法，您必須：

安裝 Node.js 及 npm
已經設定好產品與付款流程的 Shopify 商店
在 Meta for Developer 上註冊開發人員帳號、設定企業應用程式，並選擇 WhatsApp Business 帳號。

完成最後步驟，將授予臨時存取權杖。您在此教學導覽的其餘部分會需要此權杖，請妥善保存。

一旦您符合上述要求，就可以繼續進行教學導覽的其餘部分。

在 WhatsApp 上建立訊息範本

WhatsApp 訊息有助您建立您使用不只一次的多種訊息格式，可在顧客提供您應用程式權限後，傳送訊息給顧客。

使用這些步驟建立訂單通知訊息的範本：

登入您的企業管理平台，然後選擇您的商業帳號。
按一下頁面左上角的三行圖示，再按 WhatsApp 管理工具。
使用側邊導覽列，將滑鼠移到帳號工具圖示上方，然後按一下訊息範本。
按一下頁面右上角的建立範本。
在下一頁的類別中選擇交易選項，然後提供範本名稱（本例中為「order_confirmation」）並選擇語言。

按一下繼續，繼續進行範本編輯。

order_confirmation 範本現已設定完成，現在該定義其概要了。以下是顧客看見的訊息呈現方式：

我們已收到您的訂單！
[顧客姓名] 您好：
感謝您的光臨。
我們正在處理您的訂單 (23190)。您的包裹會在 2-3 個工作天內寄出（假日與週末不計）。
包裹寄出時，您會收到我們的另一封郵件。

在範本編輯的標頭區塊選擇文字。「我們已收到...」這一段將是標頭，其餘的訊息內容則會複製到內文區塊中。

接著，按內文文字方塊下方的新增變數兩次，新增兩個變數。複製貼上第一個變數 — {{1}}，取代顧客姓名。然後複製貼上第二個變數 — {{2}}，取代括號內的訂單號碼。

完成後，訊息看起來應該像這樣。您可以查看同一頁的預覽區域。

按一下提交儲存訊息範本。

範本準備就緒之後，您就可以在 Shopify 管理員介面中使用 WhatsApp Business 平台建立 Webhook，並對應會在下單時自動傳送訊息給顧客的應用程式。

使用 Webhooks 傳送通知至 Express 伺服器

假設您想要在顧客前往 Shopify 商店下單時，傳送自動化訊息給顧客。您可以每五分鐘（或其他間隔）檢查商店的新訂單。不過，頻頻傳送 API 要求至商店會拖慢效率，尤其是沒有新訂單時。

若交由 Webhook 接聽商店的「訂單成立」事件，再於每次顧客下單時通知您，效率會提高許多。

以下是建立「訂立建立」Webhook 並將其對應至 Express 伺服器的基本步驟。

設定 Node.js 專案

從建立名稱為「whatsapp-demo」的專案資料夾開始。

接下來，在「whatsapp-demo」中啟動 terminal cd 指令，並執行下列指令初始化 Node.js 專案：

npm init -y

安裝 express，也就是在 Node.js 上使用下列指令用於建立 Web 伺服器的程式庫：

npm i express

您的開發環境已設定完成，接著要建立 Express 伺服器。

建立 Express 伺服器

在 whatsapp-demo 資料夾內建立名為 test.js 的檔案。使用您偏好的開放原始碼編輯器開啟該檔案，並將下列程式碼複製貼入檔案：

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

使用上方的程式碼，您已設定當 Webhook 傳送「訂單建立」通知時，在伺服器終端機上顯示訊息的基本 Express 伺服器。

將其對應至 Shopify Webhook 之前，您必須先設定通道。

設定 HTTPS 流量通道

設定 Webhook 時，Shopify 會要求您提供傳送通知的公開網址。

如果您在公開伺服器上使用本教學導覽的方法，請使用該網址。若您在本機機器上使用本教學導覽的方法，則必須以可公開存取的 HTTPS 網址建立通道。

首先，執行下列指令安裝 ngrok：

npm install -g ngrok

接著，啟動不同的終端機視窗並執行下列指令，以取得本機伺服器已建立通道的網址：

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

記錄該網址，因為下一個步驟中會需要使用。請注意：如果您重新啟動此用戶端，會取得新網址且需要更新所有參照該舊網址的內容。

在 Shopify 中建立 Webhook

前往您的 Shopify 商店並前往設定 > 通知。抵達之後，向下捲動至 Webhooks 並點選 建立 Webhook。

新增「訂單建立」Webhook，並指定您的通道網址或您在前一個區塊中建立的公開網址。

在節點為 index.js 的另一個終端機上執行本機伺服器，然後點選傳送測試通知。

若一切順利，您會在伺服器的終端機上收到此訊息：「是的，我們已收到訂單」。

現在您的 Shopify 商店和 Express 伺服器之間已建立有效連線。接下來，您將在顧客下單後傳送 WhatsApp 訊息範本給顧客。

傳送使用「order_notification」範本的自訂訊息

首先，在您的終端機上執行下列指令安裝 Axios：

npm i axios

您將使用 Axios 提出負責傳送 WhatsApp 訊息給顧客的 POST 要求。

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 呼叫 Webhook/訂單/使用訂單建立時，會將訂單詳情傳送至 res 內的路徑，也就是您非同步回呼函數及 JavaScript 物件的第二個引數。

接下來，從訂單詳情中抓取顧客的電話號碼、名字和訂單編號，並使用這些資訊建構 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 管理工具中建立的名稱。

接著，使用巢狀標頭物件建立 config 物件。在標頭之內，將您的 WhatsApp 存取權杖設為授權值（用權杖取代 ACCESS_TOKEN），並將應用程式/json 設為 Content-Type：

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

接下來，使用 Axios 建立 POST 要求，並以引數轉送 config 物件及 data 物件。巢狀處理 then 和 catch 方法，以顯示結果（或錯誤訊息，若 Promise 失敗）：

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

用取自 WhatsApp 應用程式主控板的 WhatsApp Business 編號取代 YOUR_WABA_ID，並以相容的雲端 API 版本（預設值為 v15.0）取代 API_VERSION

應用程式設定完成！

若要測試，應保持執行 ngrok 通道，且您必須在單獨的終端機上啟動 Express 伺服器：