Messenger 플랫폼

웹 보기

Messenger 플랫폼에서 표준 웹 보기를 열고 Messenger에 웹페이지를 읽어들일 수 있습니다. 이렇게 하면 구매할 제품, 예약할 좌석이나 날짜를 선택하는 것과 같이 메시지 버블로는 한계가 있을 수 있는 경험과 기능을 제공할 수 있습니다.

웹 보기 표시하기

다음 중 어느 곳에서나 웹 보기를 열 수 있습니다.

각 인스턴스에서 웹 보기의 스타일과 동작을 지정할 수 있습니다.

이 섹션에서 설명하는 Messenger 확장 기능을 사용하는 경험일 경우, 호출하는 메뉴 항목이나 버튼에서 messenger_extensions 매개변수를 true로 설정하는 것을 잊지 마세요!

Messenger 확장 기능 SDK - 필수 도메인 화이트리스트

Messenger 웹 보기에서 Messenger Extensions SDK를 활성화하고 웹페이지를 표시하려면 반드시whitelisted_domains봇의 Messenger 프로필 속성에서 도메인(하위 도메인 포함)을 화이트리스트에 추가해야 합니다. 그러면 신뢰하는 도메인만 SDK 함수를 통해 제공되는 사용자 정보에 액세스할 수 있습니다.

도메인을 화이트리스트에 추가하는 방법에 대한 자세한 내용은 whitelisted_domains 참고 자료를 참조하세요.

웹 보기 제목 설정

모든 웹 페이지에서와 마찬가지로 <title> 태그는 웹 보기의 제목줄에 표시되는 텍스트를 설정합니다.

<html><head><title>My Awesome Webview</title></head>
   ...
</html>

웹 보기 닫기

거래가 완료된 후 (특히 사용자가 취하는 행동이 스레드에 메시지를 표시하는 경우) 웹 보기를 닫는 것이 좋습니다. 이는 Messenger 확장 기능 SDK 또는 리디렉션 URL을 사용하여 수행할 수 있습니다.

Messenger 확장 기능 SDK를 사용하여 닫기

Messenger 확장 기능 SDK를 사용하여 웹 보기를 닫으려면 MessengerExtensions.requestCloseBrowser()를 호출하세요. 원하는 경우 성공 및 오류 콜백 함수를 구현할 수도 있습니다.

MessengerExtensions.requestCloseBrowser(function success() {
  // webview closed
}, function error(err) {
  // an error occurred
});

리디렉션으로 닫기

다음 형식의 URL로 사용자를 리디렉션하여 웹 보기를 닫을 수도 있습니다.

https://www.messenger.com/closeWindow/?image_url=<IMAGE_URL>&display_text=<DISPLAY_TEXT>

창이 닫히기 전까지 display_text 및 image_url 매개변수에 설정된 값이 잠시 표시됩니다. 이 방법을 사용할 경우 URL/페이지에서 리디렉션할 때만 닫힙니다. URL을 직접 열면 브라우저가 닫히지 않습니다.

이는 Android에서만 작동합니다. iOS에서는 텍스트와 이미지는 표시되지만 브라우저는 자동으로 닫히지 않습니다.

Messenger 확장 기능 SDK

Messenger 경험과 웹 보기의 경험을 긴밀하게 통합하는 기능을 제공하기 위해 Messenger 확장 기능 JS SDK도 제공합니다. 이를 통해 웹 보기에서 스레드 컨텍스트에 대한 정보 등과 같은 추가적 기능에 액세스할 수 있습니다.

자세한 내용은 Messenger 확장 기능 SDK 추가를 참조하세요.

모범 사례

사용자가 입력 내용을 수정하고자 하거나 그 외에 비선형적인 방식으로 진행하고자 하는 긴 인터랙션(4단계 이상)에 사용합니다.

특히 시각적인 콘텐츠에 사용합니다.

사용자 기본 설정에 사용하거나 이전 선택 항목에 대한 온디맨드 변경을 허용하는 데 사용합니다.

대화의 성격이 더 강한 인터랙션과 결합하여 사용합니다.

콘텐츠에 맞게 웹 보기의 높이를 구성하고 그 아래에 스레드 컨텍스트를 보존합니다.

Messenger의 웹 보기 확장 기능을 활용하여 스레드 컨텍스트를 웹 보기로 가져옵니다.

한 번에 모든 양식 정보를 수집해야 한다고 생각하지 마세요. 대화를 통해 하나씩 캡처한 후 웹 보기에서 양식을 사용하고 나중에 편집할 수 있습니다.

대화 및 웹 보기 인터랙션을 섞어서 사용하고 어느 인터랙션이든 간단하게 유지합니다. 'Messenger 네이티브' 경험을 위해 스레드와 웹 보기 인터랙션을 결합합니다.

사용 사례

  • 티켓 검색 경험은 좌석을 선택하기 위한 인터랙티브 경기장 좌석 지도를 표시할 수 있습니다.
  • 여행 경험은 창 및 복도 좌석, 여관 및 호텔, 식단 요구 사항 등, 여행 선호 사항을 제공하고 고정 메뉴에서 액세스하도록 할 수 있습니다.
  • 치과 예약 경험은 진료 예약 슬롯을 선택하기 위한 인터랙티브 캘린더를 표시할 수 있습니다.
  • 뉴스 퍼블리셔는 구독할 주제로 구성된 다항목 선택 리스트를 제공할 수 있습니다.
  • 브랜드는 혜택과 무료 선물을 맞춤 설정하는 개인 기본 설정을 제공할 수 있습니다.

추천 디자인 플로

  1. 사용자는 두 가지 방법 중 하나로 웹 보기 경험에 액세스합니다. 더 큰 대화 플로의 일부인 경우에는 버튼을 통해 액세스하거나, 진행 중인 액세스(예: 기본 설정)의 경우에는 메뉴 항목을 통해 액세스합니다. 또는 그 두 가지를 모두 사용하기도 합니다.
  2. 경험은 스레드 위의 레이어에 표시되는데, 콘텐츠와 사용 사례에 따라 전체 화면, 75% 높이, 50% 높이로 나타납니다.
  3. 웹 보기 인터랙션 도중 또는 그 이후에 스레드로 콘텐츠를 보내는 것이 좋습니다.
  4. 사용자가 작업이 완료되면 웹 보기를 닫고 스레드로 돌아가거나, 관리자가 사용자의 행동(예: 저장 버튼)에 대응하여 웹 보기를 직접 닫을 수 있습니다.