InteractiveCanvas (Dialogflow)

Page Summary

outlined_flag

• The interactiveCanvas object in your web app interfaces with your conversational action and is attached to the window object.

• The ready method must be called as soon as your web app loads to register callbacks and prevent the Action from closing.

• The sendTextQuery method allows you to send a text query to the conversational action with a maximum length of 640 characters.

• The getHeaderHeightPx method determines the height of the header at the top of the display in pixels.

• InteractiveCanvasCallbacks like onUpdate and onTtsMark allow your web app to respond to information or requests from the conversational action.

The interactiveCanvas object is the interface to your conversational action that is made available within your web app.

Methods

ready

 ready(callbacks) returns undefined 

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

sendTextQuery

 sendTextQuery(textQuery) returns Promise<state> 

Sends a text query to the conversational action.

getHeaderHeightPx

 getHeaderHeightPx() returns Promise<height> 

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

InteractiveCanvasCallbacks

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

 onUpdate(data) returns undefined 

Called when an HtmlResponse is sent from the conversational action. After the end of the function call, the TTS will start immediately.

onTtsMark

 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"/> .