ウェブビュー

Messengerプラットフォームでは、標準的なウェブビューを開いて、Messenger内でウェブビューを読み込むことができます。これにより、購入商品、座席、予約日の選択など、メッセージバブルでの提供が難しいエクスペリエンスや機能を提供することができます。

ウェブビューを表示する

以下のいずれかを使ってウェブビューを開くことができます。

インスタンスごとに、ウェブビューの表示や動作の方法を指定できます。

エクスペリエンスで、このセクションに記載のMessenger拡張機能を使用する場合は、ウェブビューを表示するためのメニューアイテムやボタンで、必ずmessenger_extensionsパラメーターをtrueに設定してください。

Messenger拡張機能SDK - 必須ドメインのホワイトリスト登録

MessengerウェブビューでMessengerエクステンションSDKが有効になっているウェブページを表示するには、ボットのMessengerプロフィールのwhitelisted_domainsプロパティで、ドメイン(サブドメインを含む)をホワイトリストに登録する必要があります。これにより、信頼できるドメインのみが、SDK関数を介して利用可能なユーザー情報にアクセスできるようになります。

ドメインのホワイトリスト登録について詳しくは、whitelisted_domainsのリファレンスをご覧ください。

ウェブビューのタイトルを設定する

他のウェブビューと同様、<title>タグで、ウェブビューのタイトルバーに表示されるテキストを設定します。

<html><head><title>優れたウェブビュー</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のウェブビュー拡張機能を利用して、スレッドのコンテキストをウェブビューに統合します。

一度にすべてのフォーム情報を収集する必要はありません。やり取りを通して少しずつ収集し、後ほどウェブビューで1つのフォームとして使用し、編集を加えることができます。

会話形式とウェブビューのインタラクションを組み合わせ、できるだけ簡潔なインタラクションにします。Messengerネイティブのエクスペリエンスでは、スレッドとウェブビューを組み合わせます。

使用例

チケット検索エクスペリエンスで、スタジアムのインタラクティブな座席マップを表示し、座席を指定できるようにする。
旅行エクスペリエンスで、通路側と窓側、民宿とホテル、食事に関する要望など、旅行に関する設定を固定メニューで行えるようにする。
歯医者の予約エクスペリエンスで、予約可能な日時を選択するためのインタラクティブなカレンダーを表示する。
ニュース発行者が、サブスクリプション登録するトピックの選択リストを提供する。
ブランドが、クーポンや無料ギフトをカスタマイズするための設定機能を提供する。