인터랙티브 메시지 보내기

이 가이드에서는 각 인터랙티브 메시지 옵션을 보내는 방법을 설명합니다. 인터랙티브 메시지를 이용하면 사용자가 비즈니스에서 원하는 것을 WhatsApp에서 더 간편하게 찾고 선택할 수 있습니다. 테스트 결과, 인터랙티브 메시지 기능을 사용하는 챗봇은 텍스트 기반 챗봇에 비해 응답률과 전환율이 상당히 높았습니다.

인터랙티브 메시지 유형:

• 리스트 메시지: 최대 10개 옵션으로 구성된 메뉴를 포함하는 메시지입니다. 이 유형의 메시지를 이용하면 사용자가 비즈니스와 상호작용할 때 더 간단하고 일관되게 선택할 수 있습니다.
• 답장 버튼 메시지: 최대 3개의 옵션을 포함하는 메시지(각 옵션은 버튼임). 이 유형의 메시지를 이용하면 사용자가 비즈니스와 상호작용할 때 더 빠르게 메뉴에서 선택할 수 있습니다. 답장 버튼은 버튼이 있는 인터랙티브 템플릿과 동일한 사용자 경험을 제공합니다.
• 단일 제품 메시지: 비즈니스 인벤토리의 단일 품목을 포함하는 메시지입니다. 자세한 내용은 고객과 제품 공유를 참조하세요.
• 다중 제품 메시지: 비즈니스 인벤토리의 최대 30개 품목으로 구성된 선택 항목을 포함하는 메시지입니다. 자세한 내용은 고객과 제품 공유를 참조하세요.
• 위치 요청 메시지: 사용자의 위치를 요청하는 메시지입니다.
• 플로 메시지: 구조화된 인터랙션을 위한 메시지입니다. 자세한 내용은 플로 메시지를 참조하세요.

인터랙티브 메시지 사양

• 인터랙티브 메시지는 동일한 플로에서 함께 결합할 수 있습니다.
• 사용자는 리스트 또는 버튼 메시지에서 동시에 두 개 이상의 옵션을 선택할 수 없지만 이전의 메시지로 돌아가 다시 열 수는 있습니다.
• 리스트 또는 답장 버튼 메시지는 알림으로 사용할 수 없습니다. 현재 이러한 메시지는 사용자가 마지막 메시지를 전송한 시점부터 24시간 이내에만 전송할 수 있습니다. 24시간 전송 기간이 지나 메시지를 전송하려고 하는 경우 오류 메시지를 받게 됩니다.
• 지원되는 플랫폼은 iOS, Android 및 웹입니다(플로 메시지는 웹에서 지원되지 않음).

문자 메시지와 인터랙티브 메시지의 차이를 확인해 보세요.

리스트 메시지와 답장 버튼을 동일한 플로에서 결합하는 방법의 예시를 확인해 보세요.

문제가 발생했습니다

이 동영상을 재생하는 중 문제가 발생했습니다.

더 알아보기

개요

사용해야 하는 이유

사용자의 이해

텍스트 기반 리스트에 비해, 인터랙티브 메시지는 사용자가 비즈니스에서 원하는 것을 찾아서 선택할 수 있는 더 간단하고 일관된 형식을 제공합니다. 테스트 결과, 이러한 기능과 상호작용하는 사용자의 이해도가 더 높았습니다.

비즈니스 성과

테스트 결과, 인터랙티브 메시지 기능을 사용하는 챗봇은 텍스트 기반 챗봇에 비해 응답률과 전환율이 상당히 높았습니다.

개인 맞춤화

동적인 방식으로 실시간으로 채워지므로 고객 또는 상황에 맞게 맞춤화할 수 있습니다. 예를 들어 예약 가능한 시간 슬롯을 리스트 메시지로 보여주거나 답장 버튼을 사용하여 이전의 배송 주소를 표시할 수 있습니다.

템플릿 없음

인터랙티브 메시지는 템플릿이나 사전 승인이 필요하지 않습니다.

사용해야 하는 시점

리스트 메시지는 다음과 같이 여러 가지 옵션을 보여주기에 가장 적합합니다.

• 고객 관리 또는 FAQ 메뉴
• 테이크아웃 메뉴
• 인근 매장 또는 위치 선택
• 예약 가능한 시간
• 최근 주문을 선택하여 다시 주문하기

답장 버튼은 다음과 같이 제한된 옵션으로 빠른 답변을 제공하기에 가장 적합합니다.

• 통화 시간 충전
• 개인 상세 정보 변경
• 이전 주문을 다시 주문하기
• 반품 요청하기
• 음식 주문에 선택적 추가 메뉴 추가하기
• 결제 수단 선택

답장 버튼은 일반적인 답변으로는 충분하지 않은 '개인화된' 사용 사례에 특히 유용합니다.

플로 메시지는 다음과 같이 하나 또는 여러 개의 화면에 걸친 구조화된 소통에 가장 적합합니다.

• 예약
• 제품 둘러보기
• 고객 피드백 수집
• 새로운 판매 잠재 고객 가져오기

플로 메시지를 사용하는 비즈니스는 고객이 다른 앱으로 전환하거나 웹사이트를 방문하지 않고 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 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" 
  }
}

플로 메시지

플로 메시지에는 사용자가 누를 수 있는 행동 유도 버튼이 있습니다. 버튼을 누르면 맞춤 플로가 표시됩니다.

플로 메시지를 보내려면 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
}