Telegram Mini App — что это, как работает и когда нужно клиенту

Клиент звонит и говорит: «Хочу приложение в Telegram». Раньше я сразу уточнял — бот или мобилка? Теперь есть третий вариант, и он часто оказывается лучшим.

Telegram Mini App — это полноценное веб-приложение, которое открывается прямо внутри мессенджера. Пользователь нажимает кнопку в боте, и вместо цепочки сообщений появляется привычный интерфейс с кнопками, формами, картинками — всё как на нормальном сайте.

Чем отличается от обычного бота

Обычный бот — это диалог. Команды, кнопки, текст. Работает отлично для линейных задач: уведомления, FAQ, простые формы. Но как только появляется что-то сложнее — корзина в магазине, расписание с фильтрами, дашборд с графиками — бот начинает тормозить UX.

Mini App — это HTML + CSS + JavaScript в отдельном окне поверх чата. Пользователь не покидает Telegram, но работает с полноценным интерфейсом. Telegram передаёт приложению данные о пользователе, тот может отправить данные обратно в бота.

Вот что умеет Mini App из коробки:

• Полноэкранный режим (tg.expand())
• Данные пользователя без авторизации: имя, ID, username
• Отправка данных в бота (tg.sendData())
• Нативные подтверждения (tg.showAlert(), tg.showConfirm())
• Кнопка «Назад» в шапке Telegram
• Адаптация под тему пользователя (тёмная/светлая)

// Инициализация
const tg = window.Telegram.WebApp
tg.ready()
tg.expand()

// Получить данные пользователя
const user = tg.initDataUnsafe.user
console.log(user.first_name) // "Алексей"

// Отправить данные боту
tg.sendData(JSON.stringify({ action: 'order', product_id: 42 }))

На стороне бота aiogram получает это через хендлер web_app_data:

@router.message(F.web_app_data)
async def webapp_data(message: Message):
    data = json.loads(message.web_app_data.data)
    await message.answer(f"Получили заказ на товар {data['product_id']}")

Реальные проекты, которые я делал

Фитнес-трекер для клубов. Клиент хотел, чтобы посетители видели своё расписание и записывались на тренировки прямо в Telegram. С обычным ботом это 4-5 шагов диалога. В Mini App — один экран с расписанием и кнопкой «Записаться». Конверсия выросла.

Магазин с корзиной. Пока в боте корзина — это неловкие «вы добавили товар, введите /cart чтобы посмотреть», в Mini App это полноценный ecommerce с фото, количеством, суммой.

Форма заказа для сложных услуг. Когда нужно выбрать несколько параметров, загрузить фото, написать комментарий — в боте это ад, в Mini App — нормальная форма.

Когда Mini App НЕ нужен

Я не советую Mini App когда:

• Задача — простые уведомления или рассылки
• Аудитория немолодая и не в теме (некоторые не поймут что нажимать)
• Нет бюджета и нет времени — Mini App сложнее в разработке
• Нужны push-уведомления без действия пользователя (бот справляется лучше)

Простое правило: если интерфейс поместится в 3-4 шага в боте — делайте бота. Если нет — Mini App.

Стек и сколько стоит

Я делаю Mini App на Vue.js + Vite — быстро разворачивается, всё знакомое. Можно и React, и vanilla JS. Бэкенд — FastAPI или тот же aiogram через sendData.

Цены из жизни:

• Простой Mini App (форма + 2-3 экрана): $200–350
• Средний (магазин, расписание, личный кабинет): $400–700
• Сложный (дашборд, аналитика, интеграции): $800+

Всегда беру за хостинг Mini App отдельно — это обычный фронтенд, нужен свой домен и деплой.

Итого

Mini App — не замена боту, а дополнение. Там где бот начинает ломаться в многоэкранных диалогах, Mini App спасает. Пользователи разбираются быстро — Telegram уже приучил их к этому.

Если есть вопросы по реализации — пишите, разберёмся.