Создаем карточки на JavaScript
Используя блок JS код, вы можете предоставить ответ ассистента в виде карточки.
Карточки помогают смартапам организовать сложную информацию на экране ассистента. Внешний вид карточек отличается в зависимости от типа смартапа (Chat App или Canvas App), а также в зависимости от типа поверхности (SberBox, SberPortal или приложение Салют). Карточки недоступны в проектах SaluteBot.
Для отправки доступны четыре вида карточек:
card— простая карточка;cardList— карточка список ячеек;gallery_card— карточка галерея.
Больше примеров отображения и элементов каждого из типа крточек вы найдете в документации SmartApp API.
Отправка карточек
Отправка с помощью сообщений типа card и cardList
Для отправки карточек card и cardList нужно передать в массив $response.replies объект, описывающий карточку:
// Переменная, содержащая объект с описанием карточки
var reply = {
// Синтаксис карточки
};
// Инициализация массива
$response.replies = $response.replies || [];
// Отправка переменной в массив
$response.replies.push(reply);
Пустое поле text в элементах ведет к некорректной работе карточки.
Описание объекта card
Ответ ассистента в виде карточки.
- Пример
- Описание
{
"type": "card",
"title": "title",
"description": "descr",
"imageUrl": "веб-адрес изображения из раздела Контент",
"hash": "хэш картинки из раздела Контент",
"button": {
"text": "text",
"url": "url"
},
"auto_listening": false
}
Пример простой карточки:
Описание объекта cardList
Ответ ассистента в виде карточки со списком ячеек.
- Пример
- Описание
{
"type": "cardList",
"title": "Заголовок карточки",
"subtitle": "Описание",
"cells": [
{
"title": "Заголовок ячейки 1",
"subtitle": "Описание ячейки 1",
"value": "Значение, которое отображается в правой части ячейки 1. Рекомендуемая длина менее 5 символов.",
"iconUrl": "https://example.ru/images/image.png",
"hash": "3a74d5abfc671f47e45d336ed4d41026",
"action": {
"url": "Веб-адрес, который откроется при нажатии ячейки"
}
},
{
"title": "Заголовок ячейки 2",
"subtitle": "Описание ячейки 2",
"value": "Значение, которое отображается в правой части ячейки 2. Рекомендуемая длина менее 5 символов.",
"iconUrl": "https://example.ru/images/image.png",
"hash": "3a74d5abfc671f47e45d336ed4d41026",
"action": {
"text": "Текст, который отправится при нажатии ячейки"
}
},
],
"buttons": [
{
"text": "Название кнопки карточки",
"url": "Веб-адрес, который откроется при нажатии кнопки"
}
],
"auto_listening": false
}
Пример карточки отображения карточки со списком ячеек:
Отправка с помощью сообщения типа raw
Для отправки карточек gallery_card нужно передать в массив $response.replies сообщение типа raw:
// Переменная, содержащая объект с описанием карточки
var reply = {
"type":"raw", //тип сообщения
"body":{ ... }, // тело ответа
"messageName":"ANSWER_TO_USER" //опциональный параметр
};
// Инициализация массива
$response.replies = $response.replies || [];
// Отправка переменной в массив
$response.replies.push(reply);
Описание объекта gallery_card
Ответ ассистента в виде прокручиваемой галереи карточек.
- Пример
- Описание
{
"paddings": {
"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"can_be_disabled": false,
"type": "gallery_card",
"items": [
{
"type": "media_gallery_item",
"image": {
"url": "https://example.ru/storage31/contents/8/e/010ea0147875e28b91ef1ff01cd042.jpg",
"hash": "string",
"placeholder": "string",
"scale_mode": "scale_aspect_fill",
"height": 192,
"placeholder_color": "solid_black",
"actions": [
{}
],
"size": {
"width": "medium",
"aspect_ratio": 1.42
}
},
"top_text": {
"text": "Пример текста",
"typeface": "footnote1",
"text_color": "default",
"margins": {
"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"max_lines": 2,
"actions": [
{}
]
},
"bottom_text": {
"text": "Пример текста",
"typeface": "footnote1",
"text_color": "default",
"margins": {
"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"max_lines": 2,
"actions": [
{}
]
},
"icon": {
"address": {
"type": "url",
"url": "https://cdn.sberdevices.ru/VA/icons/first_session/balance.png"
},
"size": {
"width": "xlarge",
"height": "xlarge"
},
"margins": {
"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
}
},
"paddings": {
"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"actions": [
{
"type": "text",
"text": "Текст",
"should_send_to_backend": true
}
]
}
]
}
Пример галереи карточек:
