Skip to content

Latest commit

 

History

History
347 lines (242 loc) · 11.6 KB

visual.md

File metadata and controls

347 lines (242 loc) · 11.6 KB
Raw

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.

// @language=javascript

this.$googleAction.displayText(text);

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

// @language=typescript

this.$googleAction!.displayText(text: string);

// 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(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 
// @language=javascript

// Basic
this.$googleAction.showSimpleCard('Title', 'Content');

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

// Advanced
const { GoogleAssistant } = require('jovo-platform-googleassistant');

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

this.$googleAction.showBasicCard(basicCard);

// @language=typescript

// Basic
this.$googleAction!.showSimpleCard('Title', 'Content');

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

// Advanced
import { GoogleAssistant } from 'jovo-platform-googleassistant';

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

this.$googleAction!.showBasicCard(basicCard);

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(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 
// @language=javascript

// Basic
this.$googleAction.showSimpleTable('Table Title', 'Table Subtitle', ['header 1', 'header 2'], [['row 1 item 1', 'row 1 item 2'], ['row 2 item 1', 'row 2 item 2'], ['row 3 item 3', 'row 3 item 2']])

// Advanced
const { GoogleAssistant } = require('jovo-platform-googleassistant');

let tableCard = new GoogleAssistant.Table()
  .setTitle('Jovo')
  .setImage({
      url: 'http://via.placeholder.com/350x150?text=Basic+Card', 
      accessibilityText: 'Jovo Card',
      width: 350,
      height: 150
  })
  .addColumn('header 1','CENTER')
  .addColumn('header 2','LEADING')
  .addColumn('header 3','TRAILING')
  .addRow(['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], false)
  .addRow(['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], true)
  .addRow(['row 3 item 3', 'row 3 item 2', 'row 3 item 3'])
  .addButton('Jovo website', 'https://www.jovo.tech/');

this.$googleAction.showTable(tableCard);

// @language=typescript

// Basic
this.$googleAction!.showSimpleTable('Table Title', 'Table Subtitle', ['header 1', 'header 2'], [['row 1 item 1', 'row 1 item 2'], ['row 2 item 1', 'row 2 item 2'], ['row 3 item 3', 'row 3 item 2']])

// Advanced
import { GoogleAssistant } from 'jovo-platform-googleassistant';

let tableCard = new GoogleAssistant.Table()
  .setTitle('Jovo')
  .setImage({
      url: 'http://via.placeholder.com/350x150?text=Basic+Card', 
      accessibilityText: 'Jovo Card',
      width: 350,
      height: 150
  })
  .addColumn('header 1','CENTER')
  .addColumn('header 2','LEADING')
  .addColumn('header 3','TRAILING')
  .addRow(['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], false)
  .addRow(['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], true)
  .addRow(['row 3 item 3', 'row 3 item 2', 'row 3 item 3'])
  .addButton('Jovo website', 'https://www.jovo.tech/');

this.$googleAction!.showTable(tableCard);

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(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 
// @language=javascript

const { GoogleAssistant } = require('jovo-platform-googleassistant');

let itemOne = new GoogleAction.OptionItem();

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

// @language=typescript

import { GoogleAssistant } from 'jovo-platform-googleassistant';

let itemOne = new GoogleAssistant.OptionItem();

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

Example

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 
// @language=javascript

const { GoogleAssistant } = require('jovo-platform-googleassistant');

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

// Add Items
list.addItem(itemOne);

this.$googleAction.showList(list);

// @language=typescript

impot { GoogleAssistant } from 'jovo-platform-googleassistant';

// Create a list and name it
let list = new GoogleAssistant.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 
// @language=javascript

const { GoogleAssistant } = require('jovo-platform-googleassistant');

let carousel = new GoogleAssistant.Carousel();

carousel.addItem(itemOne);

this.$googleAction.showCarousel(carousel);

// @language=typescript

import { GoogleAssistant } from 'jovo-platform-googleassistant';

let carousel = new GoogleAssistant.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() {
  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
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. 
// @language=javascript

this.$googleAction.showSuggestionChips(['Suggestion 1', 'Suggestion 2', 'Suggestion 3']);

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

// @language=typescript

this.$googleAction!.showSuggestionChips(['Suggestion 1', 'Suggestion 2', 'Suggestion 3']);

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

Official Documentation