Esplora in Dialogflow
Fai clic su Continua per importare l'esempio delle risposte in Dialogflow. Quindi, segui questi passaggi per eseguire il deployment e testare l'esempio:
- Inserisci un nome di agente e crea un nuovo agente Dialogflow per l'esempio.
- Al termine dell'importazione, fai clic su Vai all'agente.
- Nel menu di navigazione principale, vai a Fulfillment.
- Attiva l'editor incorporato e fai clic su Esegui il deployment. L'editor contiene il codice campione.
- Nel menu di navigazione principale, vai a Integrazioni e fai clic su Assistente Google.
- Nella finestra modale visualizzata, attiva Anteprima automatica delle modifiche e fai clic su Test per aprire il simulatore di Actions.
- Nel simulatore, inserisci
Talk to my test appper testare l'esempio.
Utilizza una risposta avanzata se vuoi visualizzare elementi visivi per migliorare le interazioni degli utenti con la tua azione. Questi elementi visivi possono fornire suggerimenti su come proseguire una conversazione.
Le risposte avanzate possono essere visualizzate in modalità solo schermo o audio e a schermo. Possono contenere i seguenti componenti:
- Una o due risposte semplici (bolle della chat).
- Una scheda di base facoltativa.
- Chip di suggerimento facoltativi.
- Un chip di collegamento facoltativo.
Puoi anche consultare le nostre linee guida per la progettazione delle conversazioni per scoprire come incorporare questi elementi visivi nell'azione.
Proprietà
Le risposte avanzate hanno i seguenti requisiti e proprietà facoltative che puoi configurare:
- Supportato sulle piattaforme con la funzionalità di
actions.capability.SCREEN_OUTPUT. - Il primo elemento di una risposta avanzata deve essere una risposta semplice.
- Massimo due risposte semplici.
- Massimo una carta di base o
StructuredResponse. - Al massimo 8 chip di suggerimento.
- I chip di suggerimento non sono consentiti in una
FinalResponse - Al momento il collegamento al Web da smart display non è supportato.
Le seguenti sezioni mostrano come creare diversi tipi di risposte avanzate.
Carta di base
Una scheda di base mostra informazioni che possono includere:
- Immagine
- Titolo
- Sottotitolo
- Corpo del testo
- Pulsante Collega
- Border
Utilizza le schede di base principalmente a scopo di visualizzazione. Sono concisi per presentare agli utenti informazioni chiave (o di riepilogo) e per consentire agli utenti di saperne di più se lo desiderano (utilizzando un link web).
Nella maggior parte dei casi, devi aggiungere dei chip di suggerimento sotto le schede per continuare o avviare la conversazione.
Evita di ripetere a tutti i costi le informazioni presentate nella scheda all'interno del fumetto della chat.
Proprietà
Il tipo di risposta della scheda di base ha i seguenti requisiti e proprietà facoltative che puoi configurare:
- Supportato sulle piattaforme con la funzionalità di
actions.capability.SCREEN_OUTPUT. - Testo formattato (obbligatorio se non ci sono immagini)
- Testo normale per impostazione predefinita.
- Non deve contenere un link.
- Limite di 10 righe con un'immagine, limite di 15 righe senza immagine. Sono circa 500 (con immagine) o 750 (senza immagine). I telefoni con schermi più piccoli troncano anche il testo prima rispetto agli schermi di grandi dimensioni. Se il testo contiene troppe righe, viene troncato all'ultima interruzione di parola con puntini di sospensione.
- È supportato un sottoinsieme limitato di markdown:
- Nuova riga con doppio spazio seguita da \n
**bold***italics*
- Immagine (obbligatorio se il testo non è formattato)
- Tutte le immagini devono essere alte 192 dp.
- Se le proporzioni dell'immagine sono diverse da quelle dello schermo, l'immagine viene centrata con barre grigie sui bordi verticali o orizzontali.
- L'origine dell'immagine è un URL.
- Sono consentite le GIF in movimento.
Facoltativo
- Titolo
- Testo normale.
- Carattere e dimensioni fissi.
- Massimo una riga, perché i caratteri aggiuntivi vengono troncati.
- L'altezza della scheda si comprime se non viene specificato alcun titolo.
- Sottotitolo
- Testo normale.
- Carattere e dimensioni del carattere fissi.
- Massimo una riga, perché i caratteri aggiuntivi vengono troncati.
- L'altezza della scheda si comprime se non è specificato alcun sottotitolo.
- Pulsante Link
- Il titolo del link è obbligatorio
- Massimo un link
- I link a siti esterni al dominio dello sviluppatore sono consentiti.
- Il testo del link non può essere fuorviante. Questa opzione viene selezionata durante la procedura di approvazione.
- Una scheda di base non ha funzionalità di interazione senza un link. Se tocca il link, l'utente viene indirizzato al link, mentre il corpo principale della scheda rimane inattivo.
- Bordo
- Il bordo tra la scheda e il contenitore dell'immagine può essere regolato per personalizzare la presentazione della tua scheda di base.
- Configurato impostando la proprietà della stringa JSON
imageDisplayOptions
Codice campione
Node.js
app.intent('Basic Card', (conv) => {
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask(`Here's an example of a basic card.`);
conv.ask(new BasicCard({
text: `This is a basic card. Text in a basic card can include "quotes" and
most other unicode characters including emojis. Basic cards also support
some markdown formatting like *emphasis* or _italics_, **strong** or
__bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
things like line \nbreaks`, // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
subtitle: 'This is a subtitle',
title: 'Title: this is a title',
buttons: new Button({
title: 'This is a button',
url: 'https://assistant.google.com/',
}),
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
display: 'CROPPED',
}));
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("Basic Card")
public ActionResponse basicCard(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
// Prepare formatted text for card
String text =
"This is a basic card. Text in a basic card can include \"quotes\" and\n"
+ " most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n"
+ " some markdown formatting like *emphasis* or _italics_, **strong** or\n"
+ " __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n"
+ " things like line \\nbreaks"; // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
responseBuilder
.add("Here's an example of a basic card.")
.add(
new BasicCard()
.setTitle("Title: this is a title")
.setSubtitle("This is a subtitle")
.setFormattedText(text)
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setImageDisplayOptions("CROPPED")
.setButtons(
new ArrayList<Button>(
Arrays.asList(
new Button()
.setTitle("This is a Button")
.setOpenUrlAction(
new OpenUrlAction().setUrl("https://assistant.google.com"))))))
.add("Which response would you like to see next?");
return responseBuilder.build();
}
Node.js
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask(`Here's an example of a basic card.`);
conv.ask(new BasicCard({
text: `This is a basic card. Text in a basic card can include "quotes" and
most other unicode characters including emojis. Basic cards also support
some markdown formatting like *emphasis* or _italics_, **strong** or
__bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
things like line \nbreaks`, // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
subtitle: 'This is a subtitle',
title: 'Title: this is a title',
buttons: new Button({
title: 'This is a button',
url: 'https://assistant.google.com/',
}),
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
display: 'CROPPED',
}));
conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
// Prepare formatted text for card
String text =
"This is a basic card. Text in a basic card can include \"quotes\" and\n"
+ " most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n"
+ " some markdown formatting like *emphasis* or _italics_, **strong** or\n"
+ " __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n"
+ " things like line \\nbreaks"; // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
responseBuilder
.add("Here's an example of a basic card.")
.add(
new BasicCard()
.setTitle("Title: this is a title")
.setSubtitle("This is a subtitle")
.setFormattedText(text)
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setImageDisplayOptions("CROPPED")
.setButtons(
new ArrayList<Button>(
Arrays.asList(
new Button()
.setTitle("This is a Button")
.setOpenUrlAction(
new OpenUrlAction().setUrl("https://assistant.google.com"))))))
.add("Which response would you like to see next?");
return responseBuilder.build();
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "Here's an example of a basic card."
}
},
{
"basicCard": {
"title": "Title: this is a title",
"subtitle": "This is a subtitle",
"formattedText": "This is a basic card. Text in a basic card can include \"quotes\" and\n most other unicode characters including emojis. Basic cards also support\n some markdown formatting like *emphasis* or _italics_, **strong** or\n __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n things like line \nbreaks",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Image alternate text"
},
"buttons": [
{
"title": "This is a button",
"openUrlAction": {
"url": "https://assistant.google.com/"
}
}
],
"imageDisplayOptions": "CROPPED"
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
}
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
],
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "Here's an example of a basic card."
}
},
{
"basicCard": {
"title": "Title: this is a title",
"subtitle": "This is a subtitle",
"formattedText": "This is a basic card. Text in a basic card can include \"quotes\" and\n most other unicode characters including emojis. Basic cards also support\n some markdown formatting like *emphasis* or _italics_, **strong** or\n __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n things like line \nbreaks",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Image alternate text"
},
"buttons": [
{
"title": "This is a button",
"openUrlAction": {
"url": "https://assistant.google.com/"
}
}
],
"imageDisplayOptions": "CROPPED"
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
]
}
Carosello di navigazione
Un carosello di navigazione è una risposta efficace che consente agli utenti di scorrere verticale e selezionare un riquadro di una raccolta. I caroselli di navigazione sono progettati specificamente per i contenuti web aprendo il riquadro selezionato in un browser web (o in un browser AMP se tutti i riquadri sono abilitati per AMP). Il carosello di navigazione persiste anche sulla superficie dell'assistente per navigare in un secondo momento.
Proprietà
Il tipo di risposta del carosello di navigazione ha i seguenti requisiti e proprietà facoltative che puoi configurare:
- Supportato sulle piattaforme che hanno le funzionalità
actions.capability.SCREEN_OUTPUTeactions.capability.WEB_BROWSER. Questo tipo di risposta non è attualmente disponibile sugli smart display. - Carosello di navigazione
- Massimo 10 riquadri.
- Almeno due riquadri.
- I riquadri del carosello devono contenere tutti link a contenuti web (contenuti AMP consigliati).
- Affinché l'utente venga indirizzato a un visualizzatore AMP,
urlHintTypenei riquadri dei contenuti AMP deve essere impostato su "AMP_CONTENT".
- Affinché l'utente venga indirizzato a un visualizzatore AMP,
- Sfogliare i riquadri del carosello
- Coerenza delle schede (obbligatorio):
- Tutti i riquadri di un carosello di navigazione devono avere gli stessi componenti. Ad esempio, se un riquadro contiene un campo immagine, anche i riquadri del carosello devono contenere campi immagine.
- Se tutti i riquadri del carosello di navigazione rimandano a contenuti compatibili con AMP, l'utente viene indirizzato a un browser AMP con funzionalità aggiuntive. Se un riquadro rimanda a contenuti non AMP, tutti i riquadri indirizzano gli utenti a un browser web.
- Immagine (facoltativo)
- L'immagine deve essere alta 128 dp x 232 dp.
- Se le proporzioni dell'immagine non corrispondono al riquadro di delimitazione dell'immagine, l'immagine viene centrata con barre su entrambi i lati. Su smartphone, l'immagine è centrata su una piazza con angoli arrotondati.
- Se il link immagine non funziona, viene utilizzata un'immagine segnaposto.
- Il testo alternativo è obbligatorio per un'immagine.
- Titolo (obbligatorio)
- Stesse opzioni di formattazione della scheda di testo di base.
- I titoli devono essere univoci (per supportare la selezione vocale).
- Massimo due righe di testo.
- Dimensione carattere 16 sp.
- Descrizione (facoltativo)
- Stesse opzioni di formattazione della scheda di testo di base.
- Massimo quattro righe di testo.
- Troncata con i puntini di sospensione (...)
- Dimensione carattere 14 sp, colore grigio.
- Piè di pagina (facoltativo)
- Carattere e dimensioni del carattere fissi.
- Massimo una riga di testo.
- Troncata con i puntini di sospensione (...)
- Ancorato in basso, i riquadri con meno righe di testo potrebbero contenere spazi bianchi sopra il testo secondario.
- Dimensione carattere 14 sp, colore grigio.
- Coerenza delle schede (obbligatorio):
- Interazione
- L'utente può scorrere la pagina in verticale per visualizzare gli elementi.
- Tocca la scheda: toccando un elemento, l'utente viene indirizzato a un browser, dove è visualizzata la pagina collegata.
- Input vocale
- Comportamento del microfono
- Il microfono non si riapre quando un carosello di navigazione viene inviato all'utente.
- L'utente può comunque toccare il microfono o richiamare l'assistente ("Hey Google") per riattivarlo.
- Comportamento del microfono
Consulenza
Per impostazione predefinita, il microfono rimane chiuso dopo l'invio di un carosello di navigazione. Se vuoi continuare la conversazione, ti consigliamo vivamente di aggiungere dei chip di suggerimento sotto il carosello.
Non ripetere mai le opzioni presentate nell'elenco come chip di suggerimento. I chip in questo contesto vengono utilizzati per cambiare la rotta della conversazione (non per effettuare una selezione).
Come per gli elenchi, il fumetto della chat che accompagna la scheda carosello è un sottoinsieme dell'audio (TTS/SSML). L'audio (TTS/SSML) integra il primo riquadro nel carosello e sconsiglia vivamente di leggere tutti gli elementi del carosello. È meglio menzionare il primo articolo e il motivo per cui è presente (ad esempio, il più popolare, l'acquisto più recente, il più discusso).
Codice campione
Node.js
app.intent('Browsing Carousel', (conv) => {
if (!conv.screen
|| !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) {
conv.ask('Sorry, try this on a phone or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask(`Here's an example of a browsing carousel.`);
conv.ask(new BrowseCarousel({
items: [
new BrowseCarouselItem({
title: 'Title of item 1',
url: 'https://example.com',
description: 'Description of item 1',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
footer: 'Item 1 footer',
}),
new BrowseCarouselItem({
title: 'Title of item 2',
url: 'https://example.com',
description: 'Description of item 2',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
footer: 'Item 2 footer',
}),
],
}));
});
Java
@ForIntent("Browsing Carousel")
public ActionResponse browseCarousel(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())
|| !request.hasCapability(Capability.WEB_BROWSER.getValue())) {
return responseBuilder
.add("Sorry, try this on a phone or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("Here's an example of a browsing carousel.")
.add(
new CarouselBrowse()
.setItems(
new ArrayList<CarouselBrowseItem>(
Arrays.asList(
new CarouselBrowseItem()
.setTitle("Title of item 1")
.setDescription("Description of item 1")
.setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setFooter("Item 1 footer"),
new CarouselBrowseItem()
.setTitle("Title of item 2")
.setDescription("Description of item 2")
.setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setFooter("Item 2 footer")))));
return responseBuilder.build();
}
Node.js
if (!conv.screen
|| !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) {
conv.ask('Sorry, try this on a phone or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask(`Here's an example of a browsing carousel.`);
conv.ask(new BrowseCarousel({
items: [
new BrowseCarouselItem({
title: 'Title of item 1',
url: 'https://example.com',
description: 'Description of item 1',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
footer: 'Item 1 footer',
}),
new BrowseCarouselItem({
title: 'Title of item 2',
url: 'https://example.com',
description: 'Description of item 2',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
footer: 'Item 2 footer',
}),
],
}));
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())
|| !request.hasCapability(Capability.WEB_BROWSER.getValue())) {
return responseBuilder
.add("Sorry, try this on a phone or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("Here's an example of a browsing carousel.")
.add(
new CarouselBrowse()
.setItems(
new ArrayList<CarouselBrowseItem>(
Arrays.asList(
new CarouselBrowseItem()
.setTitle("Title of item 1")
.setDescription("Description of item 1")
.setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setFooter("Item 1 footer"),
new CarouselBrowseItem()
.setTitle("Title of item 2")
.setDescription("Description of item 2")
.setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setFooter("Item 2 footer")))));
return responseBuilder.build();
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "Here's an example of a browsing carousel."
}
},
{
"carouselBrowse": {
"items": [
{
"title": "Title of item 1",
"openUrlAction": {
"url": "https://example.com"
},
"description": "Description of item 1",
"footer": "Item 1 footer",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Image alternate text"
}
},
{
"title": "Title of item 2",
"openUrlAction": {
"url": "https://example.com"
},
"description": "Description of item 2",
"footer": "Item 2 footer",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Image alternate text"
}
}
]
}
}
]
}
}
}
}
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "Here's an example of a browsing carousel."
}
},
{
"carouselBrowse": {
"items": [
{
"description": "Description of item 1",
"footer": "Item 1 footer",
"image": {
"accessibilityText": "Image alternate text",
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png"
},
"openUrlAction": {
"url": "https://example.com"
},
"title": "Title of item 1"
},
{
"description": "Description of item 2",
"footer": "Item 2 footer",
"image": {
"accessibilityText": "Image alternate text",
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png"
},
"openUrlAction": {
"url": "https://example.com"
},
"title": "Title of item 2"
}
]
}
}
]
}
},
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
]
}
]
}
Gestione elemento selezionato
Non è necessario eseguire azioni di follow-up per le interazioni degli utenti con gli elementi del carosello di navigazione, dato che il carosello gestisce il passaggio del browser. Tieni presente che il microfono non si riaprirà dopo che l'utente interagisce con un elemento del carosello di navigazione, quindi devi terminare la conversazione o includere chip di suggerimento nella risposta secondo le indicazioni fornite sopra.
Chip relativi ai suggerimenti
Usa i chip di suggerimento per suggerire le risposte per continuare o reindirizzare la conversazione. Se durante la conversazione c'è un invito all'azione principale, consideralo l'elenco come primo chip di suggerimento.
Quando possibile, dovresti incorporare un suggerimento chiave nel fumetto della chat, ma fallo solo se la risposta o la conversazione via chat è naturale.
Proprietà
I chip di suggerimenti hanno i seguenti requisiti e proprietà facoltative che puoi configurare:
- Supportato sulle piattaforme con la funzionalità di
actions.capability.SCREEN_OUTPUT. - Per collegare i chip di suggerimento al Web, le piattaforme devono avere anche la funzionalità
actions.capability.WEB_BROWSER. Al momento questa funzionalità non è disponibile sugli smart display. - Massimo 8 chip.
- Lunghezza massima del testo: 25 caratteri.
Supporta solo il testo normale.
Codice campione
Node.js
app.intent('Suggestion Chips', (conv) => {
if (!conv.screen) {
conv.ask('Chips can be demonstrated on screen devices.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('These are suggestion chips.');
conv.ask(new Suggestions('Suggestion 1'));
conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3']));
conv.ask(new LinkOutSuggestion({
name: 'Suggestion Link',
url: 'https://assistant.google.com/',
}));
conv.ask('Which type of response would you like to see next?'); ;
});
Java
@ForIntent("Suggestion Chips")
public ActionResponse suggestionChips(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("These are suggestion chips.")
.addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"})
.add(
new LinkOutSuggestion()
.setDestinationName("Suggestion Link")
.setUrl("https://assistant.google.com/"))
.add("Which type of response would you like to see next?");
return responseBuilder.build();
}
Node.js
if (!conv.screen) {
conv.ask('Chips can be demonstrated on screen devices.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('These are suggestion chips.');
conv.ask(new Suggestions('Suggestion 1'));
conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3']));
conv.ask(new LinkOutSuggestion({
name: 'Suggestion Link',
url: 'https://assistant.google.com/',
}));
conv.ask('Which type of response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("These are suggestion chips.")
.addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"})
.add(
new LinkOutSuggestion()
.setDestinationName("Suggestion Link")
.setUrl("https://assistant.google.com/"))
.add("Which type of response would you like to see next?");
return responseBuilder.build();
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "These are suggestion chips."
}
},
{
"simpleResponse": {
"textToSpeech": "Which type of response would you like to see next?"
}
}
],
"suggestions": [
{
"title": "Suggestion 1"
},
{
"title": "Suggestion 2"
},
{
"title": "Suggestion 3"
}
],
"linkOutSuggestion": {
"destinationName": "Suggestion Link",
"url": "https://assistant.google.com/"
}
}
}
}
}
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
],
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "These are suggestion chips."
}
},
{
"simpleResponse": {
"textToSpeech": "Which type of response would you like to see next?"
}
}
],
"suggestions": [
{
"title": "Suggestion 1"
},
{
"title": "Suggestion 2"
},
{
"title": "Suggestion 3"
}
],
"linkOutSuggestion": {
"destinationName": "Suggestion Link",
"url": "https://assistant.google.com/"
}
}
}
}
]
}
Risposte multimediali
Le risposte dei contenuti multimediali consentono alle azioni di riprodurre contenuti audio con una durata di riproduzione superiore al limite di 240 secondi di SSML. Il componente principale di una risposta multimediale è la scheda a traccia singola. La scheda consente all'utente di eseguire queste operazioni:
- Riproduci nuovamente gli ultimi 10 secondi.
- Vai avanti di 30 secondi.
- Visualizza la durata totale dei contenuti multimediali.
- Visualizzare un indicatore di avanzamento per la riproduzione audio.
- Visualizza il tempo di riproduzione trascorso.
Le risposte dei contenuti multimediali supportano i seguenti controlli audio per l'interazione vocale:
- "Hey Google, gioca."
- "Hey Google, metti in pausa."
- "Hey Google, stop."
- "Hey Google, ricomincia."
Gli utenti possono anche regolare il volume dicendo frasi come "Hey Google, alza il volume" oppure "Hey Google, imposta il volume al 50%". Gli intent dell'azione hanno la precedenza se gestiscono frasi di addestramento simili. Consenti all'assistente di gestire queste richieste, a meno che la tua azione non abbia un motivo specifico.
Proprietà
Le risposte multimediali hanno i seguenti requisiti e proprietà facoltative che puoi configurare:
- Supportato sulle piattaforme con la funzionalità
actions.capability.MEDIA_RESPONSE_AUDIO. - L'audio per la riproduzione deve essere in un file
.mp3formattato correttamente. Il live streaming non è supportato. - Il file multimediale da riprodurre deve essere specificato come URL HTTPS.
- Immagine (facoltativo)
- Se vuoi, puoi includere un'icona o un'immagine.
- Icona
- L'icona viene visualizzata come miniatura senza bordi a destra della scheda del lettore multimediale.
- Le dimensioni devono essere 36 x 36 dp. Le immagini di dimensioni maggiori vengono ridimensionate per essere adattate.
- Immagine
- Il contenitore di immagine avrà un'altezza di 192 dp.
- L'immagine viene visualizzata nella parte superiore della scheda del lettore multimediale e si estende per tutta la larghezza della scheda. La maggior parte delle immagini verranno visualizzate con barre lungo la parte superiore o laterale.
- Sono consentite le GIF in movimento.
- Devi specificare l'origine dell'immagine come URL.
- Il testo alternativo è obbligatorio per tutte le immagini.
Comportamento sulle piattaforme
Le risposte dei contenuti multimediali sono supportate sui telefoni Android e su Google Home. Il comportamento delle risposte multimediali dipende dalla piattaforma su cui gli utenti interagiscono con le azioni.
Sui telefoni Android, gli utenti possono vedere le risposte dei contenuti multimediali quando vengono soddisfatte una di queste condizioni:
- L'Assistente Google è in primo piano e lo schermo del telefono è attivo.
- L'utente lascia l'Assistente Google durante la riproduzione dell'audio e torna all'Assistente Google entro 10 minuti dal completamento della riproduzione. Quando torna all'Assistente Google, l'utente visualizza la scheda multimediale e i chip di suggerimento.
- L'assistente consente agli utenti di controllare il volume del dispositivo all'interno della tua azione di conversazione dicendo, ad esempio, "alza il volume" o "imposta il volume al 50%". Se hai intent che gestiscono frasi di addestramento simili, i tuoi intent hanno la precedenza. Ti consigliamo di lasciare che l'assistente gestisca queste richieste degli utenti, a meno che l'azione non abbia un motivo specifico.
I controlli multimediali sono disponibili con il telefono bloccato. Su Android, i controlli vengono visualizzati anche nell'area di notifica.
Codice campione
Il seguente esempio di codice mostra come potresti aggiornare le tue risposte multimediali per includere contenuti multimediali.
Node.js
app.intent('Media Response', (conv) => {
if (!conv.surface.capabilities
.has('actions.capability.MEDIA_RESPONSE_AUDIO')) {
conv.ask('Sorry, this device does not support audio playback.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a media response example.');
conv.ask(new MediaObject({
name: 'Jazz in Paris',
url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3',
description: 'A funky Jazz tune',
icon: new Image({
url: 'https://storage.googleapis.com/automotive-media/album_art.jpg',
alt: 'Album cover of an ocean view',
}),
}));
conv.ask(new Suggestions(['Basic Card', 'List',
'Carousel', 'Browsing Carousel']));
});
Java
@ForIntent("Media Response")
public ActionResponse mediaResponse(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) {
return responseBuilder
.add("Sorry, this device does not support audio playback.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a media response example.")
.add(
new MediaResponse()
.setMediaObjects(
new ArrayList<MediaObject>(
Arrays.asList(
new MediaObject()
.setName("Jazz in Paris")
.setDescription("A funky Jazz tune")
.setContentUrl(
"https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3")
.setIcon(
new Image()
.setUrl(
"https://storage.googleapis.com/automotive-media/album_art.jpg")
.setAccessibilityText("Album cover of an ocean view")))))
.setMediaType("AUDIO"))
.addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"});
return responseBuilder.build();
}
Node.js
if (!conv.surface.capabilities
.has('actions.capability.MEDIA_RESPONSE_AUDIO')) {
conv.ask('Sorry, this device does not support audio playback.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a media response example.');
conv.ask(new MediaObject({
name: 'Jazz in Paris',
url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3',
description: 'A funky Jazz tune',
icon: new Image({
url: 'https://storage.googleapis.com/automotive-media/album_art.jpg',
alt: 'Album cover of an ocean view',
}),
}));
conv.ask(new Suggestions(['Basic Card', 'List',
'Carousel', 'Browsing Carousel']));
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) {
return responseBuilder
.add("Sorry, this device does not support audio playback.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a media response example.")
.add(
new MediaResponse()
.setMediaObjects(
new ArrayList<MediaObject>(
Arrays.asList(
new MediaObject()
.setName("Jazz in Paris")
.setDescription("A funky Jazz tune")
.setContentUrl(
"https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3")
.setIcon(
new Image()
.setUrl(
"https://storage.googleapis.com/automotive-media/album_art.jpg")
.setAccessibilityText("Album cover of an ocean view")))))
.setMediaType("AUDIO"))
.addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"});
return responseBuilder.build();
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a media response example."
}
},
{
"mediaResponse": {
"mediaType": "AUDIO",
"mediaObjects": [
{
"contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3",
"description": "A funky Jazz tune",
"icon": {
"url": "https://storage.googleapis.com/automotive-media/album_art.jpg",
"accessibilityText": "Album cover of an ocean view"
},
"name": "Jazz in Paris"
}
]
}
}
],
"suggestions": [
{
"title": "Basic Card"
},
{
"title": "List"
},
{
"title": "Carousel"
},
{
"title": "Browsing Carousel"
}
]
}
}
}
}
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
],
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a media response example."
}
},
{
"mediaResponse": {
"mediaType": "AUDIO",
"mediaObjects": [
{
"contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3",
"description": "A funky Jazz tune",
"icon": {
"url": "https://storage.googleapis.com/automotive-media/album_art.jpg",
"accessibilityText": "Album cover of an ocean view"
},
"name": "Jazz in Paris"
}
]
}
}
],
"suggestions": [
{
"title": "Basic Card"
},
{
"title": "List"
},
{
"title": "Carousel"
},
{
"title": "Browsing Carousel"
}
]
}
}
}
]
}
Consulenza
La risposta deve includere un elemento mediaResponse con un valore mediaType pari a AUDIO e un elemento mediaObject nell'array di elementi della risposta avanzata. Una risposta multimediale supporta un singolo oggetto multimediale. Un oggetto multimediale deve includere l'URL dei contenuti
del file audio. Un oggetto multimediale può facoltativamente includere un nome, un testo secondario
(descrizione) e un'icona o un URL di immagine.
Sui telefoni e su Google Home, quando l'azione completa la riproduzione audio, l'Assistente Google controlla se la risposta multimediale è FinalResponse.
In caso contrario, invia un callback al tuo evasione, consentendoti di rispondere all'utente.
La tua azione deve includere chip di suggerimento se la risposta non è un valore FinalResponse.
Gestione del callback dopo il completamento della riproduzione
L'azione deve gestire l'intent actions.intent.MEDIA_STATUS per richiedere all'utente un follow-up (ad esempio per riprodurre un altro brano). L'azione riceve questo callback una volta completata la riproduzione del contenuto multimediale. Nel callback, l'argomento MEDIA_STATUS contiene informazioni di stato sui contenuti multimediali correnti. Il valore dello stato sarà FINISHED o STATUS_UNSPECIFIED.
Utilizzo di Dialogflow
Se vuoi eseguire la diramazione conversazionale in Dialogflow, devi
configurare un contesto di input actions_capability_media_response_audio
per assicurarti che venga attivato solo sulle piattaforme che supportano una risposta multimediale.
Creazione del fulfillment
Lo snippet di codice riportato di seguito mostra come scrivere il codice per l'evasione dell'azione. Se utilizzi Dialogflow, sostituisci actions.intent.MEDIA_STATUS con il nome dell'azione specificato nell'intent che riceve l'evento actions_intent_MEDIA_STATUS (ad esempio, "media.status.update").
Node.js
app.intent('Media Status', (conv) => {
const mediaStatus = conv.arguments.get('MEDIA_STATUS');
let response = 'Unknown media status received.';
if (mediaStatus && mediaStatus.status === 'FINISHED') {
response = 'Hope you enjoyed the tune!';
}
conv.ask(response);
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("Media Status")
public ActionResponse mediaStatus(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
String mediaStatus = request.getMediaStatus();
String response = "Unknown media status received.";
if (mediaStatus != null && mediaStatus.equals("FINISHED")) {
response = "Hope you enjoyed the tune!";
}
responseBuilder.add(response);
responseBuilder.add("Which response would you like to see next?");
return responseBuilder.build();
}
Node.js
app.intent('actions.intent.MEDIA_STATUS', (conv) => {
const mediaStatus = conv.arguments.get('MEDIA_STATUS');
let response = 'Unknown media status received.';
if (mediaStatus && mediaStatus.status === 'FINISHED') {
response = 'Hope you enjoyed the tune!';
}
conv.ask(response);
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("actions.intent.MEDIA_STATUS")
public ActionResponse mediaStatus(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
String mediaStatus = request.getMediaStatus();
String response = "Unknown media status received.";
if (mediaStatus != null && mediaStatus.equals("FINISHED")) {
response = "Hope you enjoyed the tune!";
}
responseBuilder.add(response);
responseBuilder.add("Which response would you like to see next?");
return responseBuilder.build();
}
JSON
Tieni presente che il codice JSON seguente descrive una richiesta di webhook.
{
"responseId": "151b68df-98de-41fb-94b5-caeace90a7e9-21947381",
"queryResult": {
"queryText": "actions_intent_MEDIA_STATUS",
"parameters": {},
"allRequiredParamsPresent": true,
"fulfillmentText": "Webhook failed for intent: Media Status",
"fulfillmentMessages": [
{
"text": {
"text": [
"Webhook failed for intent: Media Status"
]
}
}
],
"outputContexts": [
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_media_response_audio"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_account_linking"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_web_browser"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_screen_output"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_audio_output"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/google_assistant_input_type_voice"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_intent_media_status",
"parameters": {
"MEDIA_STATUS": {
"@type": "type.googleapis.com/google.actions.v2.MediaStatus",
"status": "FINISHED"
}
}
}
],
"intent": {
"name": "projects/df-responses-kohler/agent/intents/068b27d3-c148-4044-bfab-dfa37eebd90d",
"displayName": "Media Status"
},
"intentDetectionConfidence": 1,
"languageCode": "en"
},
"originalDetectIntentRequest": {
"source": "google",
"version": "2",
"payload": {
"user": {
"locale": "en-US",
"lastSeen": "2019-08-04T23:57:15Z",
"userVerificationStatus": "VERIFIED"
},
"conversation": {
"conversationId": "ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA",
"type": "ACTIVE",
"conversationToken": "[]"
},
"inputs": [
{
"intent": "actions.intent.MEDIA_STATUS",
"rawInputs": [
{
"inputType": "VOICE"
}
],
"arguments": [
{
"name": "MEDIA_STATUS",
"extension": {
"@type": "type.googleapis.com/google.actions.v2.MediaStatus",
"status": "FINISHED"
}
}
]
}
],
"surface": {
"capabilities": [
{
"name": "actions.capability.MEDIA_RESPONSE_AUDIO"
},
{
"name": "actions.capability.ACCOUNT_LINKING"
},
{
"name": "actions.capability.WEB_BROWSER"
},
{
"name": "actions.capability.SCREEN_OUTPUT"
},
{
"name": "actions.capability.AUDIO_OUTPUT"
}
]
},
"isInSandbox": true,
"availableSurfaces": [
{
"capabilities": [
{
"name": "actions.capability.WEB_BROWSER"
},
{
"name": "actions.capability.AUDIO_OUTPUT"
},
{
"name": "actions.capability.SCREEN_OUTPUT"
}
]
}
],
"requestType": "SIMULATOR"
}
},
"session": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA"
}
JSON
Tieni presente che il codice JSON seguente descrive una richiesta di webhook.
{
"user": {
"locale": "en-US",
"lastSeen": "2019-08-06T07:38:40Z",
"userVerificationStatus": "VERIFIED"
},
"conversation": {
"conversationId": "ABwppHGcqunXh1M6IE0lu2sVqXdpJfdpC5FWMkMSXQskK1nzb4IkSUSRqQzoEr0Ly0z_G3mwyZlk5rFtd1w",
"type": "NEW"
},
"inputs": [
{
"intent": "actions.intent.MEDIA_STATUS",
"rawInputs": [
{
"inputType": "VOICE"
}
],
"arguments": [
{
"name": "MEDIA_STATUS",
"extension": {
"@type": "type.googleapis.com/google.actions.v2.MediaStatus",
"status": "FINISHED"
}
}
]
}
],
"surface": {
"capabilities": [
{
"name": "actions.capability.SCREEN_OUTPUT"
},
{
"name": "actions.capability.WEB_BROWSER"
},
{
"name": "actions.capability.AUDIO_OUTPUT"
},
{
"name": "actions.capability.MEDIA_RESPONSE_AUDIO"
},
{
"name": "actions.capability.ACCOUNT_LINKING"
}
]
},
"isInSandbox": true,
"availableSurfaces": [
{
"capabilities": [
{
"name": "actions.capability.WEB_BROWSER"
},
{
"name": "actions.capability.AUDIO_OUTPUT"
},
{
"name": "actions.capability.SCREEN_OUTPUT"
}
]
}
],
"requestType": "SIMULATOR"
}
Schede tabella
Le schede della tabella consentono di visualizzare dati tabulari nella risposta (ad esempio, classifiche sportive, risultati elettorali e voli). Puoi definire colonne e righe (fino a tre) che l'assistente dovrà visualizzare nella scheda della tabella. Puoi anche definire colonne e righe aggiuntive insieme alla relativa priorità.
Le tabelle sono diverse dagli elenchi verticali perché mostrano dati statici e non sono intercambiabili, come gli elementi dell'elenco.
Proprietà
Le schede tabella hanno i seguenti requisiti e proprietà facoltative che puoi configurare:
- Supportato sulle piattaforme con la funzionalità di
actions.capability.SCREEN_OUTPUT.
La sezione seguente riassume il modo in cui puoi personalizzare gli elementi in una scheda tabella.
| Nome | È facoltativo | È personalizzabile | Note sulla personalizzazione |
|---|---|---|---|
title |
Sì | Sì | Titolo complessivo della tabella. Deve essere impostato se è impostato il sottotitolo. Puoi personalizzare la famiglia di caratteri e i colori. |
subtitle |
Sì | No | Sottotitolo per la tabella. |
image |
Sì | Sì | Immagine associata alla tabella. |
Row |
No | Sì |
Riga di dati della tabella. Consiste di un array di oggetti Garantiamo la visualizzazione delle prime tre righe, ma altre potrebbero non essere visualizzate su alcune piattaforme. Fai una prova con il simulatore per vedere quali righe vengono mostrate per una determinata superficie. Sulle piattaforme che supportano la funzionalità |
ColumnProperties |
Sì | Sì | Intestazione e allineamento per una colonna. È composto da una proprietà header (che rappresenta il testo dell'intestazione di una colonna) e una proprietà horizontal_alignment (di tipo HorizontalAlignment). |
Cell |
No | Sì | Descrive una cella in una riga. Ogni cella contiene una stringa che rappresenta un valore di testo. Puoi personalizzare il testo nella cella. |
Button |
Sì | Sì | Un oggetto pulsante che viene solitamente visualizzato nella parte inferiore di una scheda. Una scheda di tabella può avere un solo pulsante. Puoi personalizzare il colore del pulsante. |
HorizontalAlignment |
Sì | Sì | Allineamento orizzontale dei contenuti all'interno della cella. I valori possono essere LEADING, CENTER o TRAILING. Se
non specificato, i contenuti vengono allineati al bordo iniziale della cella. |
Codice campione
I seguenti snippet mostrano come implementare una semplice scheda tabella:
Node.js
app.intent('Simple Table Card', (conv) => {
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a simple table example.');
conv.ask(new Table({
dividers: true,
columns: ['header 1', 'header 2', 'header 3'],
rows: [
['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
],
}));
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("Simple Table Card")
public ActionResponse simpleTable(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a simple table example.")
.add(
new TableCard()
.setColumnProperties(
Arrays.asList(
new TableCardColumnProperties().setHeader("header 1"),
new TableCardColumnProperties().setHeader("header 2"),
new TableCardColumnProperties().setHeader("header 3")))
.setRows(
Arrays.asList(
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 1 item 1"),
new TableCardCell().setText("row 1 item 2"),
new TableCardCell().setText("row 1 item 3"))),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
}
Node.js
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a simple table example.');
conv.ask(new Table({
dividers: true,
columns: ['header 1', 'header 2', 'header 3'],
rows: [
['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
],
}));
conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a simple table example.")
.add(
new TableCard()
.setColumnProperties(
Arrays.asList(
new TableCardColumnProperties().setHeader("header 1"),
new TableCardColumnProperties().setHeader("header 2"),
new TableCardColumnProperties().setHeader("header 3")))
.setRows(
Arrays.asList(
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 1 item 1"),
new TableCardCell().setText("row 1 item 2"),
new TableCardCell().setText("row 1 item 3"))),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a simple table example."
}
},
{
"tableCard": {
"rows": [
{
"cells": [
{
"text": "row 1 item 1"
},
{
"text": "row 1 item 2"
},
{
"text": "row 1 item 3"
}
],
"dividerAfter": true
},
{
"cells": [
{
"text": "row 2 item 1"
},
{
"text": "row 2 item 2"
},
{
"text": "row 2 item 3"
}
],
"dividerAfter": true
}
],
"columnProperties": [
{
"header": "header 1"
},
{
"header": "header 2"
},
{
"header": "header 3"
}
]
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
}
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a simple table example."
}
},
{
"tableCard": {
"columnProperties": [
{
"header": "header 1"
},
{
"header": "header 2"
},
{
"header": "header 3"
}
],
"rows": [
{
"cells": [
{
"text": "row 1 item 1"
},
{
"text": "row 1 item 2"
},
{
"text": "row 1 item 3"
}
],
"dividerAfter": true
},
{
"cells": [
{
"text": "row 2 item 1"
},
{
"text": "row 2 item 2"
},
{
"text": "row 2 item 3"
}
],
"dividerAfter": true
}
]
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
},
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
]
}
]
}
I seguenti snippet mostrano come implementare una scheda tabella complessa:
Node.js
app.intent('Advanced Table Card', (conv) => {
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a table with all the possible fields.');
conv.ask(new Table({
title: 'Table Title',
subtitle: 'Table Subtitle',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Alt Text',
}),
columns: [
{
header: 'header 1',
align: 'CENTER',
},
{
header: 'header 2',
align: 'LEADING',
},
{
header: 'header 3',
align: 'TRAILING',
},
],
rows: [
{
cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
dividerAfter: false,
},
{
cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
dividerAfter: true,
},
{
cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'],
},
],
buttons: new Button({
title: 'Button Text',
url: 'https://assistant.google.com',
}),
}));
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("Advanced Table Card")
public ActionResponse advancedTable(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a table with all the possible fields.")
.add(
new TableCard()
.setTitle("Table Title")
.setSubtitle("Table Subtitle")
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Alt text"))
.setButtons(
Arrays.asList(
new Button()
.setTitle("Button Text")
.setOpenUrlAction(
new OpenUrlAction().setUrl("https://assistant.google.com"))))
.setColumnProperties(
Arrays.asList(
new TableCardColumnProperties()
.setHeader("header 1")
.setHorizontalAlignment("CENTER"),
new TableCardColumnProperties()
.setHeader("header 2")
.setHorizontalAlignment("LEADING"),
new TableCardColumnProperties()
.setHeader("header 3")
.setHorizontalAlignment("TRAILING")))
.setRows(
Arrays.asList(
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 1 item 1"),
new TableCardCell().setText("row 1 item 2"),
new TableCardCell().setText("row 1 item 3")))
.setDividerAfter(false),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3")))
.setDividerAfter(true),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
}
Node.js
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a table with all the possible fields.');
conv.ask(new Table({
title: 'Table Title',
subtitle: 'Table Subtitle',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Alt Text',
}),
columns: [
{
header: 'header 1',
align: 'CENTER',
},
{
header: 'header 2',
align: 'LEADING',
},
{
header: 'header 3',
align: 'TRAILING',
},
],
rows: [
{
cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
dividerAfter: false,
},
{
cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
dividerAfter: true,
},
{
cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'],
},
],
buttons: new Button({
title: 'Button Text',
url: 'https://assistant.google.com',
}),
}));
conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a table with all the possible fields.")
.add(
new TableCard()
.setTitle("Table Title")
.setSubtitle("Table Subtitle")
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Alt text"))
.setButtons(
Arrays.asList(
new Button()
.setTitle("Button Text")
.setOpenUrlAction(
new OpenUrlAction().setUrl("https://assistant.google.com"))))
.setColumnProperties(
Arrays.asList(
new TableCardColumnProperties()
.setHeader("header 1")
.setHorizontalAlignment("CENTER"),
new TableCardColumnProperties()
.setHeader("header 2")
.setHorizontalAlignment("LEADING"),
new TableCardColumnProperties()
.setHeader("header 3")
.setHorizontalAlignment("TRAILING")))
.setRows(
Arrays.asList(
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 1 item 1"),
new TableCardCell().setText("row 1 item 2"),
new TableCardCell().setText("row 1 item 3")))
.setDividerAfter(false),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3")))
.setDividerAfter(true),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a table with all the possible fields."
}
},
{
"tableCard": {
"title": "Table Title",
"subtitle": "Table Subtitle",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Alt Text"
},
"rows": [
{
"cells": [
{
"text": "row 1 item 1"
},
{
"text": "row 1 item 2"
},
{
"text": "row 1 item 3"
}
],
"dividerAfter": false
},
{
"cells": [
{
"text": "row 2 item 1"
},
{
"text": "row 2 item 2"
},
{
"text": "row 2 item 3"
}
],
"dividerAfter": true
},
{
"cells": [
{
"text": "row 3 item 1"
},
{
"text": "row 3 item 2"
},
{
"text": "row 3 item 3"
}
]
}
],
"columnProperties": [
{
"header": "header 1",
"horizontalAlignment": "CENTER"
},
{
"header": "header 2",
"horizontalAlignment": "LEADING"
},
{
"header": "header 3",
"horizontalAlignment": "TRAILING"
}
],
"buttons": [
{
"title": "Button Text",
"openUrlAction": {
"url": "https://assistant.google.com"
}
}
]
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
}
JSON
Tieni presente che il codice JSON seguente descrive una risposta webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
],
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a table with all the possible fields."
}
},
{
"tableCard": {
"title": "Table Title",
"subtitle": "Table Subtitle",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Alt Text"
},
"rows": [
{
"cells": [
{
"text": "row 1 item 1"
},
{
"text": "row 1 item 2"
},
{
"text": "row 1 item 3"
}
],
"dividerAfter": false
},
{
"cells": [
{
"text": "row 2 item 1"
},
{
"text": "row 2 item 2"
},
{
"text": "row 2 item 3"
}
],
"dividerAfter": true
},
{
"cells": [
{
"text": "row 3 item 1"
},
{
"text": "row 3 item 2"
},
{
"text": "row 3 item 3"
}
]
}
],
"columnProperties": [
{
"header": "header 1",
"horizontalAlignment": "CENTER"
},
{
"header": "header 2",
"horizontalAlignment": "LEADING"
},
{
"header": "header 3",
"horizontalAlignment": "TRAILING"
}
],
"buttons": [
{
"title": "Button Text",
"openUrlAction": {
"url": "https://assistant.google.com"
}
}
]
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
]
}
Personalizzazione delle risposte
Puoi modificare l'aspetto delle tue risposte multimediali creando un tema personalizzato. Se definisci un tema per il progetto Actions, le risposte multimediali nelle azioni del progetto verranno applicate in base al tuo tema. Questo branding personalizzato può essere utile per definire un aspetto e un aspetto unici per la conversazione quando gli utenti richiamano le azioni su una superficie con uno schermo.
Per impostare un tema di risposta personalizzato:
- Nella console di Actions, vai a Sviluppo > Personalizzazione del tema.
- Imposta una o più delle seguenti opzioni:
- Colore di sfondo da utilizzare come sfondo delle schede. In generale, ti consigliamo di utilizzare un colore chiaro per lo sfondo in modo che i contenuti della scheda siano facili da leggere.
- Colore principale è il colore principale dei testi delle intestazioni e degli elementi dell'interfaccia utente. In generale, è consigliabile utilizzare un colore principale più scuro per creare un contrasto con lo sfondo.
- La famiglia di caratteri descrive il tipo di carattere utilizzato per i titoli e altri elementi di testo in evidenza.
- Stile angolo immagine può modificare l'aspetto degli angoli delle schede.
- Immagine di sfondo utilizza un'immagine personalizzata al posto del colore di sfondo. Dovrai fornire due immagini diverse quando il dispositivo di superficie è in modalità orizzontale o verticale, rispettivamente. Tieni presente che se utilizzi un'immagine di sfondo, il colore principale è impostato sul bianco.
- Fai clic su Salva.
