Catch up on all the news, sessions, and announcements from Google I/O 2021. Watch now.

Interactive Canvas API reference

The Interactive Canvas API is a JavaScript library that you use to interface with your Conversational Action using the interactiveCanvas object in your web app.

For more information about Interactive Canvas, see the Interactive Canvas documentation.



ready(callbacks) returns undefined

Called by the Interactive Canvas web app once it has loaded to register callbacks.

callbacks InteractiveCanvasCallbacks

An object that contains method callbacks.


sendTextQuery(textQuery) returns Promise<state>

Sends a text query to the conversational action.

textQuery string

The query to send to the conversational action.

state string

One of the following:

READY: Requests can be accepted by the platform.

BLOCKED: There is a query in flight and the new query will be dropped.

UNKNOWN: The current query state couldn't be determined.


getHeaderHeightPx() returns Promise<height>

Determines the height of the header at the top of a display.

height number

The height in pixels.


setCanvasState(state): void

Notifies the Assistant that the Canvas web app has updated its state. The setCanvasState method doesn't return a value. The state payload can be accessed through the conv.context.canvas.state property.

state Object

The updated state of the Canvas app as a JSON object.


These callbacks provide a way for you to respond to information or requests from your Conversational Action while the methods provide a way to send information or requests to your Conversational Action.


onUpdate(data) returns Promise|undefined

Called when a Canvas response is sent from the Conversational Action. TTS will start when the returned Promise is resolved, or timeout after 10 seconds.

data Object

Updated data sent by the webhook.


onTtsMark(markName) returns undefined

Callback that is invoked during TTS playback.

Special marks that always are triggered:

  • START indicates the start of the TTS.
  • END indicates the end of the TTS.
  • ERROR indicates an error playing the TTS.

You can also define custom marks by using SSML and the <mark> tag, like <mark name="custom"/>.

markName string

Mark name invoked during TTS playback.