Some APIs for Interactive Canvas have been changed

Published in

Google Developer Experts

3 min readJul 22, 2019

At the Google I/O 2019, supporting Smart Display by Google Assistant was treated as a big announcement in some topics regarding Google Assistant. And, to build actions which use “a screen” which is a feature of Smart Display, Interactive Canvas feature has been introduced. By using the feature, actions can provide an web app for Smart Display.

Please refer the following document for more detail of Interactive Canvas.

Interactive Canvas — Actions on Google Reference Document

Currently, it is a developer preview, and you can’t publish your actions using Interactive Canvas yet. But, you can build actions using Interactive Canvas now. I think that many developers have already been challenging to build actions with Interactive Canvas.

I guess that many developers might recognize that naming of some APIs don’t have a consistency (I was one of them as well). In a few days ago, to become the naming more consistent, some APIs have been changed.

I introduce these changes here.

Change ImmersiveResponse to HtmlResponse

To send a response for Interactive Canvas from your fulfillment, it was necessary to use the Immersive Response class until now. But, we need to use HtmlResponse class instead. The usage is same as the ImmersiveResponse class, you create an object of the HtmlResponse class and pass it to the conv.ask() method.

const {
  dialogflow,
  HtmlResponse,
  ...
} = require('actions-on-google');const app = dialogflow();app.intent('Default Welcome Intent', conv => {
  conv.ask('...');
  conv.ask(new HtmlResponse({
    url: '...'
  }));
});

Change state to data

At the same time of changing the HtmlResponse class, the property name changes from “state” to “data”. This property is used for passing information from your fulfillment to your Web app.

conv.ask(new HtmlResponse({
  data: {
    ...
  }
}));

Change JavaScript SDK file URL

The JavaScript SDK is necessary in the Web app side to support Interactive Canvas. The URL of the JavaScript SDK is changed.

https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js

You need to load it in your HTML file.

<!DOCTYPE html>
<html>
  <head>
    ...
    <script type="text/javascript" src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Change assistantCanvas to interactiveCanvas

Corresponding to JavaScript SDK changes, you need to modify your code. the “assistantCanvas” object was provided, but the name is changed to “interactiveCanvas”.

interactiveCanvas.ready({
  onUpdate(data) {
    ...
  }
});interactiveCanvas.sendTextQuery(...);

By a fulfillment side, the “state” is changed to the “data”. As the same, you would be better to change the argument name of the callback function passed to the ready() method of the interactiveCanvas object from “state” to “data”.

Deprecate CSS file

In an web app of Interactive Canvas, to display an action name, there is a header area in the top of the client area of the screen. The height of the header area is different from each device. That is, the height which actions can use is the remaining height subtracted the height of the header area from the height of whole client area. And, the available height will be changed dynamically.

Until now, the CSS file was provided to set the header height to the padding-top style attribute value of the body element. But, this CSS file is deprecated.

Add a new API to retrieve the header height

Instead of using the CSS file, a new API to retrieve the header height dynamically is provided. Developers can retrieve the header height by calling the getHeaderHeightPx() method of the interactiveCanvas object.

const headerHeight = await interactiveCanvas.getHeaderHeightPx();

Note that the type of the returned value from the getHeaderHeightPx() method is Promise<number>. You will need to use await or then() to call the API.

How to apply changes

To reflect these changes for existing actions, it is necessary to update the version of the Actions on Google Client Library.

NodeJS — Executenpm install actions-on-google@preview

After executing the command above, you can use APIs like HtmlResponse.

Unfortunately, Actions on Google Client Library for Java doesn’t support Interactive Canvas at the time when I wrote this entry.