WordPressフォームエントリをWhatsAppに送信する方法

公開: 2023-01-16

WordPressフォームエントリをWhatsAppに送信する方法を知りたいですか?

これは、特に WhatsApp が日常業務の大部分を占める場合に、フォームの送信状況を把握するための優れた方法です。

フォーム全体を WhatsApp に送信することはできませんが、サイトでフォームが送信されるたびに WhatsApp 番号に通知を送信するようにサイトを設定できます。

しかし、この方法で WordPress サイトを WhatsApp に接続するのは複雑になる可能性があり、既存のソリューションのほとんどは制限されています。

幸いなことに、WPForms と Uncanny Automator の統合により、これを行うための簡単で強力な方法が提供されます。

それをすべて設定する方法を学ぶために読んでください!

WPForms は最高の WordPress Form Builder プラグインです。 無料で手に入れよう!

WhatsAppをWordPressに統合するにはどうすればよいですか?

WhatsApp を WordPress に統合する最も強力な方法は、Uncanny Automator を使用することです。 Uncanny Automator は、WhatsApp のクラウド API に接続できます。これにより、ユーザーは WhatsApp ユーザーとの双方向の会話に参加できます。

顧客や見込み客から送信された WhatsApp メッセージに応答するなどのことができる WordPress プラグインはいくつかありますが、Wh​​atsApp の会話を開始できるのは Uncanny Automator だけです。

これをサイトで使用する方法は次のとおりです。

WordPressフォーム送信通知をWhatsAppに送信する方法

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 フォーム プラグインです。500 万以上のアクティブなインストールと、WordPress プラグイン ディレクトリでの 11,000 以上の 5 つ星の評価により、その人気が証明されています。

さらに、WPForms は Uncanny Automator とシームレスに統合します。 Pro ライセンスをお持ちの場合は、フォームの作成を簡単にする機能の膨大なコレクションも利用できます。

The WPForms pricing page

WPForms のインストールに関するヘルプについては、初心者向けの WordPress プラグインのインストールに関するこの役立つガイドをご覧ください。 WPForms をインストールしたら、次のステップは Uncanny Automator のインストールです。

Uncanny Automator homepage

Uncanny Automator は、WordPress の主要な自動化プラグインであり、これを使用して、WordPress のプラグインとアプリ全体の機能を接続して自動化できます。 複数の WordPress Web サイトを接続することもできます。

前述したように、Uncanny Automator は WPForms と WhatsApp の両方とシームレスに統合されているため、2 つのアプリ間の接続を作成するのに最適です.

上記で WPForms をインストールしたように Uncanny Automator をインストールしてください。

ステップ 2: サイトを Uncanny Automator に接続する

WordPress 管理ダッシュボードからサイトを Uncanny Automator に接続できます。 これを行うには、WordPress ダッシュボードのサイドバーからAutomator » Settingsをクリックします。

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 アカウントを設定する必要があります。 このステップには 1 分もかかりません。その後、WordPress にリダイレクトされます。

これで、レシピを作成する準備が整いました。 レシピは、自動化の実行方法を決定する Uncanny Automator ルールです。

Completed Uncanny Automator setup

ただし、WordPress フォーム送信通知を WhatsApp に送信するレシピを作成するには、まず開発者向けに Facebook でビジネス アプリを設定する必要があります。

そのため、WordPress からしばらく離れますが、すぐに戻るため、タブを開いたままにします。

ステップ 3: Facebook で開発者向けのビジネス アプリを作成する

WordPress から WhatsApp にフォームを送信するには、まずメタ (Facebook) ビジネス アプリを作成する必要があります。

このステップでは、通常の Facebook アカウントが必要です。 持っていれば、簡単にビジネス アプリを作成できます。 developers.facebook.com に移動し、[マイ アプリ] をクリックして開始します。

Facebook for Developers homepage

ダッシュボードで、[アプリの作成] をクリックします。

Create new app button

この画面では、さまざまな種類のアプリから選択できます。 [ビジネス] を選択し、下にスクロールして [次へ] をクリックします。

Business app type

この後、新しいアプリの名前、メール アドレス、Business Manager アカウントなどの基本的な情報を入力するよう求められます。

ゼロから始めることを前提としているため、まだ Business Manager アカウントを持っていません。 この場合、 No Business manager account selectedのままにします。 ただし、持っている場合は、ドロップダウンから選択してください。 [アプリの作成]をクリックして、次の段階に進みます。

Button to create app

次のページには、ビジネス アプリに追加できる一連の製品が表示されます。 下にスクロールして、[セットアップ] をクリックして、新しいビジネス アプリに WhatsApp を追加します。

Add WhatsApp

これにより、WhatsApp Business Platform API ウィンドウにリダイレクトされます。 ドロップダウンから Meta Business アカウントを作成または選択するよう求められます。 このフィールドはデフォルトで [ビジネス アカウントを作成する] に設定されているため、ビジネス アカウントをお持ちでない場合は、[続行] をクリックして先に進むことができます。

WhatsApp Business Platform API setup

完了したら、[ 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 時間で期限切れになる一時的なアクセス トークンであることに気付くでしょう。

テスト目的で使用できますが、接続が完全に機能するには永続的なアクセス トークンが必要です。 パーマネント トークンを取得する方法については、後ほど説明します。

この時点で、タブで Web サイトに移動し、Uncanny Automator の設定ページに戻ります。 ここでは、アクセス トークン、電話番号 ID、および WhatsApp ビジネス アカウント ID を Uncanny Automator に追加します。

これを行うには、WordPress 管理ダッシュボードに移動し、 Automator » 設定 » プレミアム統合 » WhatsApp をクリックします。 次に、詳細を貼り付けて、[ WhatsApp アカウントを接続] をクリックします。

Click this button to connect WhatsApp Account

この時点で Uncanny Automator と WhatsApp 接続が機能しますが、数時間で期限切れになる一時的なアクセス トークンを使用しました。

Webhook を構成するときに、いくつかの手順で永続的なものを作成する必要があります。 まず、ビジネス アプリに電話番号を追加しましょう。

アプリに電話番号を追加する

電話番号の設定は、WhatsApp 番号にメッセージを送信できるようにするための重要なステップです。

ビジネス アプリに電話番号を追加するには、ステップ 5 まで下にスクロールし、[電話番号を追加] をクリックします。 WhatsApp Business プラットフォームに最初にアクセスしたときに [ビジネス アカウントの作成]を選択した場合、モーダルがポップアップ表示され、 WhatsApp Business プロファイルを作成するよう求められます。

ここでは、いくつかの詳細を入力する必要があります。

  • WhatsApp ビジネス プロフィールの表示名
  • タイムゾーン
  • カテゴリー
  • 事業内容(省略可)

Create a WhatsApp business profile

次のページには、さらにいくつかのフィールドに入力する必要があります。

  • 正式な商号
  • ビジネスメール
  • ビジネスのウェブサイト/URL またはソーシャル メディアのプロフィール

完了したら、[次へ] をクリックします。

Fill in your business information

これで、WhatsApp で使用する電話番号を入力できます。

WhatsApp の他の場所では使用できない番号を使用する必要があります。 そのため、WhatsApp アカウントに接続されたことのない番号を使用するか、番号が既に WhatsApp に接続されている場合はアカウントを削除する必要があります。

Add a phone number for WhatsApp messaging

次に、Webhook を構成する必要があります。

Webhook の構成

Webhook は、Uncanny Automator が WhatsApp と通信する方法の重要な部分です。 これを設定するには、ステップ 3まで下にスクロールし、[ Webhook の構成] をクリックします。

Button to configure webhooks

Webhook 構成ページで、「構成」というラベルの付いたセクションの「編集」ボタンをクリックします。

Press this button to edit webhook

ここで、Automator の WhatsApp 設定にすばやく戻ります。 [ Verify Token ] フィールドの値とともにWebhook URLをコピーします。

Configure webhook details in Uncanny Automator

WhatsApp ビジネス タブに戻り、これらの詳細を入力してから、[確認して保存] をクリックします。

Press this button to verify token

ここで、もう 1 つのステップがあります。 下にスクロールして [管理] をクリックします。

Press this button to manage webhook settings

次に、もう一度下にスクロールして[メッセージ] を表示し、[購読] をクリックします。 これらの設定を保存すると、Webhook がすべて構成されます。

Click this button to subscribe for messages

最後に、パーマネント アクセス トークンを設定する必要があります。これで、WhatsApp へのフォーム送信通知の送信を開始する準備が整います。

永続的なアクセス トークンを構成する

まず、新しいシステム ユーザーをビジネス アプリに追加する必要があります。 これを行うには、Meta Business Suite にログオンし、[ビジネス設定]をクリックする必要があります。

Press this button to open the business settings tab

次に、[ユーザー] の下にある [システム ユーザー] リンクを探します。

Add new system users

[追加]をクリックして開始します。

Add new system user

新しいシステム ユーザーの名前を入力し、 [システム ユーザー ロール] というラベルの付いたドロップダウンから管理者のロールを割り当て、[システム ユーザーの作成] をクリックします。

Fill in the details and click create system user

ここで、アセットを新しいユーザーに割り当てる必要があります。 特に、このユーザーには、作成した WhatsApp ビジネス アプリへのフル アクセスを許可する必要があります。

[割り当てられたアセット] セクションまで下にスクロールし、[アセットの追加] をクリックします。

Add assets to system user

次に、[アプリ] セクションで、追加するアプリをクリックします。この段階では 1 つしかないはずです。下にスクロールして、 [アプリの管理] ボタンの横にあるボタンを切り替えます。 [保存]をクリックして、次の段階に進みます。

Toggle the manage app button

これで、新しいトークンの作成に進むことができます。 Generating Access Tokensというラベルの付いたセクションでGenerate new tokenをクリックするだけです。

Generating access tokens

利用可能なアクセス許可から、 whatsapp_business_managementwhatsapp_business_messagingを選択し、もう一度 [ Generate token ] をクリックします。

Tick WhatsApp business management

トークンをコピーして [ OK ] をクリックします。

Copy and save token

ここで、以前に一時アクセス トークンとその他の詳細を入力した Automator 設定に戻ります。 ここに戻るには、 Automator » 設定 » プレミアム統合 » 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

このガイドでは、 Simple Contact Form Templateを選択します。 ただし、最初から作成する場合は、単純に [空白のフォーム]を選択してください。

Simple Contact Form Template をクリックすると、フォームビルダーでフォームが開きます。 左側のパネルからフォーム フィールドを追加してフォームをカスタマイズできますが、この例では単純な連絡先フォームで十分なので、そのままにしておきます。

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 のレシピには、トリガーとイベントの 2 つの部分があります。 トリガーは、イベントと呼ばれるフォローアップ アクションをトリガーするアクションまたは初期イベントです。

この場合、フォームの送信がトリガーになり、WhatsApp 番号での通知の受信がアクションになります。

まず、トリガーセクションに移動して WPForms ロゴをクリックし、トリガーとしてフォームが送信されたことを選択します。

Select form submission as a trigger

次に、[アクション] セクションまで下にスクロールし、[アクションの追加] をクリックします。

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

探しているのは、テンプレートの本文にコンテンツを追加するための変数です。 ボディ変数フィールドで、アスタリスクをクリックして、使用可能な変数を表示します。

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 、およびWhat can we help you というラベルが付いたフォームのメッセージ フィールドを選択します。 あなたのものは何か違うかもしれません。

テンプレートにテキストを少し追加して、整理しやすくすることもできます。 いくつかの句読点とともに、いくつかのラベルを追加します。 コンテンツの間にスペースを追加することを忘れないでください。 そうしないと、通知を受け取ったときにテキストがスペースなしで表示されます。

WhatsApp message template with WPForms tokens added

ページの右側にある [ステータス] ボタンを切り替えて、接続を有効にすることを忘れないでください。

Toggle the draft button to make the automation live

これで、Web サイトでフォームが送信されるたびに WhatsApp 番号にメッセージを送信する、完全にアクティブな接続が確立されます。

WhatsApp message created when user submits a form

ユーザーの名前 (この場合は Sullie Eloso) と、そのユーザーの電子メール アドレス ([email protected]) が表示されます。テンプレートによって、役に立たないテキストが少し追加されていることもわかります。 サイトからこれを変更することはできませんが、必要に応じて、Meta Business Manager プラットフォームで完全にカスタマイズされたテンプレートを作成できます。

以上で、フォーム送信通知を WhatsApp に送信するためのガイドを終了します。

次に、フォームが送信されたときに Slack 通知を受け取る

フォーム送信通知を WhatsApp 番号に送信するように Web サイトを設定する方法を示しました。 Slack でも同じことができることをご存知ですか? WordPressフォームからSlack通知を取得するためのガイドで、これについてすべて学んでください.

フォームを作成する準備はできましたか? 最も簡単な WordPress フォーム ビルダー プラグインを今すぐ始めましょう。 WPForms Pro には無料のテンプレートが多数含まれており、14 日間の返金保証が提供されます。

WordPress フォームを今すぐ作成する

この記事が役に立った場合は、Facebook と Twitter でフォローして、ブログの詳細をご覧ください。