Skip to content

Latest commit

 

History

History
171 lines (120 loc) · 6.11 KB

visual.md

File metadata and controls

171 lines (120 loc) · 6.11 KB

Platform Specific Features > Google Assistant > 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.

this.googleAction().displayText(text);

// Example
let speech = 'Hello World!';
let text = 'Hello Phone!';
this.googleAction().displayText(text)
    .tell(speech);

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 
// Basic
this.googleAction().showSimpleCard('Title', 'Content');

this.googleAction().showImageCard('Title', 'Content', 'imageURL');

// Advanced
const {GoogleAction} = require('jovo-framework');

let basicCard = new GoogleAction.BasicCard()
  .setTitle('Jovo')
  .setFormattedText('Welcome to the documentation of the Jovo framework')
  .setImage('http://via.placeholder.com/350x150?text=Basic+Card', 'Jovo Card', '350', '150')
  .setImageDisplay('WHITE') 
  .addButton('Jovo website', 'https://www.jovo.tech/');

this.googleAction().showBasicCard(basicCard);

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 
const {GoogleAction} = require('jovo-framework');

let itemOne = new GoogleAction.OptionItem();

itemOne
  .setTitle('Option 1')
  .setDescription('Description of option 1')
  .setKey('OptionOne');
  .addSynonym('Option One');

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 
const {GoogleAction} = require('jovo-framework');

// Create a list and name it
let list = new GoogleAction.List();
list.setTitle('Title');

// Add Items
list.addItem(itemOne);

this.googleAction().showList(list);

Official Documentation

Example

Carousel Selector

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

Method Description
addItem(optionItem) Add an Option Item 
const {GoogleAction} = require('jovo-framework');

let carousel = new GoogleAction.Carousel();

carousel.addItem(itemOne);

this.googleAction().showCarousel(carousel);

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

'ON_ELEMENT_SELECTED': function() {
  let selectedElement = this.getSelectedElementId();
  if (selectedElement === 'ItemOneKey') {
    this.tell('You chose item one');
  }
},

Example

Suggestion Chips

Use suggestion chips to add possible responses.

Method Description
addSuggestionChips(chips) Add suggestion chips to the response. Only works with ask responses.
addLinkOutSuggestion(name, url) Add a LinkOutSuggestion, which leads to an app or site. 
this.googleAction().showSuggestionChips(['Suggestion 1', 'Suggestion 2', 'Suggestion 3']);

this.googleAction().showLinkOutSuggestion('Jovo', 'https://www.jovo.tech/');

Official Documentation