Skip to content
A sample that demonstrates how to create an Interactive Canvas experience using Actions on Google for the Google Assistant.
JavaScript HTML CSS
Branch: master
Clone or download
taycaldwell Add PLAY_GAME built-in intent
Bug: 144032528
Bug: 143544239
Change-Id: Ibc6ce44c881473ac824c57716fe17b6dcbf2e053
Latest commit 06566ba Nov 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
agent
functions Incorporate sendTextQuery by 'Restart Game' button Oct 10, 2019
public Incorporate sendTextQuery by 'Restart Game' button Oct 10, 2019
.eslintrc.json Initial commit of the immersive canvas sample May 1, 2019
.gitignore
CONTRIBUTING.md
LICENSE Initial commit of the immersive canvas sample May 1, 2019
README.md Add PLAY_GAME built-in intent Nov 6, 2019
agent.zip Add PLAY_GAME built-in intent Nov 6, 2019
firebase.json

README.md

Actions on Google: Interactive Canvas Sample

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

Setup Instructions

Prerequisites

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

Configuration

Actions Console

  1. From the Actions on Google Console, add a new project > Create Project > under More options > Conversational
  2. Click Deploy in the top menu. Then, click Additional information.
    1. Under Category, select Games & fun
    2. Under Interactive Canvas Do your Actions use Interactive Canvas?, check Yes
  3. Click Develop in the top menu. Then, click Actions > Add Your First Action > Custom intent > BUILD (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 agent.zip in this sample's directory.

Firebase Deployment

  1. On your local machine, in the functions directory, run npm install
  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.
    https://${REGION}-${PROJECT_ID}.cloudfunctions.net/dialogflowFirebaseFulfillment
    
  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 CONTRIBUTING.md.

License

See LICENSE.

Terms

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.