How to Import more screen Web Page with Google Interactive Canvas

Question

I wanna use Interctive-Cavas to customize Google NestHub by HTML, CSS and Js.

In Example : https://medium.com/voice-tech-podcast/google-assistant-interactive-canvas-c83a959bdea0

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

url: https://${firebaseConfig.projectId}.firebaseapp.com show index.html. But i have many other html files, example : a.html, b.html, c.html,... wanna show.

So, How to do it? Please help me !

Thanks a lot!

Answer 1

Best practice is to use the Interactive Canvas with a Single Page Application (SPA). In this scheme, your index.html is responsible for displaying everything, although it can pull in resources from other URLs.

This lets you do nice transitions and creates a less jarring experience for the user on subsequent page loads.

However, there is nothing stopping you from loading in a different page as part of your response. So for your welcome intent, you may wish to reply with the index page using something like this:

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

while for other intents you may wish you reply with a different URL. Possibly something like this:

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

If you went with the single page model, you can send back data and have the JavaScript in your page detect this. This data can be anything you want, but might look something like this (assuming you had variables pageNumber and name with useful information to put on the page)

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