傳送互動式訊息

本指南說明傳送每一種互動式訊息選項的方式。互動式訊息讓用戶在使用 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 編號。

建議您設定使用 Webhook 接收訊息狀態和外來訊息通知。完成設定之後，您就可以追蹤訊息傳送進度以及您收到的回覆。詳情請見 Webhook。

步驟 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：新增通用訊息參數

完成互動式物件後，就可以附加其他構成訊息的參數：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：檢查 Webhook

若有設定 Webhook，請查看訊息狀態變更情形，以及用戶傳來的任何回覆。

用戶回覆互動式訊息的 Webhook 包括一項新的元件，名稱是 interactive，這個元件包含與用戶選擇相關的資訊。詳情請見 Webhook，元件。

例如，以下這個 Webhook 要求說明分享了位置的用戶。

{
  "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
}