網頁檢視

Messenger 開放平台可讓您開啟標準網頁檢視,以在 Messenger 內載入網頁。您可透過這種方式來提供訊息泡泡難以呈現的體驗和功能,例如:挑選要購買的商品、要預訂的座位,或要預約的日期。

顯示網頁檢視

您可以透過下列任一方式開啟網頁檢視:

在上述每個實例中,您都可指定網頁檢視的外觀和行為。

如果您提供的體驗使用本節中說明的 Messenger 擴充功能,請記得在叫用該擴充功能的功能表項目或按鈕中,將 messenger_extensions 參數設定為 true

Messenger 擴充功能 SDK - 必須將網域列入許可清單

若要使用在 Messenger Webview 中啟用的 Messenger 擴充功能 SDK 來顯示網頁,您必須Bot 的 Messenger 個人檔案 whitelisted_domains 屬性中將網域(包括子網域)列入允許清單。如此可確保只有受信任的網域才能透過 SDK 功能存取可用的用戶資訊。

有關將網域列入允許清單的詳細資訊,請參閱 whitelisted_domains 參考資料

設定網頁檢視標題

如同任何網頁,<title> 標籤會設定要顯示在網頁檢視標題列的文字。

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

關閉網頁檢視

建議您在交易完成後關閉網頁檢視,尤其是當用戶採取的行動會在對話串中產生訊息時。這可以透過 Messenger 擴充功能 SDK 或使用重新導向網址來完成。

透過 Messenger 擴充功能 SDK 進行關閉

若要使用 Messenger 擴充功能 SDK 來關閉網頁檢視,請呼叫 MessengerExtensions.requestCloseBrowser()。您也可以選擇實作成功和錯誤回呼函數。

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

使用重新導向進行關閉

您也可以藉由將用戶重新導向至下列格式的網址,以關閉網頁檢視:

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

視窗關閉前會短暫顯示 display_textimage_url 參數的設定值。請注意,只有從網址/網頁重新導向時,這個方法才會進行關閉。直接開啟網址不會關閉瀏覽器。

此方法只能在 Android 平台上運作。在 iOS 平台上,會顯示文字和圖像,但瀏覽器不會自動關閉。

Messenger 擴充功能 SDK

為了讓您能夠將網頁檢視的體驗與 Messenger 體驗緊密整合,我們還提供 Messenger 擴充功能 JS SDK,以供在網頁檢視中存取新增的功能,例如對話串內文的相關資訊。

如需更多資訊,請參閱加入 Messenger 擴充功能 SDK

最佳作法

用於較長時間的互動(超過三個步驟),其中用戶可能會想要編輯所輸入的資訊,或者以非線性的方式進行操作。

用於著重視覺效果的內容。

用於用戶偏好設定,或允許對先前的選擇進行隨選變更。

用於搭配較偏對話式的互動。

配置網頁檢視的高度來配合所含內容,同時保留底下對話串的內文。

利用 Messenger 的網頁檢視擴充功能,將對話串的內文帶入網頁檢視中。

您不需要一次收集所有的表單資訊。您可透過對話方式逐一收集資訊,然後在網頁檢視中使用表單,稍後再進行編輯。

將對話式互動與網頁檢視互動混合,並且力求所有互動簡明扼要。將對話串互動與網頁檢視互動結合,打造「Messenger 原生」般的使用體驗。

使用範例

  • 門票搜尋體驗可顯示互動式體育場座位圖,以供選擇座位。
  • 旅遊體驗可在常駐功能表提供旅遊偏好設定(靠走道或靠窗、旅館或飯店、飲食需求)。
  • 牙科預約體驗可顯示互動式行事曆,以供選擇預約時段。
  • 新聞時事供應商可提供主題複選清單以供訂閱。
  • 品牌可提供個人偏好設定,以供自訂優惠方案和免費贈品。

建議的設計流程

  1. 用戶以兩種方式存取您的網頁檢視體驗:透過按鈕(如果是較大對話流程中的一部分),或透過用於持續存取的功能表項目(例如:偏好設定),或兩者並行。
  2. 您的體驗會重疊顯示在對話串上(全螢幕、高度的 75%、高度的 50%,視內容和使用案例而定)。
  3. 您可以在網頁檢視互動期間或結束後,將內容傳送至對話串。
  4. 完成後,用戶可以關閉網頁檢視並返回對話串,或者您可以依據用戶採取的行動(例如「儲存」按鈕),自行關閉網頁檢視。