Developing an Action that uses Interactive Canvas follows the same general steps for building a conversational Action. Once you create your Actions project, Dialogflow agent, fulfillment, and web app, you define the communication between your Action and canvas.

Here are the development steps:

  • Setup - You'll set up the various tools and platforms for developing an Action that uses Interactive Canvas.

    • Firebase Functions and Hosting - You'll set up and initialize Firebase for your webhook and hosting your web app.
    • Create an Actions project - This project contains the metadata required to configure, manage, and publish your Action.
    • Create the Dialogflow agent - You'll use Dialogflow to build the conversational interface to control your canvas response.
  • Build your Action - Define the webhook logic for the intents in your Action that include ImmersiveResponse.

  • Build your web app - Use existing web technologies to create the visual experience you'll deliver to users and write the client-side custom logic for your web app that utilizes the assistantCanvas API.

  • Deploy your fulfillment - Use the Firebase CLI to deploy your fulfillment code.

  • Test your Action - Learn how to use the simulator to test your Action.