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

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

Обновлено 10 марта 2025

Используя блок 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);

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

{
  "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 в настройках своего браузера.