В Telegram появились HTML-виджеты (HTMLBubbles) – интерактивные элементы, отображающиеся непосредственно внутри обычных сообщений. Теперь боты могут отправлять пользователям не только текст, фотки и кнопки, но и небольшие приложения с собственным интерфейсом.
Нововведение стало частью Telegram Bot API 10.4, выпущенного 9 ноября 2026 года. Разбираемся, как работают HTML-виджеты в Telegram. Что с их помощью можно делать и какие ограничения пока существуют.
Как создать юзернейм в Telegram
Что такое HTML-виджеты в Telegram и как они работают
HTMLBubbles – это небольшие интерактивные приложения, которые отображаются прямо внутри сообщения – в привычном интерфейсе переписки. Для их работы не нужно открывать браузер или переходить в отдельное мини-приложение.
По сути, бот отправляет пользователю HTML-документ с CSS и JavaScript. Telegram отображает его как часть сообщения и запускает код в специальной изолированной среде.
Главное отличие от обычных сообщений – возможность взаимодействовать с содержимым. Пользователь может нажимать кнопки, вводить данные, выбирать варианты ответа и наблюдать за изменениями интерфейса.
При этом HTML-виджет состоит из двух частей:
Код: HTML-разметка, стили и JavaScript. Они задаются при отправке и впоследствии не меняются.
Состояние: данные, которые бот может обновлять. Например, результаты голосования, количество очков или текущую цену товара.
Благодаря этому содержимое виджета может обновляться без отправки новых сообщений. Пользователь продолжает взаимодействовать с тем же элементом переписки, а бот меняет его данные в фоновом режиме.
Какие виджеты можно запускать прямо внутри чатов
Интерактивные сообщения в Telegram подходят для легких приложух, которым не требуется полноценный браузер или сложная серверная инфраструктура. Среди возможных сценариев использования:
Игры. Крестики-нолики, викторины, простые аркады, игры на реакцию и соревнования с таблицей рекордов.
Опросы. Интерактивные голосования с вариантами ответов и обновлением результатов.
Калькуляторы. Расчет стоимости заказа, скидок, платежей или других показателей на основе введенных пользователем значений.
Формы. Заявки на мероприятие, предварительный заказ, выбор времени встречи.
Информационные панели. Котировки, счетчики, статус заказа и другие показатели, которые могут меняться.
Например, бот магазина может отправить виджет для расчета стоимости покупки. Пользователь выбирает товары и количество, а итоговая сумма пересчитывается прямо в сообщении.
В игровом боте можно реализовать небольшую игру с очками и таблицей лидеров. При этом серверная часть будет хранить результаты, а виджет – отображать актуальное состояние.
Что нового появилось в Telegram Bot API 10.4
До обновления разработчики уже экспериментировали с HTMLBubbles через низкоуровневый протокол MTProto. Однако полноценного публичного инструментария в Bot API не было.
Версия Telegram Bot API 10.4 добавила официальные методы и объекты для работы с виджетами.
Основные нововведения:
sendWidget – отправка HTML-виджета пользователю.
sendSharedWidget – повторная отправка ранее созданного общего виджета.
answerWidgetQuery – обработка запросов, поступающих из виджета.
editMessageWidgetData – изменение данных конкретного виджета в сообщении.
editSharedWidgetData – обновление общего состояния виджета, используемого в нескольких сообщениях.
Также появились новые типы обновлений widget_query и shared_widget_query. С их помощью бот получает инфу о действиях пользователя.
Важное изменение – возможность обновлять содержимое без создания нового сообщения. Например, после голосования бот может изменить состояние виджета и показать новые результаты на том же месте.
Для разрабов это означает, что интерактивные сообщения теперь можно создавать с использованием официального Bot API, а не экспериментальных решений на базе MTProto.
Чем HTML-виджеты отличаются от мини-приложений Telegram
HTMLBubbles и Telegram Mini Apps используют веб-технологии, но предназначены для разных задач.
Mini Apps – полноценные веб-приложения, которые открываются в отдельном интерфейсе внутри Telegram. Они могут обращаться к внешним серверам, загружать библиотеки и реализовывать сложные пользовательские сценарии.
HTML-виджеты работают непосредственно внутри сообщения и имеют гораздо более строгие ограничения.
| Критерий | HTML-виджеты | Mini Apps |
|---|---|---|
| Отображение | Внутри сообщения | В отдельном окне Telegram |
| Запуск | Через сообщение бота | Через кнопку, меню или ссылку |
| JavaScript | В изолированной среде QuickJS | В браузерном окружении |
| Доступ к интернету | Отсутствует прямой доступ | Есть |
| Сложность приложений | Небольшие интерактивные инструменты | Полноценные веб-приложения |
| Обновление данных | Через бота и API | Через приложение и сервер |
Таким образом, виджеты в Telegram не заменяют Mini Apps. Они позволяют реализовать простые функции без необходимости открывать дополнительный интерфейс.
Как создавать и отправлять HTML-виджеты в Telegram
Для создания HTML-виджета разработчику понадобятся бот и HTML-документ с CSS и JavaScript. Отдельный сайт для размещения приложения не требуется: код передается непосредственно Telegram через Bot API.
Общий порядок работы:
Создать бота через BotFather и подготовить HTML-разметку будущего виджета.
Добавить стили и JavaScript для обработки действий пользователя.
Использовать метод sendWidget, передав идентификатор чата и HTML-код.
Настроить обработку запросов widget_query, чтобы бот получал действия пользователя.
Возвращать ответы через answerWidgetQuery и при необходимости обновлять состояние с помощью editMessageWidgetData.
Для взаимодействия с ботом предусмотрен специальный объект TelegramWidget. Он позволяет отправлять запросы, получать данные и работать с параметрами интерфейса Telegram.
Например, при нажатии кнопки в калькуляторе виджет может передать боту выбранные значения. Бот обработает запрос, рассчитает результат и обновит состояние сообщения.
Какие ограничения есть у HTML-виджетов
Несмотря на использование HTML и JavaScript, запускать внутри сообщений Telegram любые сайты и веб-приложения не получится. Виджеты работают в специально ограниченной среде.
Основные технические ограничения:
Размер: HTML-документ не должен превышать 32 КБ, а после сжатия – 4 КБ.
JavaScript: используется изолированная среда QuickJS. Поддерживается не весь набор возможностей обычного браузера.
Интернет: отсутствует прямой доступ к сети. Нельзя использовать fetch, XMLHttpRequest и WebSocket.
Внешние ресурсы: нельзя загружать сторонние скрипты, стили, шрифты и изображения по URL.
Размер интерфейса: максимальная высота виджета составляет 600 пикселей. Внутренняя прокрутка не поддерживается.
Изменение кода: после отправки HTML-разметку нельзя заменить. Можно обновлять только состояние приложения.
Есть и ограничения доступности. На момент выхода Bot API 10.4 в рабочей среде виджеты можно отправлять только в личные чаты пользователей с ботами. Поддержка групп, каналов и отправки через inline-режим пока не является полноценной публичной возможностью: соответствующие сценарии доступны на тестовом сервере.
Кроме того, отправленные виджеты автоматически получают защиту содержимого и не могут пересылаться обычным способом.
Когда виджеты появятся во всех чатах Telegram
На момент выхода Telegram Bot API 10.4 HTMLBubbles уже доступны разрабам через официальный интерфейс программирования ботов. Однако рассчитывать на полноценную работу во всех типах переписок пока рано.
Сейчас сценарий использования один – взаимодействие пользователя с ботом в личном чате. Возможности для групповых переписок, каналов и inline-режима ограничены или доступны только в тестовой среде.
Для обычных пользователей появилось только это – боты получают возможность показывать небольшие приложения прямо в сообщениях. Не нужно переходить на сторонний сайт или открывать Mini App, чтобы проголосовать, сыграть в простую игру или воспользоваться калькулятором.
Для разрабов это новый способ создавать компактные интерактивные интерфейсы внутри Telegram. Если ограничения на размер и доступ к сети не мешают задаче, HTMLBubbles могут стать удобной альтернативой отдельным мини-приложениям.
В Телеграме появится лента рекомендаций – ее нашли в бете для macOS
Комментарии