將 WhatsApp 整合到您的電子商務流程中

WhatsApp Business Platform 幫助企業使用 API 直接與客戶溝通,發送標準化訊息、接收客戶回應並進行相應回應。

本演練示範了一家在線銷售產品的虛構雜貨店如何讓客戶了解最新的訂單狀態。您的應用程式將使用 Meta 託管的 Cloud API 來建立 WhatsApp 訊息範本。然後可以使用這些模板向電子商務客戶提供一致且標準化的資訊。

在現實世界中,訂單狀態會根據客戶的操作而改變。例如,註冊、使用信用卡付款或完成購買。您可以透過將 WhatsApp Business Platform 與 CRM 或電子商務系統整合來實現此目的,但這超出了本教學的範圍。在這裡,我們將建立一個手動更新系統,以便我們可以專注於建立和管理訊息範本。

首先我們將建立一個由 WhatsApp 驅

 

動的  應用程式。如果您想預覽最終結果,可以下載完整的應用程式程式碼。

按照設定開發人員資產和平台存取教學課程,使用測試電話號碼發送和接收訊息。確保您在 Meta for Developers 上建立初始應用程序,將其與 WhatsApp 連接,並將其與業務管理平台關聯。

您還需要了解 Node.js 和安裝的所有必要工具。

使用 Node.js 和 Express 建立最小應用程式
本文假設您知道如何在 Node.js 中建立基本應用程式。我們將提供範例應用程式程式碼並展示如何實作 WhatsApp 訊息範本功能。

下載原始程式碼時這是您

 

在程式碼編輯器中看到的資料夾結構。我們將主要從事bin, public, routes,和views編輯工作。

bin 資料夾:包含節點模組中的可執行二進位。
public 資料夾:包 所有 新加坡 whatsapp 號碼數據 靜態文件,例如圖像、JavaScript 和 CSS 文件。
路由資料夾:包含在app.js檔案中註冊的路由。路由是 JavaScript 程式碼,Express.js 使用它們將 HTTP 動詞(GET、POST、PUT 等)與 URL 路徑和處理 HTTP 請求的函數關聯起來。
視圖資料夾:包含 EJS/HTML 檔案以及 EJS 視圖引擎用來呈現網頁的標記邏輯。
app.js 檔案:註冊路由並啟動 Node.js Web 伺服器。
.env 檔案:包含定義項目所需的環境變數的鍵和值對。該檔案允許在不修改專案程式碼的情況下配置應用程式。
檔案:這是 Node.js 專案的核心,包含專案管理和安裝相依性、執行腳本以及識別專案入口點所需的必要元資料。

新加坡 whatsapp 號碼數據

首先開啟位於專案根

 

資料夾中的檔案:請注意依賴項部分中列出的要求。要運行應用程序,您必須先安裝這些依賴項。打開控制台並運行npm install以安裝這些依賴項。

此範例使用用 Node.js、 Express、EJS編寫的最小應用程式。該應用程式的主頁基於Bootstrap構建,並具有一個簡單的表單,您稍後可 俄羅斯人對這場戰爭有何看法?電報數據 以使用它來建立發送給客戶的訊息範本。

在我們繼續之前,您的 Node.js 應用程式需要您在 Meta for Developers 上的開發者帳戶的特定資料。

編輯.env項目根資料夾 將 WhatsApp 整合到 中的文件,根據先決條件部分中提到的教程,將括號中的以下值替換為 WhatsApp Business 帳戶儀表板中的資料:
使用 Node.js 和 WhatsApp Business Platform 建立訊息模板
現在我們準備開始建立您的第一個訊息模板。

位於該資料夾中的文

 

處理 createTemplates HTTP POST 請求。
驗證模板是否已存在。
取得建立每個訊息範本所需的配置。
使用 Cloud API 建立訊息範本。
建立模板後將應用程式重定向到主頁。
使用以下程 香港新聞 式碼在資料夾createTemplates.js中建立一個名為的新檔案。/routes該檔案包含處理來自主頁的請求所需的 POST 端點,並呼叫另一個函數來產生要使用的訊息範本:上面的程式碼存取Meta Graph API並向/message_templates端點發出 HTTP 請求以列出 (HTTP GET) 和建立 (HTTP POST) 範本。模板通過:

您正在使用的 Meta Graph API 版本

您的 WhatsApp Business 帳號 ID

您為系統使用者產生的存取令牌
請注意,createMessageTemplate此處使用的函數會建立一個具有特定資料結構的模板,其參數適合範例電子商務應用程式的需求。您可以透過造訪訊息範本指南頁面了解更多並嘗試建立不同的參數。

該app.js檔案定義 Node.js 應用程式的入口點。在範例應用程式原始碼中,app.js文件的開頭如下:您可以看到app.js上面的文件如何聲明所需的模組。然後,它註冊 Express.js 框架所需的路由,以決定哪些 JavaScript 函數處理 Web 應用程式處理的每個 HTTP 請求。

修改app.js檔案為/createTemplate路由建立路由器變數:發送範本訊息
業務發起的對話需要在生產過程中使用經過批准的訊息模板,並且至少在開發過程中標記為活動狀態。這些對話可能包括客戶服務訊息、預約提醒、付款或運輸更新以及警報。

您必須使用每個模板所需的參數來發送訊息。

新增sendWhatsAppMessage和getMessageData函數

 

。然後,匯入產品和訊息範本所需的 javascript 檔案。最後,module.exports使用以下程式碼新增區塊:在後台頁面上,按一下每個操作按鈕以沿著銷售管道移動訂單。您的應用程式將相應的模板化 WhatsApp 訊息發送到代表客戶的測試電話號碼。每個訊息對應新的訂單狀態。

選擇第一個訂單並點擊“批准”按鈕。您的應用程式向/messagesCloud API 的端點發出 POST 請求。然後,它根據您的應用程式創建的訊息向客戶發送一條訊息payment_analysis template。然後,應用程式將訂單狀態移至「付款已批准」。

最後選擇第五個訂單點選出貨

上面的 WhatsApp 訊息有兩個基本元素:表示電子商務管道中當前採購訂單狀態的訊息範本以及包含有關客戶或產品資訊的原始資料。

在此練習中,原始資料來自靜態檔案 (orders.js和products.js),但在現實應用程式中,您需要從企業資料來源(例如資料庫、CRM 或電子商務 API)中提取資料。這種整合還允許您根據這些系統中的客戶更新自動執行此流程。

使用 Meta Business Manager UI 建立和管理訊息模板
您已經了解了 Cloud API 如何允許您的應用程式以程式設計方式建立訊息範本。除了這項強大的功能之外,您還可以依靠 Meta Business Manager UI 直接透過 Web 建立和修改模板,而無需任何程式。

若要存取此 UI,請登入 Meta for Developers 平台,然後導航至您的應用程式。

返回頂端