Как сделать сайт в Телеграме в 2026: Mini App, бот и визитка

Сайт внутри Telegram называется мини-приложением (Mini App): это обычная веб-страница, которая открывается прямо в мессенджере, без браузера и без установки. От вас Telegram хочет только адрес страницы по HTTPS, всё остальное делается так же, как на любом сайте. Ниже разбираем, какие вообще бывают «сайты в телеграме», что нужно технически и как собрать мини-приложение с помощью ИИ.

Три разных вещи, которые называют сайтом в телеграме

Под сайтом в мессенджере обычно понимают одно из трёх, и решения у них совершенно разные.

Мини-приложение (Mini App). Ваша веб-страница открывается внутри Telegram поверх чата: экраны, кнопки, каталог, форма. Выглядит как приложение, живёт на вашем хостинге.
Витрина внутри бота. Никакой веб-страницы нет, всё собрано из сообщений и кнопок. Это диалог, а не сайт, но задачу «покажите услуги и запишите» он закрывает.
Обычный сайт плюс ссылка на канал. Страница живёт в интернете отдельно, Telegram работает как источник трафика и канал связи.

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

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

По документации Telegram мини-приложение это типовое веб-приложение, которое мессенджер показывает во встроенном браузере (WebView), и разработчику нужно передать платформе только URL приложения (Telegram Mini Apps). Отличий от привычного сайта немного, но они принципиальные.

Хостинг остаётся вашим. Telegram ничего не хранит, страница лежит там же, где лежал бы обычный сайт.
Адрес другой. Пользователь заходит не через браузер, а по кнопке бота или по прямой ссылке вида https://t.me/имя_бота/имя_приложения.
Появляется объект window.Telegram.WebApp: через него страница узнаёт тему оформления, разворачивается на весь экран и рисует системные кнопки мессенджера.
Бот обязателен. Мини-приложение всегда привязано к боту, само по себе оно не существует.
Оплата идёт по своим правилам: Mini Apps поддерживают платные подписки на Telegram Stars и выставление счёта методом openInvoice.

С ботом разница ещё проще: бот это переписка по шагам, мини-приложение это экран с интерфейсом. Если бота у вас пока нет, начните с базового разбора, как создать бота в Telegram, а логику связки «бот плюс интерфейс» мы подробнее показывали в статье про бот-приложение.

Не начинайте с мини-приложения, если весь ваш сценарий это две кнопки и заявка. Бот справится за час, а Mini App придётся хостить, обновлять и чинить. Интерфейс нужен там, где есть каталог, калькулятор, личный кабинет или игра.

Приложение внутри мессенджера собирается из обычной веб-страницы, а страницу можно сделать самому за вечер. На бесплатном вебинаре показываем, как это делается с ИИ.

Занять место

Что нужно технически

Список короткий, и почти всё в нём бесплатно.

Сама страница. Набор статических файлов: index.html, стили, скрипты. Подойдёт любой стек, от чистого HTML до React.
Хостинг с HTTPS. В рабочем режиме Telegram принимает только валидные HTTPS-ссылки, обычный http:// не откроется.
Бот в BotFather. Создаётся командой /newbot, занимает минуту.
Подключённый скрипт Telegram. В <head> страницы добавляется https://telegram.org/js/telegram-web-app.js, после этого доступен объект window.Telegram.WebApp.
Привязка адреса. В BotFather команда /newapp создаёт приложение, /myapps открывает его настройки и поле Web App URL, а /setmenubutton вешает кнопку запуска в чате бота.

Минимальная рабочая страница выглядит так:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
  <h1>Каталог</h1>
  <script>
    const tg = window.Telegram.WebApp;
    tg.ready();
    tg.expand();
  </script>
</body>
</html>

По теме: Как сделать сайт с ботом в 2026: связка с Telegram по шагам

Где разместить страницу бесплатно

Мини-приложение это статика, поэтому хватает бесплатных площадок с автоматическим сертификатом.

GitHub Pages. Сайт не больше 1 ГБ, мягкий лимит трафика 100 ГБ в месяц и 10 сборок в час (лимиты GitHub); адреса на github.io отдаются по HTTPS автоматически (документация GitHub).
Cloudflare Pages. На бесплатном тарифе 500 сборок в месяц, до 20 000 файлов в проекте, один файл не больше 25 МиБ, до 100 своих доменов на проект (лимиты Cloudflare).

Для витрины, записи или калькулятора этих лимитов хватает с запасом. Свой домен не обязателен: адрес вида имя.github.io внутри Telegram всё равно не виден пользователю, он видит только окно приложения.

Кнопки в BotFather настраиваются за пять минут, сложность в другом: собрать интерфейс, которым не стыдно поделиться. На бесплатном вебинаре по вайбкодингу разбираем такую сборку с нуля и отдаём гайд в подарок.

Записаться на вебинар

Как собрать мини-приложение с помощью ИИ

Порядок такой же, как при сборке любой страницы вайб-кодингом, плюс два телеграмных шага в конце.

Опишите задачу словами: кто заходит, что должен увидеть, что нажать и что происходит после нажатия.
Попросите ИИ собрать одностраничное приложение и обязательно указать в промпте: подключить telegram-web-app.js, вызвать tg.ready() и tg.expand(), брать цвета из темы Telegram, вёрстка под узкий экран телефона.
Откройте результат в обычном браузере и проверьте логику: в браузере объекта Telegram нет, но текст, кнопки и переходы уже видно.
Выложите файлы на GitHub Pages или Cloudflare Pages и убедитесь, что адрес открывается по HTTPS.
Создайте приложение через /newapp в BotFather, вставьте адрес и добавьте кнопку меню через /setmenubutton.
Откройте приложение с телефона и правьте по кругу: на реальном экране всегда всплывают мелочи вроде мелкого шрифта и кнопки под пальцем.

Промпт можно давать одним абзацем: «Собери одностраничное Telegram Mini App: каталог из шести карточек с фото, ценой и кнопкой «Заказать», внизу кнопка отправки заказа. Подключи telegram-web-app.js, вызови ready и expand, используй цвета темы Telegram, вёрстка мобильная». Общий подход к таким задачам мы разбирали в руководстве, как сделать сайт с помощью ИИ.

По теме: Как сделать уведомления на сайте в 2026: на странице и push

Данные пользователя, оплата и безопасность

Telegram передаёт в приложение поле initData с информацией о пользователе. Доверять ему на стороне страницы нельзя: подпись проверяется на сервере алгоритмом HMAC-SHA-256, и только после этого данные считаются настоящими. Пока у вас витрина без личного кабинета, это не нужно, но как только появляется оплата или доступ по подписке, проверка обязательна.

Ещё одно изменение стоит учесть при верстке: Telegram ужесточил правила и запретил вызывать методы мини-приложения с доменов, отличных от домена самого приложения. Для всех Mini Apps защита включается автоматически 20 июля 2026 года, отключить её можно через приложение BotFather (Bot API changelog). Практический вывод простой: не тащите внутрь приложения чужие виджеты и айфреймы со сторонних сайтов.

Как люди будут открывать ваше приложение

Способов запуска в Telegram несколько, и от выбора зависит, увидят приложение вообще или нет.

Кнопка меню в чате с ботом: самый заметный вход, настраивается в BotFather.
Кнопка под сообщением бота: удобна, когда приложение открывают в конкретный момент сценария.
Прямая ссылка https://t.me/имя_бота/имя_приложения: её можно класть в шапку канала, в посты и в рекламу.
Кнопка на профиле бота через ссылку с параметром ?startapp.
Меню вложений в любом чате, если бот получил на это доступ.

Для канала обычно хватает прямой ссылки и кнопки меню. Если приложение рекламируется отдельно, прямая ссылка удобнее: она открывается одним касанием и не требует сначала писать боту.

Частые вопросы

Можно ли сделать сайт в телеграме без бота?

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

Нужен ли свой домен и платный хостинг?

Нет, достаточно бесплатной статической площадки с HTTPS. Требование к адресу одно: рабочая ссылка должна быть именно HTTPS, иначе Telegram её не откроет.

Будет ли такое приложение в поиске Яндекса?

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

Можно ли принимать оплату прямо в приложении?

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

Сколько времени занимает первая версия?

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

Мини-приложение начинается с обычной страницы, а страницу вы соберёте сами. На воркшопе «Сайты с ИИ» показываем весь путь: от промпта до опубликованного адреса, который можно вставить в BotFather.

Смотреть воркшоп