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.

Display Text

This will display an alternative text instead of the written speech output on your screen surface, e.g. the Google Assistant mobile phone app.

Official Documentation.

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.

Method Description
setTitle(title) Title of the card
setSubtitle(subtitle) Subtitle of the card
setFormattedText(text) Body text of the card
setImage(imageURL, accessibilityText, width, height) Add an image object to the card
setImageDisplay(option) Choose the display option
addButton(title, url) Add a button at the bottom of the card

Official Documentation

Example

Table Card

Table Cards are used for the display of tabular data. They can be used to display a table of text, images and a button in addition to the speech output.

Method Description
setTitle(title) Title of the card
setSubtitle(subtitle) Subtitle of the card
setImage(imageURL, accessibilityText, width, height) Add an image object to the card
addRow(cellsText, dividerAfter) Add data for a single row
addRows(rowsText) Add data for multiple rows
addColumn(header, horizontalAlignment) Add data for a single column. Choose the horizontal alignment
addColumns(columnHeaders) Add data for multiple columns.
addButton(title, url) Add a button at the bottom of the card

Official Documentation

Example

Option Item

Option Items are cards combined with an OptionInfo, which is used to track the user's choice. They are used with the List and Carousel Selector.

Method Description
setTitle(title) Title of the card
setDescription(text) Body text of the card
setImage(imageURL, accessibilityText, width, height) Add an image object to the card
setKey(key) Unique key to identify the card
addSynonym(synonym) Possible synonyms, which can be used to select the card in dialog

List Selector

The list selector can be used to display a vertical list of selectable items.

Method Description
setTitle(title) Title of the list
addItem(optionItem) Add an Option Item

Official Documentation

Example

The carousel selector can be used to display a horizontal list of selectable items.

Method Description
addItem(optionItem) Add an Option Item

Official Documentation

Example

ON_ELEMENT_SELECTED

After the user selects one of the items in your list or carousel, they will be redirected to the ON_ELEMENT_SELECTED intent, if availabe.

There you can use this.getSelectedElementId() to get the key of the selected item

Example

Suggestion Chips

Use suggestion chips to add possible responses.

Method Description
showSuggestionChips(chips) Add suggestion chips to the response. Only works with ask responses.
showLinkOutSuggestion(name, url) Add a LinkOutSuggestion, which leads to an app or site.

Official Documentation

Comments and Questions

Any specific questions? Just drop them below. Alternatively, you can also fill out this feedback form. Thank you!

Join Our Newsletter

Be the first to get our free tutorials, courses, and other resources for voice app developers.