{ "componentChunkName": "component---src-templates-doc-page-js", "path": "/docs/en/channels/google_assistant/interactive_canvas/", "result": {"data":{"site":{"siteMetadata":{"title":"Gatsby-doc-engine"}},"markdownRemark":{"id":"33aeb585-00d5-5aa9-b4cc-15a151de2896","excerpt":"Interactive Canvas?> Interactive Canvas is a framework based on Google Assistant that can be used to complement a voice skill with a visual component. This…","html":"

Interactive Canvas

\n
\n

Interactive Canvas is a framework based on Google Assistant that can be used to complement a voice skill with a visual component.

\n

This visual component is a web application the voice Google Assistant accesses during a conversation with a client.

\n

Google terms currently allow publishing gaming skills created using the Interactive Canvas. Such skills must also be validated by the Google reviewer team.

\n
\n

Devices

\n

Interactive Canvas skills are available on:

\n\n

When an Interactive Canvas skill is started on a device without a screen, it will function correctly without the visual part.

\n
\n

Skill operation

\n

A skill used by Interactive Canvas consists of two main components:

\n\n
\n

Connecting a web application

\n

Specify the link to the web application in the Web app URL field in order to connect it when you create a Google Assistant channel.

\n
\n

The script

\n

Use $response.replies with the htmlResponse type to output the visual component of a skill.

\n

For example:

\n
    script:\n        var videolink = getLink(\"main_scene.mp4\");\n        var poster = getLink(\"main_menu.gif\");\n        $response.replies = $response.replies || []\n        $response.replies.push({\n                \"type\":\"htmlResponse\",\n                \"updatedState\": {\n                    \"command\": \"UPDATE_STATE\",\n                    \"video\": videolink,\n                    \"poster\": poster,\n                    \"buttons\": [{\n                        title: \"Skip\"\n                    }]\n                }\n            });
","frontmatter":{"title":"","description":null},"headings":[{"value":"Interactive Canvas"}]}},"pageContext":{"slug":"/docs/en/channels/google_assistant/interactive_canvas/","previous":{"fields":{"slug":"/docs/en/channels/google_assistant/jaicf/"},"frontmatter":{"title":"","description":null}},"next":{"fields":{"slug":"/docs/en/channels/google_assistant/google_assistant/"},"frontmatter":{"title":"","description":null}}}}, "staticQueryHashes": ["1209419333"]}