ЦВЕТНЫЕ КНОПКИ И ЭМОДЗИ В TELEGRAM-БОТЕ: ПОЛНЫЙ РАЗБОР НОВОГО ОБНОВЛЕНИЯ

Как настроить окрашивание inline-кнопок и добавить анимированные Premium-эмодзи через HTTP-блок на платформе Watbot — без кода, за 15 минут

Что изменилось в Telegram

Долгое время inline-кнопки в Telegram выглядели одинаково: серые прямоугольники с текстом. Функциональность была, а визуального управления вниманием — нет. Новое обновление мессенджера это исправляет: каждой кнопке теперь можно задать цвет и добавить эмодзи.

На момент выхода обновления доступны три цвета:

Зелёный — для позитивных целевых действий: оплатить, записаться, далее
Красный — для деструктивных или критически важных: отмена, удаление, предупреждение
Синий — для нейтральной навигации: меню, разделы, справка

Параллельно появилась возможность прикреплять эмодзи по их Telegram-ID — как стандартные, так и анимированные Premium-стикеры. Важный момент: анимация воспроизводится у всех пользователей бота, независимо от того, есть ли у них подписка Telegram Premium.

Как реализовать это на платформе Watbot

Watbot позволяет строить сценарии ботов без программирования. Для работы с Telegram Bot API используется блок «HTTP-запрос» — универсальный инструмент вызова внешних API. Именно он понадобится для всего, что описано ниже.

Шаг 1. Создание бота и подключение Telegram

Зайдите на платформу Watbot и нажмите «Создать»
Придумайте название боту — например, «Мой магазин»
В разделе подключения мессенджеров вставьте API-токен бота, полученный через @BotFather
Нажмите «Сохранить»

Совет: чтобы не вводить токен каждый раз вручную, сохраните его в глобальную переменную. Откройте «Списки» → «Глобальные переменные» → «Создать», назовите переменную token и вставьте туда значение токена. Теперь везде в HTTP-блоке можно писать {{token}} — платформа подставит значение автоматически.

Шаг 2. Базовая отправка сообщения

Добавьте блок «HTTP-запрос» в сценарий и соедините его со стартовым блоком.

Заполните поля:

URL:

https://api.telegram.org/bot{{token}}/sendMessage

Метод: POST

Параметры:

chat_id={{telegram_id}}&text=Привет! Это платформа Watbot.

Переменная {{telegram_id}} — встроенная переменная Watbot, содержащая ID чата пользователя, запустившего бота. Сохраните сценарий, перейдите в Telegram, нажмите /start — сообщение придёт мгновенно.

Шаг 3. Добавление inline-кнопок

Inline-кнопки добавляются через параметр reply_markup и отображаются прямо под сообщением. Дополните строку параметров:

&reply_markup={"inline_keyboard":[[{"text":"Привет","callback_data":"hello"},{"text":"Задачи","callback_data":"tasks"},{"text":"Меню","callback_data":"menu"}]]}

Структура: inline_keyboard — массив строк кнопок. Каждая строка — массив объектов. Каждый объект содержит text (надпись на кнопке) и callback_data (данные, которые бот получит при нажатии). Несколько вложенных массивов — несколько строк кнопок.

⚠️ Важно: каждая лишняя или пропущенная скобка, кавычка или запятая делает запрос невалидным — Telegram отклонит его, и сообщение не придёт. Перед вставкой проверяйте JSON в онлайн-валидаторе.

Окрашивание кнопок: параметр style

Теперь — главное новшество обновления. В объект каждой кнопки добавляется новое поле style. Именно оно отвечает за цвет. На данный момент доступны три значения:

"success" — зелёный цвет
"danger" — красный цвет
"primary" — синий цвет

Чтобы окрасить кнопку, просто добавьте поле style в объект кнопки рядом с text и callback_data через запятую. Вот как выглядит зелёная кнопка:

{"text":"Оплатить","callback_data":"pay","style":"success"}

Вот как выглядит красная:

{"text":"Отменить","callback_data":"cancel","style":"danger"}

И синяя:

{"text":"Меню","callback_data":"menu","style":"primary"}

Полный пример трёх кнопок разных цветов в одной строке выглядит так:

&reply_markup={"inline_keyboard":[[{"text":"Привет","callback_data":"hello","style":"success"},{"text":"Задачи","callback_data":"tasks","style":"danger"},{"text":"Меню","callback_data":"menu","style":"primary"}]]}

Сохраните, перезапустите бота — и под сообщением появятся три цветные кнопки. Зелёная, красная и синяя.

Теперь о том, как использовать цвет грамотно. Не стоит красить все кнопки сразу в разные цвета просто ради эффекта — это рябит и сбивает пользователя с толку. Цвет должен нести смысл. Зелёным выделяйте одно главное целевое действие: «Оплатить», «Записаться», «Получить». Пользователь сразу видит, куда нажимать. Красным отмечайте кнопки, за которыми стоит необратимое или важное действие: «Отменить заказ», «Удалить аккаунт», «Выйти». Человек инстинктивно воспринимает красный как сигнал осторожности. Синий подходит для нейтральной навигации: разделы, справка, главное меню.

Правило простое: один зелёный акцент в наборе кнопок работает в разы сильнее, чем три кнопки трёх разных цветов одновременно.

Добавление эмодзи: параметр icon_custom_emoji_id

Второй новый параметр — icon_custom_emoji_id. Он позволяет добавить эмодзи прямо на кнопку — рядом с текстом. Принимает числовой ID эмодзи из Telegram.

Поддерживаются как обычные стандартные эмодзи, так и анимированные Premium-стикеры. Это особенно важно: если у вас есть Telegram Premium, вы можете добавлять на кнопки анимированные стикеры из своих стикерпаков. И анимация будет работать у всех пользователей вашего бота — независимо от того, есть у них Premium или нет. Это моментально делает интерфейс бота живым и нестандартным.

Как узнать ID эмодзи

Для этого существует специальный бот в Telegram — @getidsbot. Принцип работы простой:

Откройте чат с ботом @getidsbot
Отправьте ему любой эмодзи — обычный или Premium-анимированный
Бот немедленно ответит сообщением, в котором будет ID этого эмодзи — длинное число
Скопируйте это число

Теперь вставьте ID в параметр icon_custom_emoji_id внутри объекта кнопки. Вот как выглядит кнопка с цветом и эмодзи одновременно:

{"text":"Привет","callback_data":"hello","style":"success","icon_custom_emoji_id":"5368324170671202286"}

Полный пример трёх кнопок с цветами и эмодзи:

&reply_markup={"inline_keyboard":[[{"text":"Привет","callback_data":"hello","style":"success","icon_custom_emoji_id":"ВАШ_ID"},{"text":"Задачи","callback_data":"tasks","style":"danger","icon_custom_emoji_id":"ВАШ_ID"},{"text":"Меню","callback_data":"menu","style":"primary","icon_custom_emoji_id":"ВАШ_ID"}]]}

Замените ВАШ_ID на реальные ID эмодзи, полученные через @getidsbot.

Один важный нюанс: иногда бот @getidsbot присылает ID в квадратных скобках — например, [5368324170671202286]. Перед вставкой в параметр обязательно удалите эти скобки и оставьте только само число. Скобки делают значение некорректным, и кнопка не отобразится правильно.

И ещё один момент по подбору эмодзи: следите за контрастом. Красный эмодзи на красной кнопке просто сливается с фоном и становится почти невидимым. Подбирайте эмодзи так, чтобы он был хорошо виден на фоне цвета кнопки.

Практические рекомендации

Несколько правил, которые помогут использовать цвета и эмодзи с пользой, а не просто для красоты.

Один зелёный акцент на набор кнопок — максимум. Если зелёных кнопок несколько, эффект выделения пропадает. Пользователь перестаёт понимать, что главное.

Красный цвет — только для деструктивных или необратимых действий. Не используйте его просто для разнообразия. Если пользователь видит красную кнопку, он должен понимать: за ней стоит что-то серьёзное.

Синий — нейтральный и универсальный. Подходит для любой навигационной кнопки, которая не требует особого внимания.

Два-три цвета в одном сценарии — это максимум. Если в боте больше, интерфейс начинает выглядеть хаотично и снижает конверсию.

Анимированные Premium-эмодзи используйте точечно — на самых важных кнопках. Движение притягивает взгляд. Если анимация везде, она перестаёт работать как акцент.

Итог

Цветные кнопки и эмодзи в Telegram-боте — это не просто косметика. Это инструмент, который напрямую влияет на поведение пользователя. Зелёная кнопка «Оплатить» конвертирует лучше серой — пользователь видит целевое действие с первого взгляда. Красная кнопка «Отменить» снижает количество случайных кликов. Анимированный эмодзи на кнопке «Получить бонус» увеличивает вовлечённость и делает бота запоминающимся.

Всё это настраивается в Watbot через один HTTP-блок — без кода, без серверов, буквально за 15 минут. Добавьте параметры style и icon_custom_emoji_id в объект нужных кнопок, и ваш бот сразу станет заметнее, понятнее и эффективнее.

Создайте своего бота на watbot.ru и попробуйте прямо сейчас.