將 WhatsApp 整合到 Shopify

作為中大型企業的 Shopify 開發人員，您也明白與顧客的溝通暢通無阻非常重要。為實現這一點，您可以利用 WhatsApp Business 平台來幫助您向成千上萬的顧客自動傳送訊息，並隨著客群增長有效率地擴大此規模。

本教學導覽會講解將 WhatsApp 與 Shopify 連結，然後視乎顧客在商店內觸發的事件（如將商品加入購物車或提交訂單）向其傳送 WhatsApp 通知訊息的過程。為此，我們將會用到由 Meta 託管的雲端 API。

必要條件

為了按照本教學導覽操作，您需要準備以下事項：

• 安裝 Node.js 和 npm
• 在 Shopify 上建立商店，並且設定商品和付款處理方式
• 在 Meta for Developers 上註冊開發人員帳戶、設定商業應用程式，並且選擇 WhatsApp Business 帳戶。

完成最後一步後，系統將提供臨時存取憑證。在本教學導覽的餘下部分，您將需要用到此憑證，因此請妥善保管。

當您準備好以上事項後，便可繼續按照本教學導覽的餘下部分操作。

在 WhatsApp 上建立訊息範本

WhatsApp 訊息範本有助您建立多種訊息格式，這樣當顧客授權您的應用程式向其傳送訊息後，您便可不斷重用這類訊息範本來向顧客傳送訊息。

請按照以下步驟建立訂單通知訊息範本：

• 登入企業管理平台並選擇您的商業帳戶。
• 點擊頁面左上角的三條線圖示，然後點擊 WhatsApp 管理工具。
• 將鼠標移到側邊導覽面板的帳戶工具圖示上方，然後點擊訊息範本。
• 點擊頁面右上角的建立範本。
• 在接下來出現的頁面中，選擇交易選項作為您的類別，然後為範本命名（在本例中我們將其名為「order_confirmation」）及選擇語言。

• 點擊繼續以進入範本編輯器。

我們現在已設定好 order_confirmation 範本，是時候敲定其大概內容了。以下是系統會向顧客顯示的訊息：

• 我們已收到您的訂單！

• [customer’s name]，您好：

• 多謝惠顧。

• 我們正在處理您的訂單（23190）。您的包裹將在接下來的 2 至 3 個工作日（假日和週末除外）內配送。

• 包裹配送時，我們將向您傳送另外一封電郵。

在範本編輯器中，就標題部分選擇文字。這樣「我們已收到……」這一段將成為標題，而訊息餘下的內容將複製到內文部分。

接著，點擊「內文文字」方格下方的新增變數兩次，以新增兩個變數。複製並貼上第一個變數「{{1}}」以取代顧客姓名。接著，複製並貼上第二個變數「{{2}}」以取代括號內的訂單編號。

完成後，您的訊息應如下所示。您可以在同一頁面的預覽區域檢查編輯結果。

點擊提交以儲存訊息範本。

現在範本已經就緒，您可以使用 WhatsApp Business 平台來在 Shopify 管理員介面中建立 Webhook，並且指定由哪個應用程式在顧客提交訂單時自動向其傳送訊息。

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

假設您希望每當顧客透過您的 Shopify 商店提交訂單時，您都能向其自動傳送訊息。為此，您可以選擇每五分鐘左右查看一下商店有沒有新訂單。然而，持續向商店傳送 API 要求的做法效率非常低，而如果發現沒有收到新訂單，就只會顯得更徒勞無功。

若能使用 Webhook 來偵聽商店的「訂單建立」事件，並在有顧客提交訂單時通知您，這樣的做法想必能更有效率。

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

建立 Node.js 專案

首先，為您的專案建立一個名為「whatsapp-demo」的資料夾。

接著，在「whatsapp-demo」中啟用指令終端 cd，並執行以下指令來初始化 Node.js 專案：

npm init -y

運行以下指令以安裝 express，即用於在 Node.js 上建立網站伺服器的資料庫：

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

透過上述程式碼，您便可設定好基本 Express 伺服器，以便在 Webhook 傳送「訂單建立」通知時於伺服器終端顯示相關訊息。

在將此伺服器對應到 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 商店的管理員介面，前往 Settings > Notifications。進入相應頁面後，向下捲動至 Webhooks 並點擊 Create webhook。

新增用於「訂單建立」的 Webhook，並且指定您在上一部分中建立的通道網址或公開網址。

以 index.js 節點在另一個終端上運行您的本機伺服器，然後點擊 Send test notification。

如果一切正常，您將在伺服器終端收到訊息，內容為：「太好了，我們收到了訂單。」

現在，您已在 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 中的路徑，也就是非同步呼叫函數的第二個引數，屬於 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 存取憑證設為 Authorization 的值（以憑證取代 ACCESS_TOKEN），並將 Content-Type 設為 application/json：

 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 伺服器：

node customMessages.js

其他 Shopify 事件

除了建立訂單外，Shopify 還可為不同的事件提供超過 50 種 Webhooks。您可以訂閱購物車建立和更新、商品收藏分類建立和更新、成功和失敗的帳單付款嘗試等各種其他事件。

若要使用任何這些 Webhooks，請按照與上述類似的模式，在 Shopify 管理員介面中建立一個新 Webhook，並且在 Express 伺服器中將有關主題登記為路徑。

如各位所見，WhatsApp Business 平台可以基於您 Shopify 商店上的事件，幫助您以手動或程式輔助的方式與顧客順暢溝通。

Shopify 的 WhatsApp 整合工具讓您可以即時批量地向各位顧客傳送訊息。您可以自動（例如基於事件）或手動傳送訊息。此功能不僅易於設定，而且可以輕鬆擴大規模。透過連結 WhatsApp 與 Shopify，您可以一致和有效與顧客溝通，帶來理想效果。

如要深入了解如何將 WhatsApp 整合到應用程式和專案中，請參閱我們其他的開發人員教學導覽。