Skip to content
A sample that demonstrates how to create an Interactive Canvas experience using Actions on Google for the Google Assistant.
Branch: master
Clone or download
Canain Update README with links to documentation
Fix typo in index.js

Change-Id: Icee707e81dad90e4dbf91f57b28486d8aa349ee6
Latest commit 7d1664d May 6, 2019

Actions on Google: Interactive Canvas Sample

This sample demonstrates how to create an Interactive Canvas experience using Actions on Google for the Google Assistant -- using the Node.js client library and deployed on Cloud Functions for Firebase and Firebase Hosting.

Setup Instructions


  1. Node.js and NPM
  2. Install the Firebase CLI
    • We recommend using MAJOR version 6 with 6.5.0 or above, npm install -g firebase-tools@^6.5.0
    • Run firebase login with your Google account


Actions Console

  1. From the Actions on Google Console, add a new project > Create Project > under More options > Conversational
  2. In the Deploy navigation section, click Directory information
    1. Under Category, select Games & fun
    2. Under Immersive Canvas Do your Actions use Immersive Canvas?, check Yes
  3. From the left navigation menu under Build > Actions > Add Your First Action > Play game > GET STARTED IN DIALOGFLOW (this will bring you to the Dialogflow console) > Select language and time zone > CREATE.
  4. In the Dialogflow console, go to Settings ⚙ > Export and Import > Restore from zip using the in this sample's directory.

Firebase Deployment

  1. On your local machine, in the functions directory, run npm install
    1. Note that when creating a new project for Interactive Canvas, you must install the actions-on-google library Developer Preview version using the @preview tag with npm install actions-on-google@preview.
  2. Run firebase deploy --project {PROJECT_ID} to deploy the function and hosting
    • To find your Project ID: In Dialogflow console under Settings ⚙ > General tab > Project ID.

Dialogflow Console

  1. Return to the Dialogflow Console > select Fulfillment > Enable Webhook > Set URL to the Function URL that was returned after the deploy command > SAVE.
    Function URL (dialogflowFirebaseFulfillment): https://${REGION}-${PROJECT_ID}
  2. From the left navigation menu, click Integrations > Integration Settings under Google Assistant > Enable Auto-preview changes > Test to open the Actions on Google simulator then say or type Talk to my test app.

Running this Sample

  • You can test your Action on any Google Assistant-enabled device on which the Assistant is signed into the same account used to create this project. Just say or type, “OK Google, talk to my test app”.
  • You can also use the Actions on Google Console simulator to test most features and preview on-device behavior.
  • To hide the debug overlay, uncomment the code below /* Uncomment below to disable the debug overlay */ in public/css/main.css.

References & Issues

Make Contributions

Please read and follow the steps in the




Your use of this sample is subject to, and by using or downloading the sample files you agree to comply with, the Google APIs Terms of Service.

You can’t perform that action at this time.