傳送互動式訊息

本指南會指導您如何傳送每一種互動式訊息選項。透過互動式訊息，用戶可在 WhatsApp 上更輕鬆地從您的商家尋找和選擇所需內容。測試期間，與靠文字溝通的聊天機械人相比，使用互動式訊息傳送功能的聊天機械人的回覆率和轉換率明顯較高。

互動式訊息的類型：

• 清單訊息：此類訊息內有選單，當中包含最多 10 個選項。此類型的訊息讓用戶以更方便且一致的方式，在與商家互動期間作出選擇。
• 回覆按鈕訊息：此類訊息包含最多 3 個選項，其中每個選項均為一個按鈕。此類型的訊息讓用戶以更快捷的方式，在與商家互動期間從選單中作出選擇。回覆按鈕與含有按鈕的互動式範本有著相同的用戶體驗。
• 單件商品訊息：此類訊息中包含來自商家庫存的單件商品。詳情請參閱與顧客分享商品。
• 多件商品訊息：此類訊息中包含商家庫存中的精選商品，最多 30 件。詳情請參閱與顧客分享商品。
• 位置要求訊息：此類訊息會索取用戶的位置。
• Flows 訊息：此類訊息是用於結構化互動。詳情請參閱 Flows 訊息。

互動式訊息規格

• 同一個對話流程中可以合併不同的互動式訊息。
• 用戶不能在清單或按鈕訊息中同時選擇多個選項，但可以返回並重新開啟之前的訊息。
• 清單或回覆按鈕訊息不能用作通知。目前，您只可在用戶傳送最後一則訊息後的 24 小時內傳送這些訊息。如果您嘗試在 24 小時期限以外傳送訊息，便會收到錯誤訊息。
• 受支援的平台：iOS、Android 和網頁版（網頁版並不支援 Flows 訊息）。

文字訊息和互動式訊息的對比如下：

查看以下範例，了解如何在同一對話流程中同時使用清單訊息和回覆按鈕：

發生錯誤

播放此影片時發生問題。

了解詳情

總覽

使用好處

方便用戶理解

與以文字為本的清單相比，互動式訊息的格式更簡單和一致，方便用戶在商家中找出和選擇所需內容。在測試期間，用戶與這些功能互動時較能理解體驗內容。

帶來業務成果

測試期間，與靠文字溝通的聊天機械人相比，使用互動式訊息傳送功能的聊天機械人的回覆率和轉換率明顯較高。

個人化

互動式訊息內容是因應情況即時填入，因此可根據顧客或具體情形度身制定。例如，您可以顯示清單訊息來列出可預約的時段，或使用回覆按鈕來顯示之前的送貨地址。

告別範本

您不需要準備範本或接受預先審查，也能使用互動式訊息。

使用時機

清單訊息最適合用於呈現多個選項，例如：

• 顧客服務或常見問題選單
• 外賣餐單
• 精選的附近商店或分店
• 可預約時段
• 選擇要重複訂購的近期訂單

回覆按鈕最適合用於呈現一組有限的選項來讓用戶快速回覆，例如：

• 通話時間增值
• 更改個人詳細資料
• 重新訂購之前的訂單
• 要求退貨
• 在食品訂單中加入可選的額外產品
• 選擇付款方式

一般的回覆無法滿足「個人化」需求，這時候回覆按鈕便尤為重要。

Flows 訊息最適合用作一個或多個畫面上的結構化通訊，例如：

• 預約服務
• 瀏覽商品
• 收集顧客意見
• 開發新的銷售潛在顧客

Flows 訊息讓企業能夠提供更豐富和引人入勝的用戶體驗，幫助顧客在 WhatsApp 上更快捷地完成動作，而無需切換到其他應用程式或前往網站。

使用方法

在 API 級別將訊息的 type 設定為 interactive，並且加入 interactive 物件，即可設定互動式訊息。這類訊息一般會包含 4 個主要部分：header、body、footer 和 action。如下所示：

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

清單訊息中各個部分的組合方式：

回覆按鈕訊息中各個部分的組合方式：

詳細閱讀下文，了解如何傳送互動式訊息。

新手指南

在您能傳送每則訊息之前，您需要先向 /contacts 節點發出呼叫，以獲取傳送對象的 WhatsApp 編號。

我們建議設定 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 訊息包含用戶可以點按的呼籲字句按鈕。點按按鈕便會顯示您的自訂 Flow。

如要傳送 Flows 訊息，您必須整合 flow 類型的 interactive 物件。查看此處以了解詳情。

第 2 步：加入常用訊息參數

您現已整合好 interactive 物件，接下來請附加其他構成訊息的參數：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 為用戶選填項目，Webhooks 可能不會包含這些資訊。

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