インタラクティブメッセージの送信

このガイドでは、各インタラクティブメッセージの送信方法を説明します。インタラクティブメッセージを使うと、ユーザーは、WhatsApp上でビジネスに対して要求したいことを簡単に見つけ、選択することができます。テストでは、インタラクティブメッセージ機能を使用したチャットボットの場合、テキストベースのメッセージよりも返信率とコンバージョンが大幅に高くなりました。

インタラクティブメッセージの種類:

• リストメッセージ: 最大10個までの選択肢を提供するメニューを含むメッセージ。このタイプのメッセージでは、ユーザーはビジネスとやり取りする際に、よりシンプルかつ一貫した方法で選択を行えます。
• 返信ボタンメッセージ: 最大3個の選択肢(各選択肢はボタン)を含むメッセージ。このタイプのメッセージでは、ユーザーはビジネスとやり取りする際に、メニューから簡単に選択できます。返信ボタンのユーザーエクスペリエンスは、ボタンを使用するインタラクティブテンプレートと同じになります。
• 単一商品メッセージ: ビジネスのインベントリー内の1つの商品のみを含むメッセージ。詳細については、商品を顧客とシェアするをご覧ください。
• 複数商品メッセージ: ビジネスのインベントリー内の複数の商品(最大30個)を含むメッセージ。詳細については、商品を顧客とシェアするをご覧ください。
• 位置情報リクエストメッセージ: ユーザーの位置情報をリクエストするメッセージ。
• Flowsメッセージ: 構造化インタラクションのためのメッセージ。詳しくは、Flowsメッセージをご覧ください。

インタラクティブメッセージの仕様

• 複数のインタラクティブメッセージを1つのフローで組み合わせることができます。
• ユーザーは、リストメッセージやボタンメッセージから複数の選択肢を同時に選択することはできませんが、戻って前のメッセージを再度開くことができます。
• リストメッセージや返信ボタンメッセージは通知として使用することはできず、現在の仕様では、ユーザーが最後にメッセージを送信してから24時間以内に限り送信できます。24時間を超えてからメッセージを送信しようとすると、エラーメッセージが表示されます。
• サポートされているプラットフォーム: iOS、Android、およびウェブ(Flowsメッセージはウェブではサポートされていません)。

テキストメッセージとインタラクティブメッセージを比較すると、以下のようになります。

以下の例のように、リストメッセージと返信ボタンを1つのフロー内で組み合わせることができます。

何らかのエラーが発生しました

エラーが発生し、この動画を再生できませんでした。

詳しくはこちら

概要

それを使う理由

ユーザーにとってわかりやすい

インタラクティブメッセージの場合、テキストベースのリストよりもシンプルかつ一貫したフォーマットで、ユーザーがビジネスに要求したいことを見つけ、選択できます。テストでは、インタラクティブメッセージの方がユーザーの理解度が高いという結果が出ています。

ビジネスの成果

テストでは、インタラクティブメッセージ機能を使用したチャットボットの場合、テキストベースのメッセージよりも返信率とコンバージョンが大幅に高くなりました。

パーソナライズ

リアルタイムで動的にデータを入力できるため、顧客や状況に合わせてパーソナライズできます。例えば、予約可能日時を選択できるリストメッセージを表示したり、返信ボタンで以前の配送先住所を表示したりすることができます。

テンプレートなし

インタラクティブメッセージにはテンプレートや事前承認は必要ありません。

利用に適したケース

リストメッセージは、複数のオプションを提示する場合に最適です。例として以下が挙げられます。

• よくある質問やカスタマーケアのメニュー
• テイクアウトメニュー
• 近くの店舗や位置情報の選択
• 予約可能日時
• 最近の注文履歴から再注文したいものを選択

返信ボタンは、限られた数の選択肢を提供し、すぐに返信を得る場合に最適です。

• 通信料のリチャージ
• 個人情報の変更
• 前回の注文の再注文
• 返品依頼
• 食事の注文にオプションを追加
• 支払い方法の選択

返信ボタンは、一般的な回答では十分でない「パーソナライズされた」ユースケースに特に役立ちます。

Flowsメッセージは、次のような1つまたは複数の画面での構造化コミュニケーションに最適です。

• 予約の受付
• 商品の閲覧
• 顧客フィードバックの収集
• 新しいセールスリードの獲得

Flowsメッセージを使用すると、企業はより豊かで魅力的なユーザーエクスペリエンスを提供できるようになり、顧客は必ずしも別のアプリに切り替えたり、ウェブサイトにアクセスしたりする必要がなく、WhatsAppで作業を迅速に完了できるようになります。

使用方法

APIレベルでインタラクティブメッセージを設定するには、メッセージのtypeをinteractiveに指定し、interactiveオブジェクトを追加します。通常、このようなメッセージには主にheader、body、footer、actionの4つの部分が含まれています。

{
  "recipient_type": "individual",
  "to" : "whatsapp-id",
  "type": "interactive" 
  "interactive":{
    "type": "list" | "button" | ...,
    "header": {},
    "body": {},
    "footer": {},
    "action": {}
  }
}

リストメッセージでは、各部は次のように表示されます。

返信ボタンメッセージでは、各部は次のように表示されます。

こうしたメッセージの送信方法については後述します。

利用を開始する

各メッセージを送信する前に、/contactsノードを呼び出して受信者のWhatsApp IDを取得する必要があります。

Webhooksを設定して、メッセージステータスと着信メッセージの通知を受け取ることをおすすめします。そうすれば、メッセージが送信されたかどうかや、ユーザーからの回答をトラッキングすることができます。詳しくは、Webhooksをご覧ください。

ステップ1: interactiveオブジェクトを構成する

リストメッセージ

リストメッセージを送信するには、listタイプのinteractiveオブジェクトに以下の要素を指定します。

最終的に、interactiveオブジェクトは次のようになるはずです。

"interactive":{
  "type": "list",
  "header": {
    "type": "text",
    "text": "your-header-content"
  },
  "body": {
    "text": "your-text-message-content"
  },
  "footer": {
    "text": "your-footer-content"
  },
  "action": {
    "button": "cta-button-content",
    "sections":[
      {
        "title":"your-section-title-content",
        "rows": [
          {
            "id":"unique-row-identifier",
            "title": "row-title-content",
            "description": "row-description-content",           
          }
        ]
      },
      {
        "title":"your-section-title-content",
        "rows": [
          {
            "id":"unique-row-identifier",
            "title": "row-title-content",
            "description": "row-description-content",           
          }
        ]
      },
      ...
    ]
  }
}

返信ボタン

返信ボタンメッセージを送信するには、buttonタイプのinteractiveオブジェクトに以下の要素を指定します。

"header": {
      "type": "text" | "image" | "video" | "document",
      "text": "your text"
      # OR
      "document": {
        "id": "your-media-id",
        "filename": "some-file-name"
      }
      # OR
      "document": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name",
        },
        "filename": "some-file-name"
      },
      # OR
      "video": {
        "id": "your-media-id"
      }
      # OR
      "video": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
      # OR
      "image": {
        "id": "your-media-id"
      }
      # OR
      "image": {
        "link": "http(s)://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
    }

"action": {
      "buttons": [
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "First Button’s Title" 
          }
        },
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "Second Button’s Title" 
          }
        }
      ] 
    }

最終的に、interactiveオブジェクトは次のようになるはずです。

"interactive": {
    "type": "button",
    "header": { # optional
      "type": "text" | "image" | "video" | "document",
      "text": "your text"
      # OR
      "document": {
        "id": "your-media-id",
        "filename": "some-file-name"
      }
      # OR
      "document": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name",
        },
        "filename": "some-file-name"
      },
      # OR
      "video": {
        "id": "your-media-id"
      }
      # OR
      "video": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
      # OR
      "image": {
        "id": "your-media-id"
      }
      # OR
      "image": {
        "link": "http(s)://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
    }, # end header
    "body": {
      "text": "your-text-body-content"
    },
    "footer": { # optional
      "text": "your-text-footer-content"
    },
    "action": {
      "buttons": [
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "First Button’s Title" 
          }
        },
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "Second Button’s Title" 
          }
        }
      ] 
    } # end action   
  } # end interactive

位置情報リクエストメッセージ

位置情報リクエストメッセージには、本文と、ユーザーがタップできる[位置情報を送信する]ボタンが含まれます。ボタンをタップすると位置情報の共有画面が表示され、ユーザーは位置情報を共有することができます。

位置情報リクエストメッセージを送信するには、メッセージに表示するテキストを、interactiveオブジェクトに次のように指定します。

{
  "type": "location_request_message",
  "body": {
    "type": "text",
    "text": "<TEXT>"
  },
  "action": {
    "name": "send_location" 
  }
}

Flowsメッセージ

Flowsメッセージには、ユーザーがタップできるCTAボタンが含まれています。ボタンをタップするとカスタムフローが表示されます。

Flowsメッセージを送信するには、flowタイプのinteractiveオブジェクトをアセンブルする必要があります。詳しくは、こちらをご覧ください。

ステップ2: 共通のメッセージパラメーターを追加する

インタラクティブオブジェクトが完成したら、メッセージを構成するその他のパラメーターとして、recipient_type、to、typeを追加します。typeを必ずinteractiveに設定してください。

{
  "recipient_type": "individual",
  "to" : "whatsapp-id", // WhatsApp ID of your recipient
  "type": "interactive",
  "interactive":{
    // Your interactive object  
   }
  }

すべてのメッセージタイプに共通するパラメーターについては、こちらをご覧ください。

ステップ3: /messagesに対してPOST呼び出しを行う

ステップ1と2でアセンブルしたJSONオブジェクトを使って、/messagesエンドポイントに対してPOST呼び出しを発行します。メッセージが正常に送信されると、次の応答を受け取ります。

{
  "messages": [{
    "id": "{message-id}"
  }]
}

ステップ4: Webhooksをチェックする

Webhooksを設定した場合、メッセージステータスの変化とユーザーからの返信をチェックします。

インタラクティブメッセージに応答するユーザーのWebhooksには、interactiveという新しいコンポーネントがあり、ユーザーの選択に関する情報が含まれています。詳しくは、Webhooks、コンポーネントをご覧ください。

以下は、位置情報をシェアしたユーザーに関するWebhooksリクエストの例です。

{
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "12345",
      "changes": [
        {
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "12345",
              "phone_number_id": "12345"
            },
            "contacts": [
              {
                "profile": {
                  "name": "John Doe"
                },
                "wa_id": "12345"
              }
            ],
            "messages": [
              {
                "context": {
                  "from": "12345",
                  "id": "test-id"
                },
                "from": "123450",
                "id": "test-id",
                "timestamp": "16632",
                "location": {
                  "address": "1071 5th Ave, New York, NY 10128", #Optional
                  "latitude": 37.421996751527,
                  "longitude": -122.08407156636,
                  "name": "Solomon R. Guggenheim Museum" #Optional
                },
                "type": "location"
              }
            ]
          },
          "field": "messages"
        }
      ]
    }
  ]
}

ペイロード内のlocationコンポーネントには、ユーザーの緯度と経度が含まれています。addressとnameを含めるかはユーザーが任意に選択できるため、含まれていない場合があります。

"location": {
  "address": "1071 5th Ave, New York, NY 10128", #Optional
  "latitude": 40.782910059774,
  "longitude": -73.959075808525,
  "name": "Solomon R. Guggenheim Museum" #Optional
}