Элементы интерфейса смартапов
Элементы интерфейса из массива items
сообщения ANSWER_TO_USER
.
Смартапы могут передавать ассистенту следующие элементы интерфейса:
bubble
— текст;card
— карточка.
Ассистент отображает элементы интерфейса в порядке, в котором они расположены в массиве items
.
bubble
Пример:
{
"bubble": {
"text": "*Привет всем*",
"markdown": true,
"expand_policy": "auto_expand"
}
}
Текст передается в объекте bubble
, который может содержать следующие поля:
Поле | Описание | |
---|---|---|
text |
Текст, который отобразит ассистент. Максимальная длина: не более 250 символов. | |
markdown |
Указывает, что текст содержит маркдаун-разметку, которую необходимо обработать. Если поле отсутствует, применяется значение | |
expand_policy |
Поведение шторки ассистента. Параметр актуален при работе с ассистентом на наших устройствах.
По умолчанию |
card
Карточки помогают смартапам организовать сложную информацию на экране ассистента. Внешний вид карточек отличается в зависимости от типа смартапа (Chat App или Canvas App), а также в зависимости от типа поверхности (SberBox, SberPortal или приложение Салют).
note
Карточки недоступны в проектах SmartBot.
Карточки бывают следующих типов:
Ниже приводятся JSON-схемы карточек с примерами.
Карточки передаются в объектах card
. Следующие поля присутствуют в карточках любого типа:
Поле | Описание | |
---|---|---|
paddings |
| |
can_be_disabled |
Указывает что карточка может отображаться как отключённая. По умолчанию | |
Обязательное |
Тип карточки, который определяет наличие различных полей в объекте Возможные значения:
|
gallery_card
gallery_card
Горизонтальная галерея.
Пример отображения вертикальной галереи:
Пример отображения горизонтальной галереи:
{
"card": {
"type": "gallery_card",
"items": [
{
"type": "media_gallery_item",
"image": {
"url": "https://thumbs.dfs.ivi.ru/storage31/contents/8/e/010ea0147875e28b91ef1ff01cd042.jpg",
"size": {
"width": "medium",
"aspect_ratio": 1.42
}
},
"margins": {
"top": "4x",
"left": "6x",
"right": "6x",
"bottom": "5x"
},
"bottom_text": {
"text": "2019 г. ‧ Комедия/Драма",
"typeface": "caption",
"text_color": "secondary",
"max_lines": 1,
"margins": {
"top": "2x"
}
},
"top_text": {
"text": "Однажды в Голливуде",
"typeface": "footnote1",
"text_color": "default",
"max_lines": 2
}
}
]
}
}
Поле | Описание | ||
---|---|---|---|
Обязательное |
Ячейки карточки. Минимум 1 ячейка. | ||
Обязательное |
Тип ячейки. Возможное значение:
| ||
image |
Поле обязательно для ячеек с типом | ||
|
| ||
|
Параметры текста под изображением или под кнопкой Все результаты. Поле обязательно для ячеек с типом | ||
|
Иконка кнопки. Поле обязательно для ячеек с типом | ||
paddings |
| ||
actions |
Массив объектов, описывающих действия. Поле обязательно для ячеек с типом |
list_card
list_card
Карточки с вертикальным списком ячеек.
{
"card": {
"type": "list_card",
"cells": [
{
"type": "text_cell_view",
"content": {
"text": "200 гонконгских долларов 🇭🇰",
"typeface": "headline3",
"text_color": "default",
"max_lines": 0
},
"paddings": {
"left": "8x",
"top": "10x",
"right": "8x"
}
},
{
"type": "text_cell_view",
"content": {
"text": "1 663 ₽",
"typeface": "headline1",
"text_color": "default",
"max_lines": 0
},
"paddings": {
"left": "8x",
"top": "9x",
"right": "8x"
}
},
{
"type": "text_cell_view",
"content": {
"text": "При покупке от 500 до 1 000 HKD\n100 HKD = 6,36 RUB\nСберБанк Онлайн сейчас",
"typeface": "footnote1",
"text_color": "secondary",
"max_lines": 0
},
"paddings": {
"left": "8x",
"top": "10x",
"right": "8x"
}
},
{
"type": "button_cell_view",
"content": {
"text": "Купить",
"typeface": "button1",
"style": "default",
"type": "accept",
"actions": [
{
"type": "text",
"text": "Купить"
}
],
"margins": {
"left": "10x",
"top": "5x",
"right": "10x",
"bottom": "5x"
}
},
"paddings": {
"left": "6x",
"top": "12x",
"right": "6x",
"bottom": "8x"
}
}
]
}
}
Пример карточки с ячейками типа 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": "Вы нажали на карточку"
}
]
}
]
}
}
Поле | Описание | ||
---|---|---|---|
Обязательное |
Список ячеек карточки. | ||
Обязательное |
Тип ячейки, от которого зависит её наполнение. Возможное значение:
| ||
|
Левый элемент ячейки. Содержит обязательное поле
Для
Для
| ||
|
Правый элемент ячейки. Содержит следующие поля:
Если элемент ячейки задан как | ||
|
| ||
Обязательное |
Содержимое ячейки, которое зависит от её типа:
Поле присутствует только в приведённых в списке ячейках. | ||
|
Разделитель — тонкая полоска, разделяющая ячейки. Применяется только в ячейках типа Содержит следующие поля:
| ||
actions |
Массив объектов, описывающих действия. Применяется только в ячейках типа | ||
Обязательное |
Поле актуально только для ячеек с типом Содержит массив объектов, каждый из которых описывает вертикальный упорядоченный блок. Минимальное количество элементов в массиве — 1. Объекты массива содержат следующие поля:
|
Параметры карточек
Текст
Поле | Описание | |||
---|---|---|---|---|
Обязательное |
Текст, который необходимо отобразить. Минимальная длина текста 1 символ. | |||
Обязательное |
Стиль текста. Посмотреть примеры отображения стилей можно в документации дизайн-системы Plasma. Возможные значения:
| |||
Обязательное |
Цвет текста. Возможные значения:
| |||
margins |
| |||
max_lines |
Максимальное количество строк. По умолчанию 1. Значение 0 указывает на неограниченное количество строк. | |||
actions |
Массив объектов, описывающих действия. |
Отступы
Поле | Описание |
---|---|
left |
Размер отступа. Возможные значения:
Значение по умолчанию |
top |
Размер отступа. Возможные значения:
Значение по умолчанию |
right |
Размер отступа. Возможные значения:
Значение по умолчанию |
bottom |
Размер отступа. Возможные значения:
Значение по умолчанию |
Изображение
Поле | Описание | |||
---|---|---|---|---|
Обязательное |
Адрес изображения. | |||
hash |
Хэш изображения. | |||
placeholder |
Заглушка, которая отображается, если изображения нет или оно невалидно. | |||
scale_mode |
Режим растягивания содержимого. Возможные значения:
| |||
height |
Высота контейнера изображения, выраженная в независящих от платформы единицах. Поле игнорируется, если присутствует поле По умолчанию 192. | |||
placeholder_color |
Цвет фона. Возможные значения:
| |||
actions |
Массив объектов, описывающих действия. | |||
size |
Размер изображения. | |||
Обязательное |
Ширина содержимого в терминах сеток. Возможные значения:
| |||
Обязательное |
Отношение высоты содержимого к ширине. |
Погодные данные
Пример массива content
ячейки weather_cell_view
:
{
"type": "weather_cell_view",
"content": [
{
"weekday": "Понедельник",
"date": "15 сентября",
"day": "+5°",
"night": "-5°",
"icon": {
"address": {
"type": "url",
"url": "https://example.ru/example.png"
},
"size": {
"width": "small",
"height": "small"
}
}
},
{
"weekday": "Вторник",
"date": "16 сентября",
"day": "+23°",
"night": "+12°",
"icon": {
"address": {
"type": "url",
"url": "https://example.ru/example.png"
},
"size": {
"width": "small",
"height": "small"
}
}
}
],
"paddings": {
"top": "8x"
}
}
Поле | Описание |
Обязательное |
День недели |
Обязательное |
Дата |
Обязательное |
Погода днем |
Обязательное |
Погода ночью |
Обязательное |
Параметры иконки |
Обязательное |
Путь к иконке |
Обязательное |
Размер иконки |
Обязательное |
Ширина иконки.
|
Обязательное |
Высота иконки.
|
Кнопки в ячейках
Пример массива content
ячейки button_cell_view
:
{
"type": "button_cell_view",
"content": {
"text": "Согласен",
"typeface": "button1",
"style": "default",
"type": "accept",
"actions": [
{
"type": "text",
"text": "Согласен"
}
],
"margins": {
"top": "4x",
"bottom": "4x"
}
},
"paddings": {
"top": "9x"
}
}
Поле | Описание |
Обязательное |
Название кнопки |
Обязательное |
Стиль текста. Возможные значения:
|
|
Стиль кнопки. Возможные значения |
|
Тип кнопки. Возможные значения:
Значение по умолчанию |
actions Обязательное |
Массив объектов, описывающих действия. |
margins |
|
Примеры карточек
В разделе содержатся примеры функциональности разработанной с помощью карточек.
Получение согласия пользователей
{
"card": {
"type": "list_card",
"paddings": {
"left": "9x",
"top": "9x",
"right": "9x",
"bottom": "9x"
},
"cells": [
{
"type": "left_right_cell_view",
"left": {
"type": "simple_left_view",
"texts": {
"title": {
"text": "Согласие на обработку персональных данных",
"typeface": "headline3",
"text_color": "default",
"max_lines": 0
},
"subtitle": {
"text": "Я соглашаюсь с условиями и подписываю Согласие на обработку персональных данных",
"typeface": "footnote1",
"text_color": "brand",
"max_lines": 0,
"margins": {
"top": "5x"
},
"actions": [
{
"type": "deep_link",
"deep_link": "https://sber.ru/salute/salute_consent_app.pdf"
}
]
}
}
}
},
{
"type": "button_cell_view",
"content": {
"text": "Согласен",
"typeface": "button1",
"style": "default",
"type": "accept",
"actions": [
{
"type": "text",
"text": "Согласен"
}
],
"margins": {
"top": "4x",
"bottom": "4x"
}
},
"paddings": {
"top": "9x"
}
}
]
}
}
Курсы драгоценных металлов
{
"card": {
"type": "list_card",
"paddings": {
"left": "8x",
"right": "8x"
},
"cells": [
{
"type": "text_cell_view",
"content": {
"text": "Золото, 1 г",
"typeface": "headline3",
"text_color": "default",
"max_lines": 0
},
"paddings": {
"top": "10x"
}
},
{
"type": "text_cell_view",
"content": {
"text": "Купить",
"typeface": "body1",
"text_color": "secondary",
"max_lines": 0
},
"paddings": {
"top": "9x"
}
},
{
"type": "text_cell_view",
"content": {
"text": "4 932,00 ₽",
"typeface": "headline1",
"text_color": "default",
"max_lines": 0
},
"paddings": {
"top": "2x"
}
},
{
"type": "text_cell_view",
"content": {
"text": "Продать",
"typeface": "body1",
"text_color": "secondary",
"max_lines": 0
},
"paddings": {
"top": "8x"
}
},
{
"type": "text_cell_view",
"content": {
"text": "4 542,00 ₽",
"typeface": "headline1",
"text_color": "default",
"max_lines": 0
},
"paddings": {
"top": "2x"
}
},
{
"type": "text_cell_view",
"content": {
"text": "4 916,00 при покупке от 50 г\n4 558,00 при продаже от 50 г\nСберБанк Онлайн сейчас",
"typeface": "footnote1",
"text_color": "secondary",
"max_lines": 0
},
"paddings": {
"top": "10x",
"bottom": "8x"
}
}
]
}
}
Подтверждение действия
{
"card": {
"type": "list_card",
"paddings": {
"bottom": "8x",
"top": "8x"
},
"cells": [
{
"type": "left_right_cell_view",
"paddings": {
"left": "8x",
"right": "8x",
"top": "6x",
"bottom": "6x"
},
"left": {
"type": "simple_left_view",
"icon": {
"address": {
"type": "local",
"identificator": "card"
},
"tint_color": "solid_brand",
"size": {
"width": "medium",
"height": "medium"
},
"margins": {
"right": "6x"
}
},
"icon_vertical_gravity": "center",
"texts": {
"title": {
"text": "Платежная система",
"typeface": "footnote1",
"text_color": "secondary",
"max_lines": 0
},
"subtitle": {
"text": "Visa",
"typeface": "body1",
"text_color": "default",
"margins": {
"top": "1x"
}
}
}
},
"right": {
"type": "detail_right_view",
"detail": {
"text": "Рубль",
"typeface": "body1",
"text_color": "default"
},
"vertical_gravity": "center"
},
"divider": {
"style": "default",
"size": "d5"
}
},
{
"type": "left_right_cell_view",
"paddings": {
"top": "6x",
"bottom": "6x",
"left": "8x",
"right": "8x"
},
"left": {
"type": "simple_left_view",
"icon": {
"address": {
"type": "local",
"identificator": "bell"
},
"tint_color": "solid_brand",
"size": {
"width": "medium",
"height": "medium"
},
"margins": {
"right": "6x"
}
},
"icon_vertical_gravity": "center",
"texts": {
"title": {
"text": "Счет карты",
"typeface": "footnote1",
"text_color": "secondary",
"max_lines": 0
},
"subtitle": {
"text": "Открыть новый",
"typeface": "body1",
"text_color": "default",
"margins": {
"top": "1x"
}
}
}
},
"divider": {
"style": "default",
"size": "d5"
}
},
{
"type": "left_right_cell_view",
"paddings": {
"top": "6x",
"bottom": "6x",
"left": "8x",
"right": "8x"
},
"left": {
"type": "simple_left_view",
"icon": {
"address": {
"type": "local",
"identificator": "bell"
},
"tint_color": "solid_brand",
"size": {
"width": "medium",
"height": "medium"
},
"margins": {
"right": "6x"
}
},
"icon_vertical_gravity": "center",
"texts": {
"title": {
"text": "Уведомления по карте",
"typeface": "footnote1",
"text_color": "secondary",
"max_lines": 0
},
"subtitle": {
"text": "Все списания и зачисления",
"typeface": "body1",
"text_color": "default",
"margins": {
"top": "1x"
}
},
"caption": {
"text": "Бесплатно или 60 ₽ в месяц",
"typeface": "footnote1",
"text_color": "secondary"
}
}
},
"divider": {
"style": "default",
"size": "d5"
}
},
{
"type": "left_right_cell_view",
"paddings": {
"top": "6x",
"bottom": "6x",
"left": "8x",
"right": "8x"
},
"left": {
"type": "simple_left_view",
"icon": {
"address": {
"type": "local",
"identificator": "user"
},
"tint_color": "solid_brand",
"size": {
"width": "medium",
"height": "medium"
},
"margins": {
"right": "6x"
}
},
"icon_vertical_gravity": "center",
"texts": {
"title": {
"text": "Имя и фамилия на карте",
"typeface": "footnote1",
"text_color": "secondary",
"max_lines": 0
},
"subtitle": {
"text": "IVAN IVANOV",
"typeface": "body1",
"text_color": "default",
"margins": {
"top": "1x"
}
}
}
}
},
{
"type": "text_cell_view",
"paddings": {
"top": "2x",
"bottom": "2x",
"left": "8x",
"right": "8x"
},
"content": {
"text": "Я соглашаюсь с условиями и подписываю документы по операции для получения дебетовой карты",
"max_lines": 0,
"typeface": "footnote1",
"text_color": "default"
}
},
{
"type": "button_cell_view",
"content": {
"text": "Согласиться и подтвердить",
"typeface": "button1",
"style": "default",
"type": "accept",
"actions": [
{
"type": "text",
"text": "Согласился и подтвердил"
}
],
"margins": {
"left": "10x",
"top": "5x",
"right": "10x",
"bottom": "5x"
}
},
"paddings": {
"top": "6x",
"left": "8x",
"right": "8x"
}
}
]
}
}
Горизонтальная галерея результатов поиска
Данный пример работает только на устройствах.
{
"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"
}
}
}
}
Заметили ошибку?
Выделите текст и нажмите Ctrl
+ Enter
, чтобы сообщить нам о ней