A showcase of visual response components in Actions on Google using Dialogflow
Switch branches/tags
Nothing to show
Clone or download


Actions on Google: Dialogflow Conversation Components Sample

A simple sample showing the visual conversation components available with Actions on Google.

Setup Instructions

Choose one of the two options listed below for setup. You only need to complete one of the two options below to setup this sample.

Option 1: Add to Dialogflow (recommended)

Click on the Add to Dialogflow button below and follow the prompts to create a new agent:

Conversation Component

Option 2: Dialogflow restore and Firebase CLI

  1. Use the Actions on Google Console to add a new project with a name of your choosing and click Create Project.
  2. Click Skip, located on the top right.
  3. On the left navigation menu under BUILD, click on Actions. Click on Add Your First Action and choose your app's language(s).
  4. Select Custom intent, click BUILD. This will open a Dialogflow console. Click CREATE.
  5. Click on the gear icon to see the project settings.
  6. Select Export and Import.
  7. Select Restore from zip. Follow the directions to restore from the agent.zip file in this repo.
  8. Deploy the fulfillment webhook provided in the functions folder using Google Cloud Functions for Firebase:
    1. Create a Firebase project in the Firebase Console if you don't have one already.
    2. Follow the instructions to set up and initialize Firebase SDK for Cloud Functions. Make sure to reply "N" when asked to overwrite existing files by the Firebase CLI. 1.Run firebase deploy --only functions and take note of the endpoint where the fulfillment webhook has been published. It should look like Function URL (conversationComponent): https://us-central1-YOUR_PROJECT.cloudfunctions.net/conversationComponent
  9. Go back to the Dialogflow console and select Fulfillment from the left navigation menu. Enable Webhook, set the value of URL to the Function URL from the previous step, then click Save.

Test on the Actions on Google simulator

  1. Select Integrations from the left navigation menu and open the Settings menu for Actions on Google.
  2. Enable Auto-preview changes and Click Test. This will open the Actions on Google simulator.
  3. Type Talk to my test app in the simulator, or say OK Google, talk to my test app to any Actions on Google enabled device signed into your developer account.

For more detailed information on deployment, see the documentation.

References and How to report bugs

How to make contributions?

Please read and follow the steps in the CONTRIBUTING.md.




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.


Actions on Google Developers Community on Google+ https://g.co/actionsdev.