如何將 WordPress 表單條目發送到 WhatsApp

已發表: 2023-01-16

你想知道如何將 WordPress 表單條目發送到 WhatsApp 嗎?

這是掌握表單提交的好方法,尤其是當 WhatsApp 是您日常運營的重要組成部分時。

您將無法將整個表單發送到 WhatsApp,但您可以將您的網站設置為每次在您的網站上提交表單時向 WhatsApp 號碼發送通知。

但以這種方式將 WordPress 網站與 WhatsApp 連接起來可能很複雜,而且大多數現有解決方案都存在局限性。

好消息是 WPForms 和 Uncanny Automator 集成提供了一種簡單而強大的方法來完成這項工作。

繼續閱讀以了解如何進行設置!

WPForms 是最好的 WordPress 表單生成器插件。 免費獲取!

如何將 WhatsApp 集成到 WordPress 中?

將 WhatsApp 集成到 WordPress 的最強大方法是使用 Uncanny Automator。 Uncanny Automator 能夠與 WhatsApp 的 Cloud API 連接,允許用戶參與與 WhatsApp 用戶的雙向對話。

雖然有一些 WordPress 插件允許您執行諸如響應客戶和潛在客戶發送的 WhatsApp 消息等操作,但 Uncanny Automator 是唯一允許您啟動 WhatsApp 對話的插件。

以下是如何在您的網站上使用它!

如何向 WhatsApp 發送 WordPress 表單提交通知

我們將使用 WPForms、Uncanny Automator、Facebook for Developers 和 Business Meta 進行設置。 如果您還沒有 Facebook 帳戶,則需要創建一個才能繼續。

完成後,請按照下列步驟操作:

在這篇文章中

  • 第 1 步:安裝 WPForms 和 Uncanny Automator
  • 第 2 步:將您的站點與 Uncanny Automator 連接
  • 第 3 步:在 Facebook 上為開發人員創建商務應用
  • 第 4 步:創建新表單
  • 第 5 步:創建新配方以將 WordPress 表單條目發送到 WhatsApp

第 1 步:安裝 WPForms 和 Uncanny Automator

The WPForms home page

首先,我們將開始安裝 WPForms Pro。 WPForms 是用於向 WhatsApp 發送表單提交通知的排名第一的 WordPress 表單插件,在 WordPress 插件目錄中有超過 500 萬個活躍安裝和 11k+ 5 星評級證明了它的受歡迎程度。

此外,WPForms 與 Uncanny Automator 無縫集成。 如果您擁有 Pro 許可證,您還將獲得大量功能,使表單構建變得輕而易舉。

The WPForms pricing page

如需安裝 WPForms 的幫助,請查看此有用的指南,為初學者安裝 WordPress 插件。 安裝 WPForms 後,下一步就是安裝 Uncanny Automator。

Uncanny Automator homepage

Uncanny Automator 是領先的 WordPress 自動化插件,您可以使用它來連接和自動化您的 WordPress 插件和應用程序中的功能。 您甚至可以連接多個 WordPress 網站。

正如我們之前提到的,Uncanny Automator 與 WPForms 和 WhatsApp 無縫集成,這使得它非常適合在兩個應用程序之間創建連接。

因此,繼續安裝 Uncanny Automator,就像上面安裝 WPForms 一樣。

第 2 步:將您的站點與 Uncanny Automator 連接

您可以從 WordPress 管理儀表板將您的站點與 Uncanny Automator 連接起來。 為此,請單擊 WordPress 儀表板側欄中的Automator » 設置

How to get to the Uncanny Automator settings page in WordPress

該頁面將在常規選項卡中打開。 滾動到許可證部分,然後單擊標記為連接您的站點的按鈕。

Click this button to connect your site to Uncanny Automator

您將看到一個彈出窗口,您現在可以在其中通過單擊連接您的免費帳戶來啟動設置嚮導。

Button to trigger the Uncanny Automator setup wizard

此時,您需要輸入您的姓名和電子郵件並設置您的 Uncanny Automator 帳戶。 此步驟只需一分鐘或更短時間,然後您將被重定向回 WordPress。

現在,您已準備好創建食譜。 食譜是 Uncanny Automator 規則,用於確定您的自動化將如何運行。

Completed Uncanny Automator setup

但是要創建一個向 WhatsApp 發送 WordPress 表單提交通知的方法,我們需要先在 Facebook 上為開發人員設置一個商業應用程序。

因此,我們將暫時退出 WordPress,但保持選項卡打開,因為我們很快就會回來。

第 3 步:在 Facebook 上為開發人員創建商務應用

為了將表單從 WordPress 發送到 WhatsApp,我們需要先創建一個 Meta (Facebook) Business 應用程序。

對於此步驟,您需要有一個普通的 Facebook 帳戶。 如果您有,則可以輕鬆創建商務應用程序。 只需導航至 developers.facebook.com 並單擊“我的應用程序”即可開始使用。

Facebook for Developers homepage

在儀表板中,單擊創建應用程序。

Create new app button

在此屏幕上,您將有一系列應用程序類型可供選擇。 選擇Business,然後向下滾動並單擊Next

Business app type

在此之後,系統會提示您提供一些基本信息,例如新應用程序的名稱、電子郵件地址和商務管理平台帳戶。

我們假設您是從頭開始,因此您還沒有商務管理平台帳戶。 在這種情況下,將其保留為No Business manager account selected 。 但如果您有,請從下拉列表中選擇它。 單擊“創建應用程序”進入下一階段。

Button to create app

在下一頁上,您將看到一系列可以添加到您的業務應用程序中的產品。 單擊設置向下滾動以將 WhatsApp 添加到您的新商務應用程序。

Add WhatsApp

這會將您重定向到 WhatsApp Business Platform API 窗口。 系統將提示您創建或從下拉列表中選擇一個 Meta Business 帳戶。 默認情況下,此字段將設置為創建企業帳戶,因此如果您沒有,只需單擊繼續繼續

WhatsApp Business Platform API setup

完成後,單擊Start using the API

Click this button to start using the Whatsapp Business API

在下一頁上,您將看到 5 個步驟。 對於本指南,我們只需要完成第 1、3 和 5 步。

從第 1 步開始,獲取以下詳細信息:

  • 臨時訪問令牌
  • 電話號碼 ID
  • WhatsApp 企業帳戶 ID

WhatsApp business app quick start page

當我們很快回到 WordPress 時,我們將需要這些詳細信息。 現在,您會注意到您擁有的是一個將在 23 小時後過期的臨時訪問令牌。

您可以將其用於測試目的,但您需要一個永久訪問令牌才能使連接完全正常工作。 我們將很快向您展示如何獲得永久令牌。

此時,我們將轉到我們的網站並返回到 Uncanny Automator 設置頁面。 在這裡,我們將我們的訪問令牌、電話號碼 ID 和 WhatsApp 業務帳戶 ID 添加到 Uncanny Automator。

為此,請進入 WordPress 管理儀表板並單擊Automator » 設置 » 高級集成 » WhatsApp。 然後粘貼詳細信息並單擊連接 WhatsApp 帳戶

Click this button to connect WhatsApp Account

此時我們將有一個正常運行的 Uncanny Automator 和 WhatsApp 連接,但我們使用了一個臨時訪問令牌,它將在幾個小時後過期。

當我們配置 webhooks 時,我們需要通過幾個步驟創建一個永久的。 但首先,讓我們向您的企業應用添加一個電話號碼。

將電話號碼添加到您的應用程序

設置電話號碼是一個重要步驟,可讓您向 WhatsApp 號碼發送消息。

要將電話號碼添加到您的企業應用程序,請向下滾動到第 5 步並點擊添加電話號碼。 如果您在首次登錄 WhatsApp Business 平台時選擇了創建企業帳戶,現在會彈出一個模式,提示您創建WhatsApp Business 個人資料

在這裡,您需要輸入一些詳細信息:

  • WhatsApp Business 個人資料顯示名稱
  • 時區
  • 類別
  • 業務描述(可選)

Create a WhatsApp business profile

在下一頁上,您還需要填寫幾個字段:

  • 法定企業名稱
  • 企業郵箱
  • 國家
  • 商業網站/URL 或社交媒體資料

完成後單擊下一步

Fill in your business information

現在,您可以繼續輸入您希望用於 WhatsApp 的電話號碼。

您需要使用一個無法在 WhatsApp 其他地方使用的號碼。 因此,您必須使用從未連接到 WhatsApp 帳戶的號碼,或者如果您的號碼已經連接到 WhatsApp,則刪除該帳戶。

Add a phone number for WhatsApp messaging

接下來,我們需要配置 webhooks。

配置 Webhook

Webhooks 是 Uncanny Automator 如何與 WhatsApp 通信的重要組成部分。 要進行設置,請向下滾動到第 3 步並單擊配置 webhooks

Button to configure webhooks

在 Webhooks 配置頁面上,單擊標記為Configuration的部分中的Edit按鈕。

Press this button to edit webhook

現在,我們將快速跳回 Automator 中的 WhatsApp 設置。 複製Webhooks URL以及標記為“驗證令牌”的字段中的值。

Configure webhook details in Uncanny Automator

返回 WhatsApp Business 選項卡,輸入這些詳細信息,然後單擊驗證並保存。

Press this button to verify token

這裡還有一步要走。 向下滾動並單擊管理

Press this button to manage webhook settings

然後再次向下滾動到消息並單擊訂閱。 保存這些設置,您的 webhook 將全部配置完畢。

Click this button to subscribe for messages

最後,我們需要設置一個永久訪問令牌,然後我們就可以開始向 WhatsApp 發送表單提交通知了。

配置永久訪問令牌

首先,我們必須向您的業務應用程序添加一個新的系統用戶。 為此,您需要登錄 Meta Business Suite 並點擊Business Settings

Press this button to open the business settings tab

然後,在用戶下查找系統用戶鏈接。

Add new system users

單擊“添加”開始。

Add new system user

輸入新系統用戶的名稱,並從標記為System user role的下拉列表中為他們分配 admin 角色,然後單擊Create system user

Fill in the details and click create system user

現在,您需要將資產分配給新用戶。 特別是,我們希望此用戶能夠完全訪問我們創建的 WhatsApp 業務應用程序。

因此,我們將向下滾動到Assigned Assets部分並單擊Add Assets

Add assets to system user

然後,在“應用程序”部分,單擊您要添加的應用程序——在此階段您應該只有一個,向下滾動並切換“管理應用程序”按鈕旁邊的按鈕。 單擊“保存”進入下一階段。

Toggle the manage app button

我們現在可以繼續創建我們的新令牌。 只需在標記為Generating Access Tokens的部分中單擊Generate new token

Generating access tokens

從可用權限中,選擇whatsapp_business_managementwhatsapp_business_messaging ,然後再次單擊生成令牌

Tick WhatsApp business management

複製令牌並單擊確定

Copy and save token

現在,我們將返回到 Automator 設置,我們之前在其中輸入了臨時訪問令牌和其他詳細信息。 要返回此處,請單擊Automator » 設置 »Premium Integrations » WhatsApp 。 到達那里後,單擊斷開連接

Copy webhooks URL from Uncanny Automator settings

將您之前輸入的臨時訪問令牌替換為我們剛剛創建的永久訪問令牌並保存這些設置。

現在,我們將在您的網站、Uncanny Automator 和 WhatsApp 之間建立連接,但它還不能完全發揮作用。

第 4 步:創建新表單

此時,您將完成 Facebook for Developers 平台的使用。

要將 WordPress 表單發送到 WhatsApp,我們現在必須設置一個 Uncanny Automator 配方,並在我們要發送到 WhatsApp 的表單上啟用該配方。

首先,我們需要在 WPForms 表單上啟用 Uncanny Automator。 無論您是連接現有表格還是新表格,這都非常簡單。 對於本指南,我們假設您要創建一個新表單,但步驟是相同的。

從 WordPress 管理區域,導航至WPForms » Form Templates 。 這會將您帶到模板庫,您可以在其中從 500 多個預建的可自定義表單模板中進行選擇。

Click WPForms first then click Form Templates

對於本指南,我們將選擇簡單聯繫表單模板。 但是,如果您想從頭開始構建一個,只需選擇Blank Form即可。

單擊簡單聯繫表單模板將在表單生成器中打開表單。 我們可以通過在左側面板中添加表單字段來自定義表單,但是簡單的聯繫表單對於這個例子來說已經足夠了,所以我們將保持原樣。

WPForms Form Builder interface

我們要做的是設置此特定表單以將提交內容髮送到 WordPress。 因此,導航到左側邊欄並單擊Marketing » Uncanny Automator。

Click on marketing then click Uncanny Automator

單擊創建自動化。

Click the create automation button

現在系統會提示您將 WhatsApp 帳戶與 Uncanny Automator 連接。 繼續並單擊連接帳戶繼續。

Click this button to connect WhatsApp with Uncanny Automator

您現在將被重定向到 Uncanny Automator 配方頁面。

第 5 步:創建新配方以將 WordPress 表單條目發送到 WhatsApp

Uncanny Automator 配方有兩部分:觸發器和事件。 觸發器是觸發稱為事件的後續操作的操作或初始事件。

在這種情況下,表單提交將成為觸發器,而接收 WhatsApp 號碼上的通知將成為行動。

因此,首先,導航到觸發器部分並單擊 WPForms 徽標,然後選擇表單已提交作為觸發器。

Select form submission as a trigger

然後,向下滾動到Actions部分並單擊Add action

Click this button to add an action

尋找 WhatsApp 標誌,找到後點擊它。

Click the WhatsApp icon to choose an action in WhatsApp

然後單擊選擇操作。 您會看到將WhatsApp 模板發送到 WhatsApp 號碼和將 WhatsApp 消息發送到號碼的選項。

默認情況下,您使用 WhatsApp Cloud API 向 WhatsApp 號碼發送的第一條消息必須是 WhatsApp 消息模板。 一旦消息模板的收件人回復了您的初始消息,您就可以向他們發送常規消息。

沒有可用的 WhatsApp 消息模板設計用於表單提交通知。 但是,由於您要將此通知設置為供內部使用,您可能不介意使用補充的 WhatsApp 消息模板之一。 因此,繼續並單擊將 WhatsApp 消息模板發送到號碼

Select send WhatsApp message template to a number

您可以通過使用預設變量提取數據來對這些默認模板進行有限的自定義。 以下是該怎麼做:

單擊獲取變量以將用戶名和電子郵件等變量添加到模板。

Click the get variables button

我們正在尋找的是將內容添加到模板主體的變量。 因此,在Body variables字段中,單擊星號以查看可用變量。

Click on the asterisk to see the available tokens

只需選擇您想要的變量類型,然後選擇您想要包含在模板中的標記。

The variable types dropdown menu

在這種情況下,我們將從觸發器部分中進行選擇,因為觸發器是 WPForms 中的一個操作,並且我們需要特定於 WPForms 的標記。

當您滾動到 Triggers 標籤下方時,您會看到食譜的觸發器,即提交表單。 單擊它旁邊的下拉圖標。

Click the dropdown below the Triggers label

您現在會看到一堆 WPForms 特定的標記可供選擇。

WPForms-specific tokens

我們將為我們的表單選擇NameEmail和 message 字段,該字段標記為What can we help you with。 你的可能有所不同。

您還可以向模板添加一些文本以幫助組織內容。 我們將添加一些標籤,以及一些標點符號。 請記住在內容之間添加一些空格。 如果不這樣做,當您收到通知時,文本將顯示為沒有空格。

WhatsApp message template with WPForms tokens added

請記住切換頁面右側的“狀態”按鈕以使連接生效,僅此而已!

Toggle the draft button to make the automation live

您現在將擁有一個完全活躍的連接,每次在您的網站上提交表單時,該連接都會向 WhatsApp 號碼發送一條消息。

WhatsApp message created when user submits a form

您會看到用戶的姓名,在本例中為 Sullie Eloso,以及他們的電子郵件地址 [email protected] 您還會看到該模板添加了一些無用的文本。 我們無法從您的站點更改此設置,但您可以根據需要在 Meta Business Manager 平台上創建完全自定義的模板。

這就是我們向 WhatsApp 發送表單提交通知的指南!

接下來,在提交表單時獲取 Slack 通知

我們剛剛向您展示瞭如何設置您的網站以將表單提交通知發送到 WhatsApp 號碼。 你知道你可以用 Slack 做同樣的事情嗎? 在我們的從 WordPress 表單獲取 Slack 通知的指南中了解所有相關信息。

準備好構建表單了嗎? 今天開始使用最簡單的 WordPress 表單生成器插件。 WPForms Pro 包含大量免費模板,並提供 14 天退款保證。

立即創建您的 WordPress 表單

如果您覺得本文有用,請務必在 Facebook 和 Twitter 上關注我們,以獲取博客中的更多信息。