Как создать массив кнопок
Структура массива
Для начала покажем логику структуры массива.
Возьмем самую простую кнопку с текстом "Кнопка"
Массив будет выглядеть вот так:
[
[
{
"label": "Кнопка",
"type": "text"
}
]
]
label - текст кнопки
type - тип кнопки
Первая и последняя закрывающая квадратная скоба обозначают строку, последующие столбец.
Например:
[[{"label":"Кнопка 1","type":"text"},{"label":"Кнопка 2","type":"text"}]] - две кнопки в строку
[[{"label":"Кнопка 1","type":"text"}],[{"label":"Кнопка 2","type":"text"}]] - две кнопки в столбик
Для удобства работы с массивами рекомендуем вам использовать любой визуальный редактор.
Например этот: https://jsonformatter.org/
Цвет кнопки
Цвет кнопки актуален только для кнопок ВКонтакте.
Но даже если он указан, но платформа его не поддерживает - ничего страшного. Платформа заменит цвет кнопки своим стандартным.
- primary - стандартный синий цвет
- secondary - серый цвет
- negative - красный цвет
- positive - зеленый цвет
Например: "color":"primary"
Payload
Payload - скрытые данные кнопки.
Т.е. любая информация, которую мы можем сохранить в кнопку, а затем использовать её в дальнейших действиях.
Например: "payload": "1500"
Payload поддерживает любые символы, но ограничен их весом.
Примерно не более 20 символов.
Разберем типы кнопок
В значение "type" записывается тип кнопки.
Например: "type":"text"
Всего их четыре вида:
- text - обычна кнопка с текстом
- url - кнопка с ссылкой
- app - кнопка, открывающая приложение ВК или WebApp Telegram
- request - кнопка с уникальным запросом: получить контакт, геолокацию, авторизацию и т.д. (зависит от платформы)
Кнопка с типом TEXT
Пример обычной кнопки с текстом:
[
[
{
"label": "Текст кнопки",
"type": "text",
"color": "primary",
"payload": "1"
}
]
]
Кнопка с типом URL
Для ссылок используется дополнительный параметр SPEC, который включает в себя как ссылку, так и параметр, отвечающий за сокращение ссылки.
"turn_off_event": true — без сокращения
"turn_off_event": false — с сокращением
Пример кнопки с ссылкой:
[
[
{
"label": "Ссылка",
"type": "url",
"spec": {
"url": "https://multy.ai/",
"turn_off_event": true
},
"payload": "1"
}
]
]
Кстати, на кнопку с ссылкой не распространяется цвет кнопки.
Кнопка с типом APP
Для кнопок с типом приложения дополнительно используется параметр SPEC, который включает в себя ссылку на приложение или сайт.
Пример кнопки с типом приложения:
[
[
{
"label": "Приложение",
"type": "app",
"color": "primary",
"spec": {
"url": "https://multy.ai"
},
"payload": ""
}
]
]
Кнопка с типом REQUEST
Для кнопок с типом запроса дополнительно используется параметр SPEC, который включает в себя объект и параметры.
Примеры возможных объектов:
- "object": "contact" — телефон
- "object": "location" — геолокация
- "object": "poll" — опрос
Параметры задаются при необходимости.
Например, чтобы задать тип опроса "Викторина" можно использовать соответствующий параметр:
"params": "{\"type\":\"quiz\"}" - только здесь кавычки необходимо экранировать с помощью \
Пример кнопки с типом запроса для отправки номера телефона в Telegram:
[
[
{
"label": "Телефон",
"type": "request",
"color": "primary",
"spec": {
"object": "contact",
"params": ""
},
"payload": ""
}
]
]