# InteractiveCanvas (Dialogflow)

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

> [!NOTE]
> **Note:** The `interactiveCanvas` object is attached to the `window` object. If you are using a front-end framework to develop your web app, you need to ensure that you have access to `window` to set up the API.

## Methods

### ready

    ready(callbacks) returns undefined

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

| Parameters ||
|---|---|
| `callbacks` | ` https://developers.google.com/assistant/df-asdk/interactivecanvas/reference/interactivecanvas#interactivecanvascallbacks ` An object that contains method callbacks. |

> [!NOTE]
> **Note:** You must invoke the `ready` API in the web app as soon as the page is loaded. Otherwise, the Action will close.

### sendTextQuery

    sendTextQuery(textQuery) returns Promise<state>

Sends a text query to the conversational action.

| Parameters ||
|---|---|
| `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. <br /> |

> [!CAUTION]
> **Caution:** `textQuery` must be 640 characters or less.

### getHeaderHeightPx

    getHeaderHeightPx() returns Promise<height>

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

| Parameters ||
|---|---|
| `height` | `number` The height in pixels. |

## 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.

| Parameters ||
|---|---|
| `data` | `Object` Updated data sent by the webhook. |

### 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](https://developers.google.com/assistant/actions/reference/ssml)
and the `<mark>` tag, like `<mark name="custom"/>`.

> [!NOTE]
> **Note:** SSML marks are not invoked when the following occurs:
>
> - Before TTS begins, the user taps the microphone, or the Interactive Canvas client invokes `sendTextQuery`. The TTS is cancelled and any SSML marks in the TTS are ignored.
> - During TTS, the user taps the microphone, or the Interactive Canvas client invokes `sendTextQuery`. The TTS is interrupted and any remaining SSML marks in the TTS are ignored.

| Parameters ||
|---|---|
| `markName` | `string` Mark name invoked during TTS playback. |