Respostas avançadas adicionam elementos visuais para melhorar as interações do usuário com sua ação. É possível usar os seguintes tipos de resposta avançada como parte de um comando:
- Cartão básico
- Card de imagem
- Cartão de tabela
Ao definir uma resposta avançada, use um candidato com o recurso de superfície RICH_RESPONSE
para que o Google Assistente retorne a resposta aprimorada somente em
dispositivos com suporte. Só é possível usar uma resposta avançada por objeto content em um
comando.
Cartão básico
Os cards básicos são projetados para serem concisos, apresentar informações importantes (ou resumos) aos usuários e permitir que eles saibam mais sobre isso usando um link da Web.
Use cards básicos principalmente para fins de exibição, já que eles não têm recursos de interação
sem um botão. Para vincular um botão à Web, uma plataforma também precisa
ter o recurso WEB_LINK.
Propriedades
O tipo de resposta em ficha de informações básica tem as seguintes propriedades:
| Propriedade | Tipo | Requisito | Descrição |
|---|---|---|---|
title |
string | Opcional | Título em texto simples do cartão. Os títulos têm fonte e tamanho fixos, e os caracteres após a primeira linha são truncados. A altura do card será recolhida se nenhum título for especificado. |
subtitle |
string | Opcional | Subtítulo em texto simples do cartão. Os títulos têm fonte e tamanho fixos, e os caracteres após a primeira linha são truncados. A altura do card é fechada se nenhuma legenda é especificada. |
text |
string | Condicional |
Conteúdo em texto simples do card. Um texto muito longo é truncado na
última quebra de palavra com reticências. Esta propriedade é obrigatória, a menos que
Esta propriedade tem as seguintes restrições:
Há suporte para um subconjunto limitado do Markdown:
|
image |
Image |
Opcional | Imagem exibida no card. As imagens podem ser JPG, PNG e GIF (animadas e não). |
image_fill |
ImageFill |
Opcional | Borda entre o cartão e o contêiner da imagem a ser usada quando a proporção da imagem não corresponder à do contêiner. |
button |
Link |
Opcional | Botão que vincula o usuário a um URL quando tocado. O botão precisa ter
uma propriedade name que contenha o texto do botão e uma
propriedade url que contenha o URL do link. O texto do botão não pode
ser enganoso e é verificado durante o processo de revisão. |
Exemplo de código
YAML
candidates:
- first_simple:
variants:
- speech: This is a card.
text: This is a card.
content:
card:
title: Card Title
subtitle: Card Subtitle
text: Card Content
image:
url: 'https://developers.google.com/assistant/assistant_96.png'
alt: Google Assistant logo
JSON
{
"candidates": [
{
"first_simple": {
"variants": [
{
"speech": "This is a card.",
"text": "This is a card."
}
]
},
"content": {
"card": {
"title": "Card Title",
"subtitle": "Card Subtitle",
"text": "Card Content",
"image": {
"url": "https://developers.google.com/assistant/assistant_96.png",
"alt": "Google Assistant logo"
}
}
}
}
]
}
Node.js
app.handle('Card', conv => {
conv.add('This is a card.');
conv.add(new Card({
"title": "Card Title",
"subtitle": "Card Subtitle",
"text": "Card Content",
"image": new Image({
url: 'https://developers.google.com/assistant/assistant_96.png',
alt: 'Google Assistant logo'
})
}));
});
JSON
{
"responseJson": {
"session": {
"id": "session_id",
"params": {}
},
"prompt": {
"override": false,
"content": {
"card": {
"title": "Card Title",
"subtitle": "Card Subtitle",
"text": "Card Content",
"image": {
"alt": "Google Assistant logo",
"height": 0,
"url": "https://developers.google.com/assistant/assistant_96.png",
"width": 0
}
}
},
"firstSimple": {
"speech": "This is a card.",
"text": "This is a card."
}
}
}
}
Cards de imagem
Os cards de imagem foram criados para serem uma alternativa mais simples a um cartão básico que também contém uma imagem. Use um card quando quiser apresentar uma imagem sem precisar de suporte para texto ou componentes interativos.
Propriedades
O tipo de resposta do card de imagem tem as seguintes propriedades:
| Propriedade | Tipo | Requisito | Descrição |
|---|---|---|---|
url |
string | Obrigatório | URL de origem da imagem. As imagens podem ser JPG, PNG ou GIF (animadas e não animadas). |
alt |
string | Obrigatório | Descrição do texto da imagem a ser usada para acessibilidade. |
height |
int32 | Opcional | Altura da imagem em pixels. |
width |
int32 | Opcional | Largura da imagem, em pixels. |
Exemplo de código
YAML
candidates:
- first_simple:
variants:
- speech: This is an image prompt.
text: This is an image prompt.
content:
image:
alt: Google Assistant logo
url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{
"candidates": [
{
"first_simple": {
"variants": [
{
"speech": "This is an image prompt.",
"text": "This is an image prompt."
}
]
},
"content": {
"image": {
"alt": "Google Assistant logo",
"url": "https://developers.google.com/assistant/assistant_96.png"
}
}
}
]
}
Node.js
app.handle('Image', conv => {
conv.add("This is an image prompt!");
conv.add(new Image({
url: 'https://developers.google.com/assistant/assistant_96.png',
alt: 'Google Assistant logo'
}));
});
JSON
{
"responseJson": {
"session": {
"id": "session_id",
"params": {}
},
"prompt": {
"override": false,
"content": {
"image": {
"alt": "Google Assistant logo",
"height": 0,
"url": "https://developers.google.com/assistant/assistant_96.png",
"width": 0
}
},
"firstSimple": {
"speech": "This is an image prompt.",
"text": "This is an image prompt."
}
}
}
}
Cards de tabela
Com os cards de tabela, é possível exibir dados tabulares na sua resposta (por exemplo, classificações esportivas, resultados eleitorais e voos). Você pode definir colunas e linhas (até três de cada) que o Google Assistente vai mostrar no card de tabela. Também é possível definir colunas e linhas adicionais, com a priorização delas.
As tabelas exibem dados estáticos e não são interativos. Para respostas de seleção interativas, use uma resposta de seleção visual.
Propriedades
O tipo de resposta do card de tabela tem as seguintes propriedades:
| Propriedade | Tipo | Requisito | Descrição |
|---|---|---|---|
title |
string | Condicional | Título da tabela em texto simples. Essa propriedade será obrigatória se subtitle estiver definido. |
subtitle |
string | Opcional | Subtítulo em texto simples da tabela. As legendas em cards de tabela não são afetadas pela personalização do tema. |
columns |
matriz de TableColumn |
Obrigatório | Cabeçalhos e alinhamento de colunas. Cada objeto TableColumn
descreve o cabeçalho e o alinhamento de uma coluna diferente na mesma
tabela. |
rows |
matriz de TableRow |
Obrigatório |
Dados de linha da tabela. As três primeiras linhas vão aparecer, mas outras podem não aparecer em determinadas plataformas. É possível testar com o simulador para ver quais linhas são mostradas para uma determinada superfície. Cada objeto |
image |
Image |
Opcional | Imagem associada à tabela. |
button |
Link |
Opcional | Botão que vincula o usuário a um URL quando tocado. O botão precisa ter uma propriedade name que contenha o texto do botão e uma propriedade url que contenha o URL do link. O texto do botão não pode
ser enganoso e é verificado durante o processo de revisão.
|
Exemplo de código
Os snippets a seguir mostram como implementar um card de tabela:
YAML
candidates:
- first_simple:
variants:
- speech: This is a table.
text: This is a table.
content:
table:
title: Table Title
subtitle: Table Subtitle
columns:
- header: Column A
- header: Column B
- header: Column C
rows:
- cells:
- text: A1
- text: B1
- text: C1
- cells:
- text: A2
- text: B2
- text: C2
- cells:
- text: A3
- text: B3
- text: C3
image:
alt: Google Assistant logo
url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{
"candidates": [
{
"first_simple": {
"variants": [
{
"speech": "This is a table.",
"text": "This is a table."
}
]
},
"content": {
"table": {
"title": "Table Title",
"subtitle": "Table Subtitle",
"columns": [
{
"header": "Column A"
},
{
"header": "Column B"
},
{
"header": "Column C"
}
],
"rows": [
{
"cells": [
{
"text": "A1"
},
{
"text": "B1"
},
{
"text": "C1"
}
]
},
{
"cells": [
{
"text": "A2"
},
{
"text": "B2"
},
{
"text": "C2"
}
]
},
{
"cells": [
{
"text": "A3"
},
{
"text": "B3"
},
{
"text": "C3"
}
]
}
],
"image": {
"alt": "Google Assistant logo",
"url": "https://developers.google.com/assistant/assistant_96.png"
}
}
}
}
]
}
Node.js
app.handle('Table', conv => {
conv.add('This is a table.');
conv.add(new Table({
"title": "Table Title",
"subtitle": "Table Subtitle",
"image": new Image({
url: 'https://developers.google.com/assistant/assistant_96.png',
alt: 'Google Assistant logo'
}),
"columns": [{
"header": "Column A"
}, {
"header": "Column B"
}, {
"header": "Column C"
}],
"rows": [{
"cells": [{
"text": "A1"
}, {
"text": "B1"
}, {
"text": "C1"
}]
}, {
"cells": [{
"text": "A2"
}, {
"text": "B2"
}, {
"text": "C2"
}]
}, {
"cells": [{
"text": "A3"
}, {
"text": "B3"
}, {
"text": "C3"
}]
}]
}));
});
JSON
{
"responseJson": {
"session": {
"id": "session_id",
"params": {}
},
"prompt": {
"override": false,
"content": {
"table": {
"button": {},
"columns": [
{
"header": "Column A"
},
{
"header": "Column B"
},
{
"header": "Column C"
}
],
"image": {
"alt": "Google Assistant logo",
"height": 0,
"url": "https://developers.google.com/assistant/assistant_96.png",
"width": 0
},
"rows": [
{
"cells": [
{
"text": "A1"
},
{
"text": "B1"
},
{
"text": "C1"
}
]
},
{
"cells": [
{
"text": "A2"
},
{
"text": "B2"
},
{
"text": "C2"
}
]
},
{
"cells": [
{
"text": "A3"
},
{
"text": "B3"
},
{
"text": "C3"
}
]
}
],
"subtitle": "Table Subtitle",
"title": "Table Title"
}
},
"firstSimple": {
"speech": "This is a table.",
"text": "This is a table."
}
}
}
}
Como personalizar suas respostas
É possível mudar a aparência das respostas avançadas criando um tema personalizado para o projeto do Actions. Essa personalização pode ser útil para definir uma aparência exclusiva para a conversa quando os usuários invocam suas ações em uma plataforma com uma tela.
Para definir um tema de resposta personalizado, faça o seguinte:
- No Console do Actions, acesse Desenvolver > Personalização do tema.
- Defina uma ou todas as opções a seguir:
- Cor do plano de fundo: usada como plano de fundo dos seus cards. Em geral, use uma cor clara de fundo para facilitar a leitura do conteúdo do card.
- Cor principal: a cor principal dos textos do cabeçalho e elementos da interface dos cards. Em geral, use uma cor primária mais escura para contrastar melhor com a cor do plano de fundo.
- Família de fontes: descreve o tipo de fonte usada para títulos e outros elementos de texto de destaque.
- Estilo do canto da imagem: altera a aparência dos cantos dos cards.
- Imagem de plano de fundo: imagem personalizada a ser usada no lugar da cor do plano de fundo. Forneça duas imagens diferentes para quando o dispositivo de superfície estiver nos modos paisagem ou retrato. Se você usar uma imagem de plano de fundo, a cor principal será definida como branco.
- Clique em Salvar.
