Visual Output
Learn more about how to build Google Actions with visual output using the Jovo Framework.
Introduction to Visual Output
Visual output is used to describe or enhance the voice interaction.
Simple Response
With Simple Responses, you can provide basic text output in the form of chat bubbles to your users. They consist of visual text output and use SSML or TTS for sound.
Basic Card
Basic Cards are used for the most basic cases of visual output. They can be used to display plain text, images and a button in addition to the speech output.
Example Javascript | Example Typescript
Image Card
Image Cards represent a simpler alternative to Basic Cards, which you can use when you just want to present an image.
Table Card
Table Cards are used for displaying tabular data.
Example Javascript | Example Typescript
Selection
You can use one of the following selection types to let the user choose one out of several options as a response.
List
A List can be used to display a vertical list of selectable items. Lists must contain at least 2 items, but at most 30.
Each list provides an array of list items, containing keys for each item you want to show in your list. To add a list entry, you can utilize type overrides:
Collection
Contrary to Lists, Collections display a horizontal list of selectable items, that allow for richer content to be displayed. Collections must also contain at least 2 items, but only a maximum of 10 items.
Analogous to vertical lists, each collection provides an array of items, containing keys for each item you want to show in your list. To add an entry, you can utilize type overrides:
ON_ELEMENT_SELECTED
After the user selects one of the items in your visual selection, they will be redirected to the ON_ELEMENT_SELECTED intent, if available. There you can use this.getSelectedElementId() to get the key of the selected item:
Suggestion Chips
Use suggestion chips to add possible responses as a hint as to how the user can interact with your Conversational Action next.
Jovo
