如何将 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 上关注我们,以获取博客中的更多信息。