WhatsAppインタラクティブメッセージ
インタラクティブメッセージはWhatsApp for Businessの機能です。この機能は Vonage Messages API APIエンドポイントやウェブフックを利用することで、この機能を活用することができる。
基本的なアプリケーションの流れ
WhatsApp インタラクティブメッセージの基本的な操作手順は以下の通りです：
送信
POSTにリクエストする。/v1/messagesエンドポイントを使用する。リクエスト・ボディには、必要なJSONデータが含まれていなければなりません。channelに設定する。whatsappそしてmessage_typeに設定する。custom.そのcustomフィールドには、適切にフォーマットされた カスタムオブジェクト.カスタムオブジェクトの実際の構造は、送信されるインタラクティブメッセージのタイプ（返信ボタンやリストなど）によって異なります。適切なメッセージタイプが指定されたWhatsAppチャットに表示されます。顧客は返信ボタンをクリックしたり、リストからオプションを選択するなど、メッセージと対話することができます(メッセージタイプによる)。Vonage Messages API はこのインタラクションを、事前に設定された インバウンド・メッセージ・ウェブフック
コールバックを介して受け取ったペイロードの内容に基づいて、さらなるリクエストを送信するなど、適切なアクションを実行することができます。
注： コールバックを受け取るための受信メッセージウェブフック マスト の一部として設定されている。 Vonageアプリケーション
アプリケーションの設定
Vonageアプリケーションは、次のようなさまざまな方法で設定できます。 ダッシュボードApplicationsAPIを呼び出すか、Vonage CLIを使用します。以下では、ダッシュボード経由でのアプリケーションのセットアップについて説明します。
- Your applicationsの下に新しいアプリケーションを作成する（適切な名前などを指定する）。
- 機能]で[メッセージ]を有効にする
- メッセージを有効にすると、受信ウェブフックとステータスウェブフックのフィールドが公開されます。受信ウェブフックにWhatsAppインタラクティブメッセージのコールバックを受信するURLを設定します。
- ドロップダウンメニューを使用して、Messages APIバージョンをv1に設定します。
- 新規アプリケーションの作成」をクリックします。
- アプリケーションを起動すると、「ソーシャルチャンネルのリンク」タブが表示されます。このタブでWhatsAppビジネス番号をリンクできます。
注： Vonageアプリケーションでは、APIへのリクエストを認証するためにJWT（JSON Web Tokens）の使用を義務付けています。つまり、Webhooksを使用してMessages API v1を使用する場合、HTTP Basic認証はオプションではありません。 JWTについてもっと読む.
インタラクティブなメッセージ：例
JSONオブジェクトの構造は、インタラクティブ・メッセージのタイプによって、またメッセージによって異なります。しかし、標準では from そして to Numbers, a channel キーを whatsappそして message_type の custom.を設定する必要がある。 custom キーであり、その値は カスタムオブジェクト.カスタムオブジェクトは type キー interactiveそして interactive キーであり、その値自体がオブジェクトである。
について interactive オブジェクトはインタラクティブ・メッセージを定義します。このオブジェクトは type キーのいずれかに設定する。 button または listまた、一般的に4つの主要部分を含む： header, body, footerそして action.その action は、ボタンやリストオプションなど、メッセージ内のインタラクティブ要素を決定します。
返信ボタン例
以下は、3つの返信ボタンが付いたWhatsAppインタラクティブメッセージ送信リクエストの本文の例です：
{
"from": "YOUR_WABA_NUMBER",
"to": "USERS_NUMBER",
"channel": "whatsapp",
"message_type": "custom",
"custom": {
"type": "interactive",
"interactive": {
"type": "button",
"header": {
"type": "text",
"text": "Delivery time"
},
"body": {
"text": "Which time would you like us to deliver your order at?"
},
"footer": {
"text": "Please allow 15 mins either side of your chosen time"
},
"action": {
"buttons": [
{
"type": "reply",
"reply": {
"id": "slot-1",
"title": "15:00"
}
},
{
"type": "reply",
"reply": {
"id": "slot-2",
"title": "16:30"
}
},
{
"type": "reply",
"reply": {
"id": "slot-3",
"title": "17:15"
}
}
]
}
}
}
}
その結果、メッセージは次のように表示される：
WhatsApp UIでは、あたかもユーザーがボタンのテキストで返信したかのようにメッセージが変化します。さらに、そのボタンはクリックできなくなり、他のボタンはクリック可能なままとなります。
ユーザーが最初のオプションを選択した場合、インバウンド・ウェブフックを通じて次のようなものを受け取ることになる：
{
"to": "YOUR_WABA_NUMBER",
"from": "USERS_NUMBER",
"channel": "whatsapp",
"message_uuid": "00000000-0000-0000-0000-000000000000",
"timestamp": "2021-08-10T00:00:00Z",
"message_type": "reply",
"reply": {
"id": "slot-1",
"title": "15:00"
}
}
メッセージのリスト例
以下はWhatsAppインタラクティブリストメッセージ送信リクエストの本文の例で、4つのオプションが2つのセクションに分類されています：
{
"from": "YOUR_WABA_NUMBER",
"to": "USERS_NUMBER",
"channel": "whatsapp",
"message_type": "custom",
"custom": {
"type": "interactive",
"interactive": {
"type": "list",
"header": {
"type": "text",
"text": "Select which pill you would like "
},
"body": {
"text": "You will be presented with a list of options"
},
"footer": {
"text": "There are no wrong choices"
},
"action": {
"button": "Select",
"sections": [
{
"title": "Section A - pills",
"rows": [
{
"id": "row1",
"title": "Red",
"description": "Take the red pill"
},
{
"id": "row2",
"title": "Blue",
"description": "Take the blue pill"
},
{
"id": "row3",
"title": "Green",
"description": "Take the green pill"
}
]
},
{
"title": "Section B - no pills",
"rows": [
{
"id": "row4",
"title": "Nothing",
"description": "Do not take a pill"
}
]
}
]
}
}
}
}
その結果、メッセージは次のように表示される：
選択」ボタンをクリックすると、利用可能なオプションが表示されます。そして、ユーザーは1つのオプション（最大）を選択し、「送信」ボタンをクリックすることができます。
あたかもユーザーがAPIリクエストのtitleとdescriptionフィールドのテキストでメッセージに返信したかのように、メッセージの外観が変化する。
顧客がセクションAから最初のオプションを選択した場合、その後、インバウンドウェブフック経由で次のようなものを受け取ることになります：
{
"to": "YOUR_WABA_NUMBER",
"from": "USERS_NUMBER",
"channel": "whatsapp",
"message_uuid": "00000000-0000-0000-0000-000000000000",
"timestamp": "2021-08-10T00:00:00Z",
"message_type": "reply",
"reply": {
"id": "row1",
"title": "Red",
"description": "Take the red pill"
}
}