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.
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(imageObject) |
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 |
Example Javascript | Example Typescript
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(imageObj) |
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 |
Example Javascript | Example Typescript
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(imageObj) |
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 |
Example Javascript | Example Typescript
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 |
Example Javascript | Example Typescript
Carousel Selector
The carousel selector can be used to display a horizontal list of selectable items.
Method | Description |
---|---|
addItem(optionItem) |
Add an Option Item |
Example Javascript | Example Typescript
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 Javascript | Example Typescript
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. |