# Overview (Dialogflow)

> [!NOTE]
> **Note:** Actions that use Interactive Canvas take slightly longer for Google's review team to test and approve. Allow extra time in your release process to account for this.

[Video](https://www.youtube.com/watch?v=wH-DVAoCQN0)

Interactive Canvas is a framework built on the Google Assistant that allows
developers to add visual, immersive experiences to conversational Actions.
This visual experience is an interactive web app that the Assistant sends as a
response to the user in conversation. Unlike traditional
[rich responses](https://developers.google.com/assistant/df-asdk/rich-responses) that exist
in-line in an Assistant conversation, the Interactive Canvas web app renders
as a full-screen web view.

You should use Interactive Canvas if you want to do any of the following in
your Action:

- Create full-screen visuals
- Create custom animations and transitions
- Do data visualization
- Create custom layouts and GUIs

![](https://developers.google.com/static/assistant/df-asdk/interactivecanvas/images/interactivecanvasgame.gif) **Figure 1.** An interactive game built using Interactive Canvas.

> [!NOTE]
> **Note:** At this time, Google is only approving Actions that are gaming experiences.

## Supported devices

Interactive Canvas is currently available on the following devices:

- Smart Displays
- Google Nest Hubs
- Android mobile devices

  > [!NOTE]
  > **Note:** For Canvas to work on Android mobile devices, your AGSA (Android Google Search App) must be version 9.86 or above.

## How it works

An Action that uses Interactive Canvas works similarly to a regular conversational
Action. The user still has a back-and-forth conversation with the Assistant to
fulfill their goal; however, instead of returning responses in-line in the
conversation, an Interactive Canvas Action sends a response to the user that
opens a full-screen web app. The user continues to interact with the web app
through voice or touch until the conversation is over.

There are several components to an Action that uses Interactive Canvas:

- **[Conversational Action](https://developers.google.com/assistant/df-asdk/overview):** An Action that uses a conversational interface to fulfill user requests. Interactive Canvas Actions use web views to render responses instead of rich cards or simple text and voice responses. Conversational Actions use the following components:
  - **[Dialogflow agent](https://cloud.google.com/dialogflow/docs/agents-overview)**: A project in Dialogflow that you customize to converse with your Action users.
  - **[Fulfillment](https://cloud.google.com/dialogflow/docs/fulfillment-overview)**: Code that is deployed as a webhook that implements the conversational logic for your Dialogflow agent and communicates with your web app.
- **Web app:** A front-end web app with customized visuals that your Action sends as a response to users during a conversation. You build the web app with web standards like HTML, JavaScript, and CSS.

The conversational Action and web app communicate with each other using the
following:

- **[Interactive Canvas API](https://developers.google.com/assistant/df-asdk/interactivecanvas/reference/interactivecanvas):** A JavaScript API that you include in the web app to enable communication between the web app and your conversational Action.
- **[`HtmlResponse`](https://developers.google.com/assistant/conversational/reference/rest/Shared.Types/AppResponse#htmlresponse)** : A response that contains a URL of the web app and data to pass it. You can use the [Node.js](https://actions-on-google.github.io/actions-on-google-%20%20%20nodejs/2.10.0/classes/_service_actionssdk_conversation_response_html_.htmlresponse.html) or [Java](https://github.com/actions-on-google/actions-on-google-java) client libraries to return an `HtmlResponse`.

To illustrate how Interactive Canvas works, imagine a hypothetical Action
called *Cool Colors* that changes the device screen color to a color the user
specifies. After the user invokes the Action, the flow looks like the following:
![](https://developers.google.com/static/assistant/df-asdk/interactivecanvas/images/overview-diagram-01.png)

1. The user says `Turn the screen blue` to the Assistant device.
2. The Actions on Google platform routes the user's request to Dialogflow to match an intent.
3. The fulfillment for the matched intent runs and an `HtmlResponse` is sent to the device. The device uses the URL to load the web app if it has not yet been loaded.
4. When the web app loads, it registers callbacks with the `interactiveCanvas` API. The `data` object's value is then passed into the registered `onUpdate` callback of the web app. In our example, the fulfillment sends an `HtmlResponse` with a `data` that includes a variable with the value of `blue`.
5. The custom logic for your web app reads the `data` value of the `HtmlResponse` and makes the defined changes. In our example, this turns the screen blue.
6. `interactiveCanvas` sends the callback update to the device.

## Next steps

To learn how to build an Interactive Canvas Action,
see the [Build Overview](https://developers.google.com/assistant/df-asdk/interactivecanvas/build) page.

To see the code for a complete Interactive Canvas Action, see the
[sample](https://github.com/actions-on-google/dialogflow-interactive-canvas-nodejs).