Элементы интерфейса из массива items сообщения ANSWER_TO_USER.
Смартапы могут передавать ассистенту следующие элементы интерфейса:
bubble— текст;card— карточка.
Ассистент отображает элементы интерфейса в порядке, в котором они расположены в массиве items.
bubble
- Пример
- Описание
card
Карточки помогают смартапам организовать сложную информацию на экране ассистента. Внешний вид карточек отличается в зависимости от типа смартапа (Chat App или Canvas App), а также в зависимости от типа поверхности (SberBox, SberPortal или приложение Салют).
Карточки недоступны в проектах SaluteBot.
Карточки бывают следующих типов:
Ниже приводятся JSON-схемы карточек с примерами.
Карточки передаются в объектах card.
Наличие пустого поля text в элементах карточки приведет к ее неисправности.
gallery_card
Карточки для отображения в галерее.
- Пример
- Описание
Пример отображения карточки в портретной ориентации:
Пример отображения карточки в горизонтальной ориентации:
list_card
Карточки с вертикальным списком ячеек.
- Пример
- Описание
Пример карточки с ячейками типа left_right_cell_view.
- Карточка в чате
- Код
{
"card": {
"type": "list_card",
"cells": [
{
"type": "left_right_cell_view",
"paddings": {
"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"left": {
"type": "simple_left_view",
"icon": {
"address": {
"type": "url",
"url": "https://cdn.sberdevices.ru/VA/icons/first_session/balance.png"
},
"size": {
"width": "medium",
"height": "medium"
},
"margins": {
"right": "6x"
}
},
"icon_vertical_gravity": "top",
"texts": {
"title": {
"text": "Покажи баланс моей карты",
"typeface": "headline2",
"text_color": "default",
"max_lines": 0
}
}
},
"right": {
"type": "detail_right_view",
"info_and_icon": {
"icon": {
"address": {
"type": "url",
"url": "https://cdn.sberdevices.ru/VA/icons/first_session/balance.png"
},
"size": {
"width": "xlarge",
"height": "xlarge"
},
"margins": {
"left": "8x",
"right": "12x"
}
}
}
},
"actions": [
{
"type": "text",
"text": "Вы нажали на карточку"
}
]
}
]
}
}
Примеры карточек
В разделе содержатся примеры функциональности разработанной с помощью карточек.
Получение согласия пользователей
Демо
Курс валют
Демо
Курсы драгоценных металлов
Демо
Подтверждение действия
Демо
Горизонтальная галерея результатов поиска
Данный пример работает только на устройствах.
- Карточка в чате
- Код
{
"card": {
"type": "gallery_card",
"items": [
{
"type": "gallery_search_content_item",
"actions": [
{
"type": "deep_link",
"deep_link": "https://sport-marafon.ru/catalog/zimnyaya-obuv/"
}
],
"width": "large",
"image": {
"type": "url",
"url": "https://cs5-2.4pda.to/6380085.png"
},
"title_text": {
"text": "Теплая замняя обувь - магазин СПОРТ-МАРАФОН",
"typeface": "body2",
"text_color": "default",
"max_lines": 2
},
"link_text": {
"text": "sport-marafon.ru/catalog/zimnyaya-obuv",
"typeface": "footnote1",
"text_color": "brand",
"max_lines": 1,
"margins": {
"top": "2x",
"bottom": "2x"
}
},
"description_text": {
"text": "Времена валенок ушли, нынешний ассортимент зимней обуви куда богаче. Так что же предлагается в современных магазинах зимней обуви? Попробуем разобраться.",
"typeface": "footnote1",
"text_color": "secondary",
"max_lines": 4,
"margins": {
"top": "2x"
}
},
"paddings": {
"top": "10x",
"left": "8x",
"right": "8x",
"bottom": "10x"
}
},
{
"type": "gallery_search_content_item",
"actions": [
{
"type": "deep_link",
"deep_link": "https://sport-marafon.ru/catalog/zimnyaya-obuv/"
}
],
"width": "large",
"title_text": {
"text": "СПОРТ-МАРАФОН",
"typeface": "body2",
"text_color": "default",
"max_lines": 2
},
"link_text": {
"text": "sport-marafon.ru/catalog/zimnyaya-obuv",
"typeface": "footnote1",
"text_color": "brand",
"max_lines": 1,
"margins": {
"top": "2x",
"bottom": "2x"
}
},
"description_text": {
"text": "Времена валенок ушли, нынешний ассортимент зимней обуви куда богаче. Так что же предлагается в современных магазинах зимней обуви? Попробуем разобраться.",
"typeface": "footnote1",
"text_color": "secondary",
"max_lines": 4,
"margins": {
"top": "2x"
}
},
"paddings": {
"top": "10x",
"left": "8x",
"right": "8x",
"bottom": "10x"
}
},
{
"type": "gallery_more_button_item",
"bottom_text": {
"text": "Все результаты",
"typeface": "caption",
"text_color": "primary",
"max_lines": 1,
"margins": {
"top": "4x"
}
},
"icon": {
"tint_color": "solid_white",
"address": {
"type": "local",
"identificator": "ellipsis"
},
"size": {
"width": "small",
"height": "small"
}
},
"actions": [
{
"type": "deep_link",
"deep_link": "https://sport-marafon.ru/catalog/obuv/"
}
]
}
],
"bottom_text": {
"text": "Результаты поиска bing",
"typeface": "caption",
"text_color": "secondary",
"max_lines": 1,
"margins": {
"top": "6x",
"left": "8x",
"bottom": "6x",
"right": "8x"
}
}
}
}