ym88659208ym87991671
Создаем карточки на JavaScript | Документация для разработчиков

Создаем карточки на JavaScript

Обновлено 10 января 2024

Используя блок 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": "Текст, который отправится при нажатии ячейки"
}
},
{
"title": "Заголовок ячейки 2",
"subtitle": "Описание ячейки 2",
"value": "Значение, которое отображается в правой части ячейки 2. Рекомендуемая длина менее 5 символов.",
"iconUrl": "https://example.ru/images/image.png",
"hash": "3a74d5abfc671f47e45d336ed4d41026",
"action": {
"then": "состояниеСмартапа",
}
}
],
"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);

Ответ ассистента в виде прокручиваемой галереи карточек.

{
"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
}
]
}
]
}

Пример галереи карточек:

Карточка с горизонтальной галереей результатов поиска

Смотрите также

ПАО Сбербанк использует cookie для персонализации сервисов и удобства пользователей.
Вы можете запретить сохранение cookie в настройках своего браузера.