时间戳

首页 > 解决方案 > 如何使用 Google Interactive Canvas 导入更多屏幕网页

firebase - 如何使用 Google Interactive Canvas 导入更多屏幕网页

问题描述

我想使用 Interctive-Cavas 通过 HTML、CSS 和 Js 自定义 Google NestHub。

在示例中：https ://medium.com/voice-tech-podcast/google-assistant-interactive-canvas-c83a959bdea0

conv.ask(new HtmlResponse({
    url: `https://${firebaseConfig.projectId}.firebaseapp.com`,
  }));

网址：https://${firebaseConfig.projectId}.firebaseapp.com显示index.html。但我还有许多其他 html 文件，例如：a.html、b.html、c.html、...想要展示。

那么，该怎么做呢？请帮我 ！

非常感谢！

标签： firebasedialogflow-esactions-on-googleinteractive

解决方案

最佳实践是将交互式画布与单页应用程序(SPA) 一起使用。在这个方案中，您的 index.html 负责显示所有内容，尽管它可以从其他 URL 中提取资源。

这使您可以进行漂亮的过渡，并在后续页面加载时为用户创建不那么刺耳的体验。

但是，作为响应的一部分，没有什么可以阻止您加载到不同的页面。因此，为了您的欢迎意图，您可能希望使用以下内容回复索引页面：

conv.ask(new HtmlResponse({
    url: `https://${firebaseConfig.projectId}.firebaseapp.com`,
  }));

而对于其他意图，您可能希望使用不同的 URL 进行回复。可能是这样的：

conv.ask(new HtmlResponse({
    url: `https://${firebaseConfig.projectId}.firebaseapp.com/page1.html`,
  }));

如果您使用单页模型，则可以发回数据并让页面中的 JavaScript 检测到这一点。此数据可以是您想要的任何数据，但可能看起来像这样（假设您有变量pageNumber并且name有有用的信息可以放在页面上）

conv.ask(new HtmlResponse({
    data: {
      page: pageNumber,
      userName: name
    }
  }));

推荐阅读