网页视图

您可以在 Messenger 开放平台中开启标准网页视图,在其中加载 Messenger 的网页。开启标准网页视图后,您可以挑选想购买的商品以及要预定的座位和日期等,而消息气泡无法提供这些体验和功能。

显示网页视图

您可以通过以下任一种方法开启网页视图:

在所有上述实例中,您都可以指定网页视图的外观和行为。

如果您的体验会用到本部分介绍的 Messenger 功能插件,请务必在调用 messenger_extensions 参数时所用的菜单项目或者按钮中将此参数设置为 true

Messenger 功能插件 SDK — 必须将网域加入白名单

如要在 Messenger 网页视图中显示启用了 Messenger 功能插件 SDK 的网页,您必须在智能助手 Messenger 配置文件的 whitelisted_domains 属性中将域(包括子域)加入白名单。这样可以确保仅受信任的域可通过 SDK 函数访问可用的用户信息。

如需详细了解如何将域加入白名单,请查看 whitelisted_domains 常见问题

设置网页视图标题

与所有网页的情况一样,您可以通过 <title> 标记设置网页视图标题栏中显示的文本。

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

关闭网页视图

建议您完成交易后关闭网页视图,尤其是在用户采取的操作会产生对话消息时。您可以通过 Messenger 功能插件 SDK跳转网址来关闭网页视图。

通过 Messenger 功能插件 SDK 关闭

如要通过 Messenger 功能插件 SDK 关闭网页视图,请调用 MessengerExtensions.requestCloseBrowser()。您也可以选择实现 success 和 error 回调函数。

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. 在互动结束后,用户可以关闭网页视图并返回对话,或者您也可以根据用户采取的操作(例如点击“保存”按钮)自行关闭网页视图。