返回開發人員最新消息

整合 WhatsApp Business 平台與 HubSpot

2023年3月13日發佈者:Rashed Talukder

HubSpot 是一個客戶關係管理(CRM)平台,有助機構更有效地推廣、銷售和支援其商品或服務。

借助 WhatsApp Business 平台,商家可以使用由 Meta 託管的雲端 API,透過 WhatsApp 整合工具從其客戶關係管理平台直接與顧客交流。如此一來,商家便可以輕鬆地使用訊息功能,而且可以直接與大多數現有的技術堆疊整合。

我們會在本文介紹如何設定這類與 HubSpot 的整合,以及如何在客戶關係管理平台中建立工作流程,從而根據 HubSpot 平台上的事件和自訂規則從 WhatsApp 自動回覆訊息。

先決條件

為完成本教學導覽,您需要準備以下項目:

本文假設您已熟悉 WhatsApp Business 平台、Meta for Developers 和 HubSpot。

傳送訊息

第一步是設定您的帳戶,具體操作如下:

  1. 建立 Facebook 開發人員帳戶;如果您已有帳戶,請直接登入。

  2. 完成官方新手指南文件中的「設定開發人員資產和平台存取權限」步驟,並且傳送測試訊息

  3. 在雲端 API 應用程式配置中加入您的手機號碼

使用範例應用程式接收訊息

我們需要使用一個端點來設定 Webhooks 和 Webhooks 訂閱者網址,以便測試您的 Webhooks。為此,我們會用到上述的範例應用程式

點擊右上方的「Remix to Edit」按鈕,以便編輯配置詳情。

開啟 .env 檔案,將您的雲端 API 存取憑證貼到 WHATSAPP_TOKEN 欄位中。至於 VERIFY_TOKEN 欄位方面,您可以輸入任何字串,但要能方便我們之後使用。

設定雲端 API Webhooks

接下來,為 API 設定 Webhooks,以便您的應用程式從 Meta for Developers 應用程式管理中心開始訂閱有關事件變更的更新或回應。點擊 WhatsApp 的導覽列,然後在「立即開始」之下順序點擊「配置」和「編輯」。

在「編輯 Webhook 的回調網址」對話框中,填寫「回調網址」和「驗證憑證」欄位。回調網址為 https://<<PROJECT NAME>>.glitch.me。將專案名稱改為您的專案名稱(例如 https://defiant-standing-mirror.glitch.me),然後驗證此網址是否與上述網址一致。

點擊「驗證並儲存」。請參閱開發人員指南,進一步了解 WhatsApp Webhooks 設定的詳情。

「編輯 Webhook 的回調網址」的畫面

現在,您可以向端點傳送測試通知了。

在同一頁面的「編輯」按鈕下,順序點擊「Webhook 欄位」和「管理」,訂閱您要透過端點監聽的事件。接下來,點擊「測試」來向之前配置的傳送對象手機號碼傳送通知訊息。

「Webhook 欄位」畫面

如要驗證應用程式是否正在運行和監聽事件,請前往 Glitch 並點擊「Logs」,以查看您所選事件的記錄。

在 Glitch 中查看記錄的畫面

設定 HubSpot 客戶關係管理平台

接下來,您需要設定 HubSpot 客戶關係管理平台,以便向聯絡資料中包含手機號碼的顧客自動傳送 WhatsApp 訊息。

前往 HubSpot 平台,然後登入您的開發人員帳戶或建立帳戶。開發人員帳戶提供 HubSpot 所有企業功能的 90 天免費試用,當中包括營銷、銷售、服務和 CMS 功能,所以可以讓您用來測試 HubSpot API 和工具。

設定開發人員帳戶後,點擊「Manage test accounts」。

在 HubSpot 客戶關係管理平台登入開發人員帳戶

然後,選擇「Create app test account」,並將帳戶命名為「demo_whatsapp_integration」或您喜歡的任何名稱,然後點擊「Create」。

「Create an app test account」畫面

點擊新建立的應用程式測試帳戶,前往其管理中心。然後,點擊導覽列左上方的「Contacts」,您將看到 2 個示範用的聯絡人。您可以隨意移除這些聯絡人,然後以測試手機號碼新增聯絡人,以用於 WhatsApp 測試。

新應用程式測試帳戶的管理中心

連結 WhatsApp 與 HubSpot 客戶關係管理平台

接下來,我們需要在 HubSpot 客戶關係管理平台安裝 WhatsApp 整合工具。首先,前往 HubSpot 中的「Settings」。在「Account Setup」下,順序點擊「Integrations」和「Connected Apps」。

「Connected apps 」畫面

選擇「Visit App Marketplace」。使用搜尋欄位來搜尋 WhatsApp 應用程式。點擊「WhatHub: WhatsApp Integration」。

App Marketplace 畫面

選擇 demo_whatsapp_integration 帳戶,並點擊「Choose Account」。然後,在聯絡人頁面上的其他聯絡方式選項一旁,您將能看到 WhatsApp 圖示。點擊此圖示,以開始從 HubSpot 客戶關係管理平台傳送訊息。您可以使用自訂訊息或預先定義的範本。

WhatsApp 自訂訊息

您還可以在「Activity」分頁上看到訊息清單及其狀態。

設定自動化工作流程

接下來,我們會將此整合工具納入客戶關係管理平台中由事件觸發的工作流程。為此,我們要在 HubSpot 管理中心設定自訂的工作流程。點擊導覽列中的「Automation」,然後點擊「Workflows」來開啟「Workflow」管理中心。

點擊「Create workflow」並選擇「From scratch」選項。現在,請順序點擊「Contact-based」和「Next」。

「Back to workflows」畫面

點擊「Set up triggers」並選擇「WhatsApp message sent from HubSpot portal」的整合事件選項。

「Set up triggers」畫面

選擇「Message sent」篩選條件類型,將工作流程觸發條件設定為「is equal to any of」,並將值指定為「Buy item」。最後,順序點擊「Apply filter」和「Save」。

接下來,點擊「+」圖示以加入另一個動作。在「Choose an action」清單中,點擊「Create task」。

「Choose an action」畫面

將任務命名為「Test Task」,並且將其分配給您的測試帳戶,然後點擊「Save」。接下來,點擊「Review」和發佈任務,然後點擊視窗右上角的「Turn on」來開啟工作流程。

開啟工作流程畫面

現在,選擇「Test」及您的測試聯絡人,以測試工作流程。此操作會觸發工作流程,如下所示。

選擇測試聯絡人畫面

接下來,我們將建立整合,用於監聽 WhatsApp 並在收到通知時自動更新 HubSpot 客戶關係管理平台中的資料。在設定工作流程之前,我們需要將測試聯絡人加入名單中。順序點擊「Contacts」和「Lists」來建立新名單。

建立名單後,前往「Workflow」頁面建立新的工作流程,並將其命名為「WhatsApp Automation」。

選擇「Contact-based lists」並加入名單名稱,然後選擇「Static list」。順序點擊「Next」和「+ Add filter」按鈕。

現在,從「Add filter」的清單中選擇「List membership」,以將其加為篩選條件,然後點擊「Save list」。

「Add filter」畫面

現在,您可以繼續設定工作流程。選擇「Contact-based」,然後為「List membership」新增「Contact enrollment trigger」設定。

「Contact enrollment trigger」畫面

建立在此工作流程啟用時會觸發的任務。確認此任務有顯示在「Actions」時間軸上,然後點擊「Save」。

在「Choose an action」清單中,點擊「Send a webhook」。

「Send a webhook」選項

接下來,為工作流程建立動作,以便在工作流程觸發時向端點傳送裝載。

「Send a webhook」畫面

確保您是使用在此教學導覽較早前設定的網址。點擊「Save」。最後,按照之前的方式繼續測試工作流程:打開「Test」清單,從「Preview for」清單中選擇您的測試聯絡人,然後點擊「Test」。此工作流程到此便已完成。

現在,我們來查看記錄和「Actions」時間軸。返回「Actions」時間軸,查看已建立的任務。

記錄和「Actions」時間軸

如要查看記錄,請返回運行中的 Glitch 應用程式,然後查看「Logs」以確認訊息傳送情況。

在 Glitch 應用程式中查看「Logs」

結論

整合 WhatsApp Business 平台與 HubSpot 後,您便可以根據自己就著事件和顧客所採取的動作而建立的規則,來自動收發訊息。

本文以逐步教學導覽介紹了如何連結這 2 項服務,以便向在 HubSpot 中有登記詳情的聯絡人傳送 WhatsApp 訊息。您可以設定相關的自訂工作流程,以基於預先定義的事件觸發動作。此外,您還可以設定相應的工作流程,來向之前設定的端點傳送通知並開始新任務。

您應該注意訊息的數量,以確保訊息能正常傳遞,並且及時地向顧客傳送相關的預期更新內容。請避免向用戶傳送垃圾訊息,以確保顧客滿意您的服務並繼續使用。

如需了解更多方法來在您的應用程式和專案整合 WhatsApp,請參閱我們的其他開發人員教學導覽