Элементы интерфейса смартапов
Элементы интерфейса из массива items
сообщения ANSWER_TO_USER
.
Смартапы могут передавать ассистенту следующие элементы интерфейса:
bubble
— текст;card
— карточка.
Ассистент отображает элементы интерфейса в порядке, в котором они расположены в массиве items
.
bubble
- Пример
- Описание
card
Карточки помогают смартапам организовать сложную информацию на экране ассистента. Внешний вид карточек отличается в зависимости от типа смартапа (Chat App или Canvas App), а также в зависимости от типа поверхности (SberBox, SberPortal или приложение Салют).
note
Карточки недоступны в проектах SmartBot.
Карточки бывают следующих типов:
Ниже приводятся JSON-схемы карточек с примерами.
Карточки передаются в объектах card
. Следующие поля присутствуют в карточках любого типа:
- Пример
- Описание
gallery_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": "Вы нажали на карточку"
}
]
}
]
}
}
Примеры карточек
В разделе содержатся примеры функциональности разработанной с помощью карточек.
Получение согласия пользователей
- Карточка в чате
- Код
{
"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
, чтобы сообщить нам о ней