Telegram Bot WebApp: как встроить веб-интерфейс в чат

Вы когда-нибудь открывали Telegram-бота и видели внутри него полноценный веб-интерфейс - кнопки, формы, карточки товаров, даже игрушки? Это не фокус, а Telegram Bot WebApp. Это возможность превратить простого бота в полноценное мини-приложение, которое работает прямо в чате. Никаких переходов на сайт, никаких скачиваний. Всё - внутри Telegram. И это уже не фича будущего. Это то, что используют крупные бренды, банки и сервисы прямо сейчас.

Что такое Telegram Bot WebApp

Telegram Bot WebApp - это веб-страница, которая загружается внутри Telegram-чата как встроенное окно. Она работает на HTML, CSS и JavaScript, но запускается не в браузере, а в самом приложении Telegram. Это не всплывающее окно. Это не iframe. Это полноценный интерфейс, который получает доступ к данным пользователя - имени, ID, даже местоположению, если разрешено.

Представьте: вы пишете боту «Заказать пиццу». Вместо того чтобы отвечать текстом «Выберите размер: маленький, средний, большой», бот открывает веб-интерфейс с картинками пицц, кнопками добавления в корзину, полем для адреса и кнопкой оплаты. Вы выбираете, нажимаете - и заказ отправлен. Без выхода из чата. Без установки отдельного приложения. Это и есть WebApp.

Зачем это нужно

Почему компании переходят на WebApp вместо обычных сайтов или мобильных приложений?

• Нет необходимости скачивать отдельное приложение - пользователь уже в Telegram.
• Нет сложной регистрации - Telegram автоматически передаёт ID пользователя.
• Высокая конверсия - пользователь не уходит из чата, не теряет контекст.
• Быстрый запуск - вы можете запустить WebApp за день, а не за месяц, как мобильное приложение.

Компании в России уже используют это: Сбербанк - для оплаты счетов, Яндекс.Еда - для заказа еды, Ozon - для выбора товаров. Даже небольшие магазины в Telegram используют WebApp для продажи услуг: запись на массаж, бронирование туров, оплата за курсы.

Как это работает технически

Всё начинается с бота. У вас уже есть бот в Telegram? Отлично. Теперь нужно добавить кнопку, которая открывает WebApp.

Вы создаёте кнопку вида:

{
  "text": "Открыть магазин",
  "web_app": {
    "url": "https://yourdomain.com/webapp"
  }
}

Когда пользователь нажимает кнопку, Telegram загружает вашу веб-страницу по указанному URL. Но тут начинается самое интересное: ваша страница получает доступ к объекту window.Telegram.WebApp. Это JavaScript-объект, который даёт вам всё, что нужно для работы:

• WebApp.initData - данные пользователя (ID, имя, фамилия, username).
• WebApp.themeParams - цветовая тема (светлая/тёмная), чтобы интерфейс сливался с Telegram.
• WebApp.sendData() - отправить данные обратно боту (например, выбор товара).
• WebApp.close() - закрыть веб-интерфейс.

Ваша страница может быть на React, Vue, или даже чистом HTML + JS. Главное - она должна быть доступна по HTTPS. Без SSL - не запустится.

Как создать WebApp за час

Вот простой способ начать прямо сейчас:

1. Создайте простую HTML-страницу с кнопкой «Отправить заказ».
2. Подключите скрипт Telegram: <script src="https://telegram.org/js/telegram-web-app.js"></script>.
3. Добавьте код для получения данных пользователя:

const webApp = window.Telegram.WebApp;
webApp.ready();

const userId = webApp.initDataUnsafe.user?.id;
const userName = webApp.initDataUnsafe.user?.first_name;

console.log('Пользователь:', userName, 'с ID:', userId);

4. Создайте кнопку, которая отправляет данные боту:

document.getElementById('send-btn').addEventListener('click', () => {
  webApp.sendData(JSON.stringify({ product: 'pizza', size: 'large' }));
});

5. Загрузите эту страницу на хостинг (например, Vercel, Netlify, или даже GitHub Pages).
6. Настройте бота через BotFather: добавьте кнопку с web_app и вашим URL.
7. Запустите бота - и проверьте, как открывается интерфейс.

Всё. За час у вас есть полноценное мини-приложение в Telegram. Никаких серверов, никаких сложных API. Только веб-страница и бот.

Что нельзя делать

WebApp - это мощный инструмент, но у него есть ограничения:

• Нельзя использовать localStorage - он не работает в WebApp. Вместо этого используйте WebApp.initData или отправляйте данные боту.
• Нельзя открывать новые вкладки - всё должно оставаться внутри Telegram.
• Нельзя использовать всплывающие окна (alert, confirm) - они не работают. Используйте кастомные модальные окна.
• Нельзя подключать сторонние скрипты без проверки - Telegram блокирует небезопасные ресурсы.

Также важно: ваша страница должна быть быстрой. Если она грузится дольше 3 секунд - пользователь закроет её и уйдёт. Оптимизируйте изображения, минифицируйте CSS и JS, используйте CDN.

Примеры реальных WebApp

Вот что уже работает в Telegram:

• Сбербанк - оплата счетов через WebApp: вы выбираете услугу, вводите сумму, нажимаете «Оплатить» - и всё происходит внутри чата.
• Яндекс.Еда - заказ еды: меню, корзина, адрес, оплата - всё в одном окне.
• Кинопоиск - выбор фильма, просмотр трейлеров, бронь билетов - без выхода из Telegram.
• Магазины одежды - каталог с фильтрами, корзина, оплата через Telegram Pay.

Даже небольшие предприниматели используют WebApp: юристы - для записи на консультацию, фитнес-тренеры - для выбора программы, курсы - для оплаты и доступа к материалам.

Как монетизировать WebApp

WebApp - это не просто удобство. Это канал продаж.

• Продажи товаров - через интеграцию с Telegram Pay или внешними платёжными системами (например, ЮMoney).
• Подписки - пользователь выбирает тариф, оплачивает - и получает доступ к контенту.
• Запись на услуги - календарь, выбор времени, оплата - всё в одном клике.
• Сбор данных - вы узнаёте, какие товары популярны, какие фильтры используются, где пользователи теряются - и улучшаете интерфейс.

Telegram Pay - это встроенный платёжный сервис. Вы не требуете от пользователя вводить карту. Он выбирает карту, которая уже привязана к его Telegram-аккаунту. Оплата проходит за 2 секунды. Это один из главных плюсов WebApp.

Что дальше

Telegram продолжает развивать WebApp. В 2025 году появились новые возможности:

• Поддержка WebApp 2.0 - более гибкая настройка интерфейса, включая кастомные заголовки и кнопки.
• Возможность запускать WebApp из уведомлений - пользователь получает push, нажимает - и попадает прямо в ваше приложение.
• Интеграция с Telegram Stars - можно принимать оплату в звёздах (виртуальная валюта Telegram).

Если вы ещё не используете WebApp - вы упускаете канал, где пользователь уже находится. Не нужно его мотивировать зайти на сайт. Не нужно убеждать скачать приложение. Он уже в чате. Осталось только предложить ему удобный интерфейс.