HTML-виджеты в Telegram. Веб-страница в чате

Бот в Telegram теперь может прислать маленькую веб-страницу. Внутри сообщения работают кнопки, анимация и JavaScript. Бот может прислать целую игру, в которую играешь прямо в переписке.

Я первым делом запихнул в сообщение ту самую игру с башней. Пример простой, зато можно самому потыкать. Ниже её браузерная версия.

Telegram называет такие сообщения HTML-виджетами. Они появились в Bot API 10.4, который вышел 9 ноября 2026 года.

Что ещё положить в сообщение

Первое, что мне пришло в голову для LAB, это задачка после урока. Бот присылает несколько строчек кода и предлагает угадать результат. После ответа открывается разбор. Такую задачу можно решить по дороге домой, а объяснение останется в переписке.

Ещё я бы попробовал калькулятор стоимости для бота, который принимает заказы. Клиент выбирает количество и дополнительные опции, а в сообщении меняется цена. Можно прикинуть несколько вариантов перед заказом.

Это только первые идеи. Уверен, найдутся люди, которые запихнут в эти 4 КБ что-нибудь такое, что я буду долго разглядывать и пытаться понять, как оно вообще поместилось. После игры с падающими этажами особенно хочется посмотреть на чужие эксперименты.

Как башня влезла в 4 КБ

Игра с башней обходится без картинок. Программа рисует грани блоков и двигает верхний этаж. При промахе она отрезает выступающую часть и рисует её падение.

Отправленная в Telegram версия занимает 7 087 байт. После сжатия осталось 3 245 байт. В лимит поместились башня, счётчик, анимация и ещё 851 байт про запас.

Бот передаёт Telegram весь этот код одним запросом к Bot API. Приложение запускает игру на телефоне, где она и обрабатывает нажатия.

Telegram запускает виджет в изолированной среде. Скачать из интернета картинку, шрифт или дополнительный скрипт из неё нельзя. Если понадобится свежая информация, например статус доставки, виджет может попросить её у бота. Бот сходит в службу доставки и вернёт ответ в сообщение.

А боты разве раньше не умели HTML?

Умели, и на слове HTML здесь легко запутаться. Оформление текста в сообщении, Mini Apps и новые виджеты используют знакомые веб-разработчикам технологии, но выглядят и работают по-разному.

HTML в сообщениях бота

Если искать, как отправить HTML в Телеграме через бота, можно попасть на инструкции с параметром parse_mode: "HTML". Он оформляет текст знакомыми средствами Telegram. Например, выделяет цену жирным, добавляет ссылку, цитату или спойлер.

Кнопки у ботов тоже давно есть. Нажатие на «Добавить в заказ» отправляет команду боту, а тот обновляет сообщение или присылает ответ. Своя вёрстка и JavaScript в обычном HTML-тексте не работают.

Mini Apps внутри Telegram

Mini App открывает сайт отдельным экраном внутри Telegram. Здесь можно собрать каталог с фотографиями, корзину и форму доставки. Разработчик сам выбирает оформление и пишет логику на JavaScript.

Mini Apps поддерживают авторизацию Telegram и платежи, поэтому подходят для магазинов, личных кабинетов и бронирования. Для игр есть полноэкранный режим и доступ к датчикам движения на поддерживаемых устройствах. Приложение размещают на хостинге, откуда Telegram загружает его при открытии.

HTML-виджет прямо в переписке

У виджета свой интерфейс находится внутри сообщения. Бот присылает карточку пиццы вместе с кодом, который пересчитывает цену при выборе количества.

Весь виджет должен уместиться в 4 КБ после сжатия. Внешние картинки не загрузятся, а обычное поле ввода адреса Telegram уберёт. Калькулятор цены можно оставить в сообщении, а для оформления доставки открыть Mini App.

В канал пока не отправить

Я попробовал прислать игру себе в личку ещё 6 ноября. Обычный адрес Bot API вернул ошибку, зато на бета-адресе сообщение дошло. Уже хотел закинуть башню в канал, чтобы все поиграли, но Telegram не дал её переслать.

На старте HTML-виджеты доступны только в личных чатах с ботами. Telegram запрещает пересылку таких сообщений, поэтому для своего демо понадобится отдельный бот.

Как сделать HTML-виджет для Telegram с AI

Впиши в промпт, какой виджет хочешь получить и что должны делать его кнопки. Можно начать с одной карточки для вечеринки, которая по нажатию выбирает случайный вопрос из твоего списка.

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

1. Открой BotFather. Отправь команду /newbot, придумай имя и свободный юзернейм, который заканчивается на bot. В ответ получишь ссылку на своего бота и токен. @BotFather
2. Нажми «Старт» у своего бота. Бот пока не ответит, потому что у него ещё нет программы для обработки сообщений. Команда «Старт» нужна агенту, чтобы найти ваш чат.
3. Собери виджет. Скопируй промпт под этой инструкцией, впиши свою задумку в блок «Моя идея» и отправь агенту. Он создаст HTML-файл с виджетом и подготовит локальный просмотр в браузере.
4. Проверь демо. Открой ссылку, которую даст агент. Проверь кнопки и попроси поправить то, что не понравилось. Когда результат устроит, переходи к отправке в Telegram.
5. Отправь себе результат. Попроси агента подготовить запуск с токеном в переменной окружения TELEGRAM_BOT_TOKEN. Он даст команду, а ты введёшь токен локально в терминале. Подтверди отправку и проверь виджет в личке с ботом.

Токен даёт доступ к управлению ботом. Если отправить его модельке в чат, он может остаться в истории или логах. В промпт уже заложен скрытый ввод в терминале. Если токен засветился, перевыпусти его через BotFather.

Собери HTML-виджет для сообщения в Telegram.

Моя идея
[Опиши, что человек увидит, куда нажмёт и что должно произойти.]

Проверь актуальные требования в https://core.telegram.org/bots/widgets. Сделай один HTML-файл с CSS и JavaScript внутри. Уложись в 32 768 байт исходника и 4 096 байт после zlib на уровне 9. Все ресурсы должны быть внутри файла.

Открой демо в браузере, проверь его на ширине 320 px и дай мне попробовать. После моих правок подготовь отправку в личку с новым ботом. Я зарегистрирую его в BotFather и нажму «Старт».

Токен читай из TELEGRAM_BOT_TOKEN. Подготовь команду для моей системы, чтобы я ввёл токен скрыто в локальном терминале и передал его скрипту через переменную окружения. Токен должен оставаться вне чата, файлов проекта и логов.

Найди мой чат по команде /start, покажи получателя и попроси подтвердить отправку. Затем отправь виджет и сообщи результат. Если получишь ошибку, объясни её простыми словами и помоги исправить.

Если хочется самому покопаться в коде, у Telegram есть примеры и описание возможностей виджетов. Документация Telegram Widgets