Расширенные ответы добавляют визуальные элементы для улучшения взаимодействия пользователей с вашим действием. Вы можете использовать следующие расширенные типы ответов как часть подсказки :
- Базовая карта
- Карточка изображения
- Карточка стола
При определении расширенного ответа используйте кандидата с поверхностной возможностью RICH_RESPONSE , чтобы Google Assistant возвращал расширенный ответ только на поддерживаемых устройствах. Вы можете использовать только один расширенный ответ для каждого объекта content в подсказке.
Базовая карта
Базовые карточки предназначены для того, чтобы быть краткими, чтобы предоставить пользователям ключевую (или сводную) информацию и позволить пользователям узнать больше, если вы выберете (используя веб-ссылку).
Используйте базовые карты в основном для демонстрации, так как без кнопки они не имеют возможности взаимодействия. Чтобы связать кнопку с веб-сайтом, поверхность также должна иметь возможность WEB_LINK .
Характеристики
Базовый тип ответа карты имеет следующие свойства:
| Свойство | Тип | Требование | Описание |
|---|---|---|---|
title | нить | Необязательный | Простое текстовое название карты. Заголовки имеют фиксированный шрифт и размер, а символы после первой строки обрезаются. Высота карты сворачивается, если заголовок не указан. |
subtitle | нить | Необязательный | Обычный текстовый подзаголовок карты. Заголовки имеют фиксированный шрифт и размер, а символы после первой строки обрезаются. Высота карточки сворачивается, если не указан подзаголовок. |
text | нить | Условный | Простое текстовое содержимое карты. Слишком длинный текст обрезается в конце последнего слова многоточием. Это свойство является обязательным, если отсутствует Это свойство имеет следующие ограничения:
Поддерживается ограниченное подмножество Markdown:
|
image | Image | Необязательный | Изображение отображается в карточке. Изображения могут быть в формате JPG, PNG и GIF (анимированные и неанимированные). |
image_fill | ImageFill | Необязательный | Граница между картой и контейнером изображения, используемая, когда соотношение сторон изображения не соответствует соотношению сторон контейнера изображения. |
button | Link | Необязательный | Кнопка, которая связывает пользователя с URL-адресом при нажатии. Кнопка должна иметь свойство name , содержащее текст кнопки, и свойство url , содержащее URL-адрес ссылки. Текст кнопки не может вводить в заблуждение и проверяется в процессе проверки. |
Образец кода
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."
}
}
}
}
Карточки изображений
Карточки с изображениями разработаны как более простая альтернатива базовой карточке, которая также содержит изображение. Используйте карточку изображения, если вы хотите представить изображение, и вам не нужны вспомогательные текстовые или интерактивные компоненты.
Характеристики
Тип ответа карты изображения имеет следующие свойства:
| Свойство | Тип | Требование | Описание |
|---|---|---|---|
url | нить | Необходимый | Исходный URL изображения. Изображения могут быть в формате JPG, PNG или GIF (анимированные и неанимированные). |
alt | нить | Необходимый | Текстовое описание изображения, которое будет использоваться для обеспечения доступности. |
height | int32 | Необязательный | Высота изображения в пикселях. |
width | int32 | Необязательный | Ширина изображения в пикселях. |
Образец кода
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."
}
}
}
}
Настольные карты
Карточки-таблицы позволяют отображать в ответе табличные данные (например, спортивное положение, результаты выборов и перелеты). Вы можете определить столбцы и строки (до 3 в каждой), которые Ассистент будет отображать на карточке таблицы. Вы также можете определить дополнительные столбцы и строки, а также их приоритеты.
Таблицы отображают статические данные и не интерактивны. Вместо интерактивных ответов выбора используйте визуальный ответ выбора .
Характеристики
Тип ответа карточки таблицы имеет следующие свойства:
| Свойство | Тип | Требование | Описание |
|---|---|---|---|
title | нить | Условный | Простой текст заголовка таблицы. Это свойство является обязательным, если subtitle установлены. |
subtitle | нить | Необязательный | Обычный текстовый подзаголовок таблицы. Субтитры в карточках таблиц не зависят от настройки темы. |
columns | массив TableColumn | Необходимый | Заголовки и выравнивание столбцов. Каждый объект TableColumn описывает заголовок и выравнивание другого столбца в той же таблице. |
rows | массив TableRow | Необходимый | Данные строки таблицы. Первые 3 строки гарантированно будут отображаться, но другие могут не отображаться на некоторых поверхностях. Вы можете протестировать с помощью симулятора, чтобы увидеть, какие строки отображаются для данной поверхности. Каждый объект |
image | Image | Необязательный | Изображение, связанное с таблицей. |
button | Link | Необязательный | Кнопка, которая связывает пользователя с URL-адресом при нажатии. Кнопка должна иметь свойство name , содержащее текст кнопки, и свойство url , содержащее URL-адрес ссылки. Текст кнопки не может вводить в заблуждение и проверяется в процессе проверки. |
Образец кода
В следующих фрагментах показано, как реализовать карточку таблицы:
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."
}
}
}
}
Настройка ответов
Вы можете изменить внешний вид расширенных ответов, создав собственную тему для своего проекта Actions. Эта настройка может быть полезна для определения уникального внешнего вида беседы, когда пользователи вызывают ваши действия на поверхности с экраном.
Чтобы установить пользовательскую тему ответа, сделайте следующее:
- В консоли действий выберите «Разработка» > «Настройка темы» .
- Установите любой или все из следующих параметров:
- Цвет фона : используется в качестве фона ваших карточек. В общем, используйте светлый цвет для фона, чтобы облегчить чтение содержимого карточки.
- Основной цвет : основной цвет для текста заголовков карточек и элементов интерфейса. В общем, используйте более темный основной цвет, чтобы лучше контрастировать с фоновым цветом.
- Семейство шрифтов : описывает тип шрифта, используемый для заголовков и других заметных текстовых элементов.
- Стиль угла изображения : изменяет внешний вид углов ваших карт.
- Фоновое изображение . Пользовательское изображение для использования вместо цвета фона. Предоставьте два разных изображения, когда устройство Surface находится в альбомном или портретном режиме. Если вы используете фоновое изображение, основным цветом будет белый.
- Нажмите Сохранить .
