Webview

您可以在 Messenger 開放平台中開啟標準 Webview,在當中載入 Messenger 的網頁。開啟標準 Webview 後,您可以挑選想購買的商品以及要預定的座位或日期等,而訊息泡泡或許無法提供這些體驗和功能。

顯示 Webview

您可以透過以下任何一種方式開啟 Webview:

您可透過上述的每個執行個體,指定 Webview 的外觀和行為。

如果您的體驗有使用本章節所描述的 Messenger 擴充功能,請緊記在您要作為觸發來源的選單項目或按鈕中將 messenger_extensions 參數設為 true

Messenger 擴充元件 SDK—需要網域允許清單

如要在 Messenger WebView 中顯示啟用了 Messenger 擴充功能 SDK 的網頁,您必須Bot Messenger 個人檔案的 whitelisted_domains 屬性中將網域列入允許清單(包含子網域)。這樣可確保只有受信任的網域可以透過 SDK 函數存取可用的用戶資訊。

如要進一步了解如何將網域列入允許清單,請參閱 whitelisted_domains 參考資料

設定 Webview 標題

與所有網頁的情況一樣,您可以透過 <title> 標籤設定 Webview 標題欄中顯示的文字。

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

關閉 Webview

在某項交易完成後,建議您關閉 Webview,特別是當用戶採取的動作會使系統在對話串中產生訊息時。您可以透過 Messenger 擴充元件 SDK重新導向網址來關閉 Webview。

透過 Messenger 擴充元件 SDK 關閉

如要透過 Messenger 擴充元件 SDK 關閉Webview,請呼叫 MessengerExtensions.requestCloseBrowser()。您亦可選擇執行 success 和 error 回呼函數。

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

透過重新導向網址關閉

您也可以將用戶重新導向以下格式的網址,從而關閉 Webview:

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

在視窗關閉前,系統會短時間顯示您為 display_textimage_url 參數設定的值。請注意,只有您從自家網址或專頁重新導向時,才能透過這種方法關閉瀏覽器,直接開啟網址並不能達到相同效果。

此功能只適用於 Android。在 iOS 上,文字與圖像會如常顯示,但瀏覽器不會自動關閉。

Messenger 擴充元件 SDK

為了讓您能夠將 Webview 體驗與 Messenger 體驗緊密整合,我們還推出了 Messenger 擴充元件 JS SDK,讓您可以在 Webview 中使用已新增的功能,例如關於對話串背景資料的資訊。

詳情請參閱新增 Messenger 擴充元件 SDK

最佳操作實例

在較長的互動(多於 3 個步驟)中,如果用戶想編輯輸入內容,便可以使用 Webview,否則互動過程會變得不流暢。

在內容中具有較多視覺元素時使用。

用於讓用戶選擇偏好設定,或者允許他們根據需要更改之前的選擇。

與具有較多對話的互動一起使用。

根據內容配置 Webview 高度,同時保留下方對話串的背景資料。

運用 Messenger 的 Webview 擴充元件,將對話串的背景資料匯入 Webview。

您不必一次過收集所有表格資訊。您可以透過對話逐步收集這些資訊,並在之後使用 Webview 中的表格編輯。

整合對話互動和 Webview 互動,讓既定的互動保持簡短。結合對話串互動和 Webview 互動,建立「Messenger 原生」體驗。

使用範例

  • 門票搜尋體驗可以顯示互動式場館座位圖,以便用戶選擇座位。
  • 旅行體驗可以提供旅行偏好設定(走道還是靠窗航班座位、民宿或酒店,以及膳食需要),並且可在常駐選單中使用。
  • 預約牙醫體驗可以顯示互動式日曆,以便用戶選擇預約時段。
  • 新聞發佈商可以提供多選項主題清單,以便用戶訂閱。
  • 品牌企業可以提供個人偏好設定來自訂優惠和免費禮物。

推薦設計流程

  1. 用戶可以在下列兩種方式選擇一種來使用您的 Webview 體驗,或者同時選擇這兩種方式:按鈕(若該體驗是較大對話流程的一部分)或者選單項目(用於長期使用情況,例如偏好設定)。
  2. 您的體驗將顯示為覆蓋在對話串上方的圖層。視乎您的內容和使用案例,顯示大小為全螢幕、75% 高度或者 50% 高度。
  3. 在 Webview 互動期間或互動結束後,您可能想在對話串中傳送內容。
  4. 在互動結束後,用戶可以關閉 Webview 並返回對話串。或者,您可以根據用戶採取的動作(例如點擊「儲存」按鈕)自行關閉 Webview。