While developing an app for the Google Assistant, most of the time you’re focusing on a good conversation flow. Having a good conversation flow, allows your users to use your app without any visual feedback needed.

Last year, Google started bringing the Google Nest Hub to the market. The Google Nest Hub is a Google Assistant with a touch screen. The screen is able to display images, text or other information, which can enrich the answers for your users!

Support the Google Nest Hub

If you created a Google Assistant app in the past, your app will work as expected on the Google Nest Hub. To enrich your app with visual feedback is easy and only cost a few minutes of extra time.

Open DialogFlow and edit the intent you want to enrich with visual feedback. From there, go to the responses tab and press the button ‘Add responses’. Now you get the option which visual feedback you want to display to your user. You can choose from a lot of different options, like a basic card, a list or a carousel.

Visual responses for the Google Nest Hub
Options to implement rich responses for your Google Assistant app

When done, save the intent and deploy your new app. Test your app with the simulator or a real Google Nest Hub and submit it for a review by Google!

Add support using code

If your app is returning a response using a webhook call, you have to implement the visual feedback in code. Luckily for us, this is also easy to implement!

Go to your node.js file off the webhook and add a card to the view using the code below.

Example code for adding a card to the response of the agent:

agent.add(
 new Card({
  title: 'Zonneveld.dev title',
  imageUrl: 'https://zonneveld.dev/wp-content/uploads/2019/07/cropped-nest-hub.jpg',
  text: 'This is the response text',
  buttonText: 'Read article',
  buttonUrl: 'https://zonneveld.dev/get-your-google-assistant-app-ready-for-the-google-nest-hub'
 })
);

Above example is adding a card view to the response of your Google Assistant app. The card response that is added to the agent, is an additional response, which is not displayed on Google Assistant devices that doesn’t have a screen.

The card contains a title, image, text and action button. The button fields are optional. If you keep them clear, the action button won’t be visible.

Other visual response options are listed on the Google Developer information page.

Conclusion

DialogFlow made it easy to add a visual response to your Google Assistant app. There are a lot of different visual responses, so you’re able to select the response which fits the best for your response.

Don’t forget that not all your users will have a screen connected to the assistant, which means you always have to focus on a dialog flow which can be used without a screen. Use the visual response as additional feedback!

Visual feedback is not only visible for Google Nest Hub users, but also for users that use your Assistant app on mobile phones!

🚀 Like this article? Follow me on Twitter for more Google Assistant related news!