Stay organized with collectionsSave and categorize content based on your preferences.
You define the conversation for your Action withfulfillment,
which is code deployed as a webhook that contains your Dialogflow agent's
conversational logic. Fulfillment tells your Action what to do when users make
requests.
For Interactive Canvas, your fulfillment also communicates information about your
web app to the Assistant. You can use anHtmlResponseto tell the Assistant to
render your web app. AnHtmlResponsecan also provide updates todata, which
your web app custom logic uses to make changes to your web app.
This page goes over how to useHtmlResponsein your fulfillment and general
guidelines for using this response type.
HTML responses
To relay information about your web app to the Assistant, you must include anHtmlResponsein your intent-specific fulfillment. AnHtmlResponsecan contain the URL
of the web app and data that updates the web app. When you send
anHtmlResponse, the following steps occur:
The fulfillment of the matched intent sends anHtmlResponseto the device.
The device uses the URL in theHtmlResponseto load the web app.
ThedataJSON payload is passed to the web app in a callback.
Your conversational Action sends a newHtmlResponseto send updates or
load new states.
Sample fulfillment
The following excerpt from thesamplefulfillment code shows how to implementHtmlResponse:
constfunctions=require('firebase-functions');const{dialogflow,HtmlResponse}=require('actions-on-google');constapp=dialogflow({debug:true});app.intent('welcome',(conv)=>{conv.ask('Welcome! Do you want me to change color or pause spinning?');conv.ask(newHtmlResponse({url:'https://your-web-app.com',}));});//mapofhumanspeakablecolorstocolorvaluesconsttints={red:0xFF0000,green:0x00FF00,blue:0x0000FF,};app.intent('color',(conv,{color})=>{if(colorintints){conv.ask(`Ok,Ichangedmycolorto${color}.Whatelse?`);conv.ask(newHtmlResponse({data:{tint:tints[color],},}));return;}conv.ask(`Sorry,Idon't know that color. What else?`);conv.ask(new HtmlResponse({data: {query: conv.query,},}));});app.intent('start', (conv) => {conv.ask(`Ok, I'mspinning.Whatelse?`);conv.ask(newHtmlResponse({data:{spin:true,},}));});app.intent('pause',(conv)=>{conv.ask(`Ok,Ipausedspinning.Whatelse?`);conv.ask(newHtmlResponse({data:{spin:false,},}));});app.intent('restart game',(conv)=>{conv.ask(newHtmlResponse({data:{command:'RESTART_GAME',},}));});exports.conversation=functions.https.onRequest(app);
welcomeintent
In the snippet above, the fulfillment for thewelcomeintent sends anHtmlResponsewith the URL for the web app. The Assistant receives this
and loads the HTML and JavaScript at that address.
TheHtmlResponsein the fulfillment for other intents passes variable values
(tintorspinin the sample) to the web app. The custom logic for the web
app uses these values to update elements (animations, color, etc):
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-09-18 UTC."],[[["\u003cp\u003eInteractive Canvas uses fulfillment to define conversational logic and communicate with your web app via \u003ccode\u003eHtmlResponse\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003eHtmlResponse\u003c/code\u003e enables the Assistant to render your web app and send updates using a \u003ccode\u003edata\u003c/code\u003e payload.\u003c/p\u003e\n"],["\u003cp\u003eEach intent's fulfillment must include an \u003ccode\u003eHtmlResponse\u003c/code\u003e to keep the web app open, with the initial response containing the web app's URL.\u003c/p\u003e\n"],["\u003cp\u003eYou can update the web app's content by sending new \u003ccode\u003eHtmlResponse\u003c/code\u003e objects with modified data in subsequent turns.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003eHtmlResponse\u003c/code\u003e size should not exceed 50kb, and the \u003ccode\u003eactions.capability.INTERACTIVE_CANVAS\u003c/code\u003e capability is required for device compatibility.\u003c/p\u003e\n"]]],["Fulfillment uses `HtmlResponse` to communicate with a web app in Interactive Canvas. It sends the web app's URL and data updates to the Assistant. Upon receiving `HtmlResponse`, the device loads the web app via the URL, and data updates are passed to the web app. Each intent fulfillment must include an `HtmlResponse`. Subsequent `HtmlResponse` can update the web app state by changing data, with URL changes causing a reload. The first intent, usually welcome intent should include the url, and subsequent ones just the data. `HtmlResponse` size must be 50kb or less.\n"],null,["# Build your conversational Action (Dialogflow)\n\nYou define the conversation for your Action with [fulfillment](/assistant/actions/dialogflow/fulfillment),\nwhich is code deployed as a webhook that contains your Dialogflow agent's\nconversational logic. Fulfillment tells your Action what to do when users make\nrequests.\n\nFor Interactive Canvas, your fulfillment also communicates information about your\nweb app to the Assistant. You can use an `HtmlResponse` to tell the Assistant to\nrender your web app. An `HtmlResponse` can also provide updates to `data`, which\nyour web app custom logic uses to make changes to your web app.\n\nThis page goes over how to use `HtmlResponse` in your fulfillment and general\nguidelines for using this response type.\n| **Note:** To ensure the user's device can support an `HtmlResponse`, make sure the [capability](/assistant/df-asdk/surface-capabilities) `actions.capability.INTERACTIVE_CANVAS` is available. If not, use a [rich response](/assistant/df-asdk/rich-responses) instead.\n\nHTML responses\n--------------\n\nTo relay information about your web app to the Assistant, you must include an\n[`HtmlResponse`](https://actions-on-google.github.io/actions-on-google-nodejs/2.10.0/classes/_service_actionssdk_conversation_response_html_.htmlresponse.html)\nin your intent-specific fulfillment. An `HtmlResponse` can contain the URL\nof the web app and data that updates the web app. When you send\nan `HtmlResponse`, the following steps occur:\n\n1. The fulfillment of the matched intent sends an `HtmlResponse` to the device.\n2. The device uses the URL in the `HtmlResponse` to load the web app.\n3. The `data` JSON payload is passed to the web app in a callback.\n4. Your conversational Action sends a new `HtmlResponse` to send updates or\n load new states.\n\n | **Note:** If the value for the `url` field changes in subsequent fulfillment responses, the web app reloads. If the same value for `url` is provided or if `url` is excluded as part of a subsequent response, the existing web app is kept on the device.\n\n### Sample fulfillment\n\nThe following excerpt from the [sample](https://github.com/actions-on-google/dialogflow-interactive-canvas-nodejs)\nfulfillment code shows how to implement `HtmlResponse`: \n\n const functions = require('firebase-functions');\n const {dialogflow, HtmlResponse} = require('actions-on-google');\n\n const app = dialogflow({debug: true});\n app.intent('welcome', (conv) =\u003e {\n conv.ask('Welcome! Do you want me to change color or pause spinning?');\n conv.ask(new HtmlResponse({\n url: 'https://your-web-app.com',\n }));\n });\n\n // map of human speakable colors to color values\n const tints = {\n red: 0xFF0000,\n green: 0x00FF00,\n blue: 0x0000FF,\n };\n app.intent('color', (conv, {color}) =\u003e {\n if (color in tints) {\n conv.ask(`Ok, I changed my color to ${color}. What else?`);\n conv.ask(new HtmlResponse({\n data: {\n tint: tints[color],\n },\n }));\n return;\n }\n conv.ask(`Sorry, I don't know that color. What else?`);\n conv.ask(new HtmlResponse({\n data: {\n query: conv.query,\n },\n }));\n });\n app.intent('start', (conv) =\u003e {\n conv.ask(`Ok, I'm spinning. What else?`);\n conv.ask(new HtmlResponse({\n data: {\n spin: true,\n },\n }));\n });\n\n app.intent('pause', (conv) =\u003e {\n conv.ask(`Ok, I paused spinning. What else?`);\n conv.ask(new HtmlResponse({\n data: {\n spin: false,\n },\n }));\n });\n\n app.intent('restart game', (conv) =\u003e {\n conv.ask(new HtmlResponse({\n data: {\n command: 'RESTART_GAME',\n },\n }));\n });\n\n exports.conversation = functions.https.onRequest(app);\n\n### `welcome` intent\n\nIn the snippet above, the fulfillment for the `welcome` intent sends an\n`HtmlResponse` with the URL for the web app. The Assistant receives this\nand loads the HTML and JavaScript at that address. \n\n ...\n app.intent('welcome', (conv) =\u003e {\n conv.ask('Welcome! Do you want me to change color or pause spinning?');\n conv.ask(new HtmlResponse({\n url: 'https://your-web-app.com',\n }));\n });\n ...\n\n### Other intents\n\nThe `HtmlResponse` in the fulfillment for other intents passes variable values\n(`tint` or `spin` in the sample) to the web app. The custom logic for the web\napp uses these values to update elements (animations, color, etc): \n\n ...\n app.intent('start', (conv) =\u003e {\n conv.ask(`Ok, I'm spinning. What else?`);\n conv.ask(new HtmlResponse({\n data: {\n spin: true,\n },\n }));\n });\n ...\n\n### Guidelines and restrictions\n\nKeep the following guidelines and restrictions for `HtmlResponse` in mind\nwhen building your fulfillment:\n\n- Each intent in your fulfillment must include an `HtmlResponse`. If an intent does not include an `HtmlResponse`, your web app closes.\n- You only need to include your web app URL in the first intent you send to the user (this is normally the `Welcome` intent).\n- `HtmlResponse` must be 50kb or smaller in size."]]
