返回開發人員最新消息

整合 WhatsApp Business 平台與 HubSpot

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

HubSpot 是一個顧客關係管理(CRM)平台,可以讓企業組織更有效地行銷、銷售和支援他們的產品或服務。

WhatsApp Business 平台可讓企業使用由 Meta 託管的雲端 API,透過 WhatsApp 整合直接從 CRM 與顧客通訊。此平台可供輕鬆存取訊息功能,並可與大多數現有的技術堆疊直接整合。

本文將探討如何設定這種與 HubSpot 的整合,並在 CRM 中建立一個工作流程,以根據 HubSpot 平台上的事件和自訂規則,從 WhatsApp 自動回應訊息。

先決條件

若要完成此教學導覽,您需要:

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

傳送訊息

第一步是設定帳號。方法如下:

  1. 建立 Facebook 開發人員帳號,如果已有帳號,則直接登入。

  2. 完成官方開始使用說明文件中的「設定開發人員資產和平台存取權限」步驟,並傳送測試訊息

  3. 將您的電話號碼新增至雲端 API 應用程式配置。

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

我們需要設定 Webhook 和具有端點的 Webhook 訂閱者網址來測試您的 Webhooks。我們會使用上面提到的範例應用程式來執行此操作。

點擊右上角的「Remix to Edit」(混搭編輯)按鈕,可編輯配置詳細資訊。

開啟 .env 檔案,將您的雲端 API 存取權杖貼在 WHATSAPP_TOKEN 欄位中。針對 VERIFY_TOKEN,您可以輸入任何字串,但請保存在手邊,我們稍後會用到。

設定雲端 API Webhook

接下來,從您應用程式的 Meta for Developers 應用程式主控板開始,為 API 設定 Webhook,以允許訂閱更新或回應事件變更。點擊 WhatsApp 的導覽列。然後,在「開始使用」之下,依序點擊「配置」和「編輯」。

在「編輯 Webhook 的回呼網址」對話方塊中,填寫「回呼網址」和「驗證權杖」欄位。回呼網址為 https://<<PROJECT NAME>>.glitch.me。將專案名稱換成您的專案名稱(例如 https://defiant-standing-mirror.glitch.me)。然後驗證網址是否和上面一樣。

點擊「驗證並儲存」。如需有關 WhatsApp Webhooks 設定的更多詳細資訊,請參閱開發人員指南

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

現在您可以傳送測試通知到端點。

在同一頁面上的「編輯」按鈕下方,點擊「Webhook 欄位」,然後點擊「管理」,並訂閱您想要透過端點接聽的事件。接著,點擊「測試」,以將通知訊息傳送到先前配置的收件人電話號碼。

「Webhook 欄位」畫面

若要驗證應用程式正在執行並接聽事件,請前往 Glitch,點擊「記錄」,然後檢視所選事件的記錄。

在 Glitch 中檢視記錄的畫面

設定 HubSpot CRM

現在,您要設定 HubSpot CRM,以自動將 WhatsApp 訊息傳送給聯絡資料中包含電話號碼的顧客。

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

設定開發人員帳戶後,點擊「管理測試帳戶」。

在 HubSpot CRM 上使用開發人員帳戶登入後

然後選擇「建立應用程式測試帳戶」,將其命名為 demo_whatsapp_integration(或您喜歡的任何名稱),並點擊「建立」。

「建立應用程式測試帳戶」畫面

點擊新建立的應用程式測試帳戶,並前往其主控板。然後點擊導覽列左上角的「連絡人」。您會看到兩個示範的連絡人。您可以任意將其刪除,並新增連絡人,其中包含用於 WhatsApp 測試的測試電話號碼。

新應用程式測試帳戶主控板

將 WhatsApp 與 HubSpot CRM 連結

接下來,我們需要安裝 WhatsApp 與 HubSpot CRM 的整合。首先,前往 HubSpot 中的「設定」。在「帳戶設定」下,點擊「整合工具」,然後點擊「已連結的應用程式」。

「已連結的應用程式」畫面

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

App Marketplace

選取 demo_whatsapp_integration 帳戶,並點擊「選擇帳戶」。然後,您會在連絡人頁面上的其他連絡人選項旁邊看到 WhatsApp 圖示。點擊該圖示,即可開始從 HubSpot CRM 傳送訊息。您可以使用自訂訊息或預先定義的範本。

WhatsApp 自訂訊息

您也會在「活動」頁籤上看到訊息及其狀態清單。

設定自動化工作流程

接下來,我們要將它納入 CRM 中的事件所觸發的工作流程中。為此,我們要從 HubSpot 主控板設定自訂工作流程。點擊導覽列中的「自動化」,然後點擊「工作流程」以開啟「工作流程」主控板。

點擊「建立工作流程」,並選擇「從頭開始」選項。現在,點擊「連絡人型」,然後點擊「下一步」。

「返回工作流程」畫面

點擊「設定觸發條件」,並選擇「從 HubSpot 入口網站傳送的 WhatsApp 訊息」整合事件選項。

「設定觸發條件」畫面

選擇「傳送的訊息」篩選類型,將工作流程觸發條件設為「等於任何」,並將該值指定為「購買商品」。最後,點擊「套用篩選條件」,然後點擊「儲存」。

接著,點擊「+」圖示並新增另一個動作。在「選擇動作」清單中,點擊「建立任務」。

「選擇動作」畫面

將其命名為「測試任務」,並將其指派給您的測試帳戶,然後點擊「儲存」。接著,點擊「檢閱並發佈」,然後點擊視窗右上角的「開啟」來開啟工作流程。

開啟工作流程畫面

現在,選擇「測試」並選擇您的測試連絡人來測試工作流程。這會觸發工作流程,如下所示。

選擇您的測試連絡人畫面

接下來,我們要建立一個整合工具,以用來接聽 WhatsApp,並在收到通知時自動更新 HubSpot CRM 中的資料。在設定工作流程之前,我們需要將測試連絡人加入清單。點擊「連絡人」,然後點擊「清單」,以建立新的清單。

完成後,前往「工作流程」頁面,建立新的工作流程,並將其命名為「WhatsApp 自動化」。

選擇「連絡人式」清單,新增清單名稱,然後選擇「靜態」清單。點擊「下一步」,然後點擊「+ 新增篩選條件」按鈕。

現在,從「新增篩選條件」清單中選擇「名單成員」,以將其新增為篩選條件,然後點擊「儲存清單」。

「新增篩選條件」畫面

現在您可以繼續設定工作流程,選擇「連絡人式」,並將連絡人註冊觸發條件新增至「名單成員」。

「連絡人註冊觸發條件」畫面

設定要在啟用此工作流程時觸發的任務。確認此任務出現在「動作」時間軸中,然後點擊「儲存」。

在「選擇動作」清單中,點擊「傳送 Webhooks」。

「傳送 Webhooks」選項

接著,為工作流程建立一個動作,以便在觸發工作流程時將負載傳送到端點。

「傳送 Webhooks」畫面

請確認您使用的是先前在教學導覽中設定的網址。點擊「儲存」。最後,像先前一樣繼續測試工作流程:開啟測試清單,從「清單預覽」中選擇您的測試連絡人,然後點擊「測試」。工作流程已完成。

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

記錄和「動作」時間軸

若要查看您的記錄,請返回正在執行的 Glitch 應用程式,並檢視「記錄」以確認訊息送達。

在 Glitch 應用程式中檢視「記錄」

結論

將 WhatsApp Business 平台與 HubSpot 整合,可讓您根據針對事件和顧客採取之動作所建立的規則,自動傳送和接收訊息。

本文以逐步式教學導覽說明如何連結這兩項服務,以利用在 Hubspot 中註冊的詳細資料,傳送 WhatsApp 訊息給連絡人。您設定了根據預先定義之事件來觸發動作的自訂工作流程。此外,您也設定了傳送通知到先前設定之端點並開始新任務的工作流程。

為確保您的訊息順利傳遞,並為客戶提供及時、相關和預期的更新,您應注意訊息的數量。請避免傳送垃圾訊息給用戶,讓您的顧客樂於互動。

若要進一步瞭解如何將 WhatsApp 整合至您的應用程式和專案中,請參閱我們其他的開發人員教學導覽