開発者向けニュースに戻る

WhatsApp BusinessプラットフォームとHubSpotの連携

2023年3月13日作成者:Rashed Talukder

HubSpotは企業が製品やサービスのマーケティング、販売、サポートをより効果的に行えるようにするための顧客関係管理(CRM)プラットフォームです。

一方、WhatsApp Businessプラットフォームを利用すると、事業者はMetaがホスティングするクラウドAPIを使用し、WhatsAppの連携機能を通じてCRMから顧客と直接やり取りすることができます。これにより、メッセージ機能へのアクセスが容易になり、既存の技術スタックのほとんどと直接連携できるようになります。

この記事では、こうしたHubSpotとの連携を設定して、CRM内にワークフローを作成し、WhatsAppからHubSpotプラットフォーム上でイベントやカスタムルールに基づいてメッセージに自動返信する方法をご紹介します。

前提条件

このチュートリアルを完了するには、以下が必要です。

  • WhatsApp Businessアカウント。

  • Meta for Developersアカウント。

  • HubSpotアプリ開発者アカウント(新規アカウントを作成する場合は、「アプリ開発者」を選択してください)。HubSpotのアプリ開発者アカウントでは、CRM APIへのアクセスやアプリの作成機能など、同社の利用規約に記載された機能やサービスを利用できます。

  • WhatsApp Business Messengerからのメッセージを受信するためにGlitchで作成したサンプルアプリの実行中のインスタンスへのURL。

この記事では、WhatsApp Businessプラットフォーム、Meta for Developers、HubSpotについて理解していることを前提としています。

メッセージを送信する

最初のステップは、アカウントの設定です。手順は以下のとおりです。

  1. Facebook開発者アカウントを作成するか、すでにお持ちの場合はログインします。

  2. 公式のスタートガイドにある「開発者アセットとプラットフォームアクセスを設定する」のステップを完了し、テストメッセージを送信します。

  3. クラウドAPIのアプリ構成に電話番号を追加します。

サンプルアプリでメッセージを受信する

Webhooksのテストを行うために、エンドポイントを使用してWebhookとWebhookのサブスクリプション登録者用URLを設定する必要があります。これには、前述のサンプルアプリを使用します。

右上の[リミックスして編集]ボタンをクリックすると、構成の詳細を編集できるようになります。

.envファイルを開き、WHATSAPP_TOKENフィールドにクラウドAPIのアクセストークンを貼り付けます。VERIFY_TOKENには任意の文字列を入力できますが、後で使用するため手元に用意しておいてください。

クラウドAPIのWebhookを設定する

次に、APIのWebhookを設定し、自身のアプリのMeta for Developersアプリダッシュボードからアップデートをサブスクリプション登録したり、イベントの変更に対して応答したりできるようにします。WhatsAppのナビゲーションバーをクリックした後、[スタートガイド]の下にある[構成] を選択して[編集]をクリックします。

[WebhooksのコールバックURLを編集]のダイアログボックスにコールバックURLと認証トークンを入力します。コールバックURLは、https://<<プロジェクト名>>.glitch.meとなります。プロジェクト名には自身のプロジェクト名を入力してください(例: https://defiant-standing-mirror.glitch.me)。入力したら、URLが前述のものと同じであることを確認します。

最後に[確認して保存]をクリックします。WhatsAppのWebhookの設定について詳しくは、開発者ガイドをご覧ください。

[WebhooksのコールバックURLの編集]画面

これで、エンドポイントにテスト通知を送信できるようになります。

同ページで、[編集]ボタンの下の[Webhookフィールド]をクリックした後、[管理]をクリックし、エンドポイントでリッスンするイベントにサブスクリプション登録します。次に、[テスト]をクリックして、先に設定した受信者の電話番号に通知メッセージを送信します。

[Webhookフィールド]画面

アプリが実行し、イベントをリッスンしていることを確認するには、Glitchに移動して[ログ]をクリックし、選択したイベントのログを表示します。

Glitchでログを表示した画面

HubSpot CRMを設定する

続いてHubSpot CRMを設定して、連絡先情報に電話番号が登録されている顧客にWhatsAppメッセージが自動的に送信されるようにします。

HubSpotプラットフォームに移動して、開発者アカウントにログインするか、新規作成します。開発者アカウントには、マーケティング、営業、サービス、CMSなど、HubSpotのあらゆるエンタープライズ機能を利用できる90日間の無料トライアル期間が設けられており、HubSpotのAPIやツールを試すことができます。

開発者アカウントを設定したら、[テストアカウントを管理]をクリックします。

HubSpot CRMの開発者アカウントにログインした画面

次に[アプリのテストアカウントを作成]を選択して、アカウント名にdemo_whatsapp_integration (または、お好きな名前)を入力し、[作成]をクリックします。

[アプリのテストアカウントを作成]画面

新しく作成したアプリのテストアカウントをクリックして、ダッシュボードに移動します。ナビゲーションバーの左上にある[コンタクト]をクリックすると、デモ用コンタクトが2件表示されます。これらのコンタクトを削除して、新しいコンタクトを作成し、WhatsAppテストで使用するテスト用電話番号を追加できます。

新しいアプリのテストアカウントのダッシュボード

WhatsAppとHubSpot CRMを接続する

続いて、HubSpot CRMとのWhatsApp連携をインストールする必要があります。まずHubSpotの[設定]に移動します。[アカウントの設定]にある[連携]を選択し、[接続されたアプリ]をクリックします。

[接続されたアプリ]画面

[アプリマーケットプレイスへ]を選択します。検索フィールドを使ってWhatsAppアプリを検索します。[WhatHub: WhatsApp連携]をクリックします。

アプリマーケットプレイス

demo_whatsapp_integrationアカウントを選択して、[アカウントを選択]をクリックします。そうすると、コンタクトページの他のコンタクトオプションの横にWhatsAppアイコンが表示されます。アイコンをクリックすると、HubSpot CRMからメッセージを送信できます。その際、カスタムメッセージ、またはあらかじめ用意されたテンプレートを使用できます。

WhatsAppのカスタムメッセージ

そのほか、[アクティビティ]タブでメッセージのリストやステータスを確認することも可能です。

自動化されたワークフローを設定する

続いて、CRMのイベントによってトリガーされるワークフローにこれを組み込みます。そのために、HubSpotのダッシュボードでカスタムワークフローを作成します。ナビゲーションバーにある[自動化]をクリックした後、[ワークフロー]をクリックしてワークフローのダッシュボードを開きます。

[ワークフローを作成]をクリックして[ゼロから作る]を選択したら、[コンタクトベース] > [次へ]の順にクリックします。

[ワークフローに戻る]画面

[トリガーを設定]をクリックして、HubSpotポータル連携イベントオプションから送信したWhatsAppメッセージを選択します。

[トリガーを設定]画面

[送信したメッセージのフィルタータイプ]を選択し、ワークフローのトリガーを[次のいずれかと等しい]に設定して、値を[購入アイテム]に指定します。最後に[フィルターを適用]をクリックした後、[保存]をクリックします。

次に、[+]アイコンをクリックして、別のアクションを追加します。[アクションを選択]のリストにある[タスクを作成]をクリックします。

[アクションを選択]画面

タスク名に「テストタスク」と入力し、自身のテストアカウントに割り当てて[保存]をクリックします。その後、[レビュー]、[公開]とクリックし、画面右上の[有効にする]をクリックしてワークフローをオンにします。

ワークフローを有効にする画面

続いて[テスト]を選択して、ワークフローをテストするためのテスト用コンタクトを選びます。これにより、以下のようにワークフローがトリガーされます。

テスト用コンタクトを選択する画面

次に、WhatsAppをリッスンして、通知を受信したときにHubSpot CRMのデータを自動的にアップデートするための連携を作成します。ワークフローを設定する前に、テスト用コンタクトをリストに追加する必要があります。[コンタクト] > [リスト]の順にクリックして、新しいリストを作成します。

リストの作成が完了したら、ワークフローのページに移動して新しいワークフローを作成し、ワークフロー名に「WhatsAppの自動化」と入力します。

[コンタクトベースのリスト]を選択し、リスト名を追加して[静的リスト]を選択します。[次へ]をクリックしたら、[+フィルターを追加]ボタンをクリックします。

そうしたら、[フィルターを追加]のリストから[メンバーシップをリスト化]を選択してフィルターとして追加し、[リストを保存]をクリックします。

[フィルターを追加]画面

これで引き続きワークフローの設定を行えます。[コンタクトベース]を選択し、コンタクトの登録トリガーを[リストメンバーシップ]に追加します。

コンタクトの登録トリガー画面

このワークフローが有効になっているときにトリガーされるタスクを設定します。このタスクが[アクション]のタイムラインに表示されていることを確認したら、[保存]をクリックします。

[アクションを選択]のリストにある[Webhookを送信]をクリックします。

[Webhookを送信]オプション

次に、ワークフローがトリガーされたときにエンドポイントにペイロードを送信するためのワークフローのアクションを作成します。

[Webhookを送信]画面

チュートリアルですでに設定したURLを使用して、[保存]をクリックします。最後に、前回と同様にワークフローのテストを行います。[テストリスト]を開き、[リストのプレビュー]からテストコンタクトを選択して[テスト]をクリックします。これでワークフローは完成です。

続いて、ログと[アクション]のタイムラインをチェックしましょう。[アクション]のタイムラインに戻って、作成したタスクを確認します。

ログと[アクション]のタイムライン

ログを確認するには、実行中のGlitchアプリに戻ってログを表示し、メッセージ配信を確認します。

Glitchアプリでログを表示した画面

まとめ

WhatsApp BusinessプラットフォームとHubSpotを連携することで、顧客が実行するアクションやイベントに対して作成したルールに基づいて、メッセージの送受信を自動化できるようになります。

この記事では、これら2つのサービスを接続し、HubSpotに情報が登録されている連絡先にWhatsAppメッセージを送信する手順についてチュートリアルの形でご紹介しました。このチュートリアルを通して、定義済みイベントに基づいたアクションをトリガーするカスタムワークフローを設定し、さらには事前に設定したエンドポイントに通知を送信して、新しいタスクを開始するワークフローも設定しました。

メッセージフローを確実に実行し、タイムリーで関連性の高い、期待どおりの最新情報を顧客に届けるためには、メッセージ量に意識を向ける必要があります。ユーザーにスパムを送らないように注意して、顧客満足度やエンゲージメントを維持しましょう。

WhatsAppをアプリやプロジェクトと連携する方法について詳しくは、他の開発者向けチュートリアルをご覧ください。