Google Assistant (Dialogflow)

Integration published by Jovo | 10,030 downloads

Build apps for Google's Assistant platform using Dialogflow

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(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

Official Documentation

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

Official Documentation.

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

Official Documentation

Example Javascript | Example Typescript

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 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.

Official Documentation

Example Javascript | Example Typescript

Google Assistant Changelog

Current version might be higher than the latest changes displayed below because of updates of dependencies.

2021-07-07 [3.5.4]
  • #948 ✨ Add enableFullScreen and continueTtsDuringTouch (@aswetlow)

2021-02-22 [3.5]

  • #901 Move setResponse from response to after.response middleware (@aswetlow)
2020-11-20 [3.2.3]
2020-11-05 [3.2.1]
  • Fix Transaction API v2/v3 incomptibility

🐛 Bug Fix

  • #716 Corrected logic for retrieving project-ids in staged environments (@m-ripper)

Committers: 3

3.0.11 (2020-04-06)

  • Updated Typescript to 3.8.x
  • Updated Prettier to 2.x

Committers: 2

2.x

Find the 2.x changelog here.

Join Our Newsletter

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