Марина снова отвечает в комментариях: «где тот пост про квиз?». Гуглит telegram mini app – видит React, Vite и TON и закрывает вкладку: кажется, это только для программистов. Боль знакома: боишься сломать бота и не знаешь, куда вставить URL. Ответ проще – одна HTML-страница в Cursor, HTTPS-ссылка в BotFather и полка разделов внутри Telegram уже сегодня вечером.
Telegram Mini App – это обычная веб-страница, которая открывается внутри мессенджера, а не отдельное «приложение для разработчиков». Для первого прототипа хватает статики: index.html + скрипт telegram-web-app.js. Официально у Telegram 7 способов запуска, но новичку достаточно Menu Button и ссылки t.me/бот?startapp. Ориентир на вечер: бот → страница в Cursor → HTTPS → открытие на телефоне. Workflow: идея каталога → промпт → деплой → BotFather → тест в Telegram.
По Яндекс Вордстат на июль 2026 parent-запрос «telegram mini app» даёт около 1060 показов в месяц, русское «мини приложения в телеграм» – около 457, а how-to «как создать мини приложение в телеграм» – около 74. Конструкторы обещают «15 минут без кода», React-гайды пугают стеком. Мы идём средним путём: код ваш, пишет его ИИ в Cursor, React не нужен. Живой пример полки контента – каталог инструментов в Mayaai_bot и разбор в канале maya_pro #1318.
Поймите задачу: полка внутри Telegram вместо скролла ленты
Чем Mini App лучше длинной ленты? Подписчик не ищет пост недельной давности – он открывает меню бота и за 10 секунд попадает в нужный раздел. На пальцах: бот – это дверь, Mini App – витрина за дверью. Обычный бот отвечает сообщениями; Mini App показывает кнопки, карточки и оффер как маленький сайт внутри Telegram.
| Критерий | Посты канала | Обычный бот | Mini App (статика) |
|---|---|---|---|
| Навигация | Скролл и поиск | Команды / кнопки в чате | Экран с разделами |
| Оффер | Теряется в ленте | Текст + ссылка | Крупный CTA на первом экране |
| Кто правит | Редактор постов | Сценарии бота | Вы + Cursor, файлы у вас |
| Когда брать | Новости и прогрев | Диалог и FAQ | Каталог, квиз, витрина лида |
Вердикт: не делайте из первого Mini App «магазин на TON». Используйте его как полку: 3–5 разделов и одна понятная кнопка. Типичная ошибка – пытаться заменить весь сайт и бота одним экраном.
Если позже нужен целый лендинг вне Telegram – соседний гайд лендинг в Cursor AI без кода. Сейчас цель уже: одна страница внутри мессенджера.
Создайте бота в BotFather и подготовьте HTTPS-ссылку
Боль «куда вставить ссылку и не сломать бота» снимается новым ботом и официальным Menu Button. Сделайте отдельного бота под эксперимент – так спокойнее, чем трогать боевой. Токен (пароль бота) храните в заметках, не в HTML и не в публичном репозитории.
- Шаг 1. Откройте @BotFather в Telegram и создайте бота командой /newbot.
- Шаг 2. Сохраните токен в надёжном месте; уберите его из любых публичных файлов.
- Шаг 3. Выберите хостинг со SSL: Vercel, GitHub Pages или Netlify – Telegram принимает только HTTPS.
- Шаг 4. После деплоя скопируйте публичный URL вида https://ваш-проект.vercel.app.
- Шаг 5. В BotFather откройте Bot Settings → Menu Button (или /setmenubutton) и вставьте этот HTTPS-URL.
- Шаг 6. При необходимости включите Main Mini App – тогда работает ссылка t.me/ИмяБота?startapp.
- Шаг 7. Проверьте, что в URL нет http:// и localhost – иначе WebView покажет ошибку.
На практике community-доки подтверждают: без валидного SSL BotFather не спасёт красивый макет. Для локальных тестов люди поднимают туннель, но для анонса в канале берите сразу прод-хостинг. Официальные правила запуска – в docs Telegram Mini Apps, про HTTPS – в гайде Getting App Link.
Соберите в Cursor одностраничный каталог без React
Боль «я не программист, мне нужен React-курс» – ложная. Добавьте в Cursor папку проекта и попросите одну HTML-страницу: заголовок, 4 раздела каталога, крупная кнопка «Записаться», мобильная вёрстка. Подключите скрипт https://telegram.org/js/telegram-web-app.js и вызовы WebApp.ready() и WebApp.expand() – это «поздороваться» с Telegram, чтобы страница заняла экран.
Например, промпт может звучать так:
Сделай один файл index.html для Telegram Mini App.
4 раздела каталога с короткими описаниями.
Одна кнопка CTA на внешнюю ссылку с UTM.
Подключи telegram-web-app.js, вызови ready и expand.
Без React, без npm, без бэкенда. Мобильная вёрстка.
Ориентир по шаблону без сборщика – vanilla-js-boilerplate на GitHub. React-шаблон с Vite тоже существует, но для новичка он избыточен: не делайте npm-ад в первый вечер. Избегайте логина через initData на клиенте – в issues платформы часто путают raw и parsed данные; для MVP каталога авторизация не нужна.
- Шаг 1. Создайте пустую папку и откройте её в Cursor (Open Folder).
- Шаг 2. Вставьте промпт про каталог/оффер/квиз и дождитесь index.html.
- Шаг 3. Проверьте глазами: разделы читаются с телефона, CTA один и крупный.
- Шаг 4. Задеплойте статику на Vercel или GitHub Pages.
- Шаг 5. Вставьте полученный HTTPS-URL в Menu Button бота.
- Шаг 6. Откройте Mini App из меню бота и нажмите CTA сами.
Если хотите глубже понять вайбкодинг как метод – разбор для маркетолога в гайде по вайбкодингу в Cursor. Здесь же первый результат уже: файлы у вас локально, без подписки на конструктор.
Проверьте открытие на телефоне внутри Telegram
Часто ломается сценарий «в браузере красиво, в Telegram – белый экран». Причина почти всегда одна: HTTP, просроченный сертификат или тест только на десктопе. Сделайте финальную проверку только внутри клиента Telegram на iOS или Android.
- Откройте бота → кнопка меню → видите разделы без пустого экрана
- Ссылка t.me/ИмяБота?startapp открывается без ошибки «небезопасный HTTP»
- Кнопки ведут куда нужно; внешние URL с UTM кликабельны
- Нет горизонтального скролла на узком экране
- Токен бота нигде не светится в исходниках страницы
В реальном проекте кэш WebView на iOS иногда держит старую страницу – обновите URL параметром версии (?v=2) или переустановите Menu Button. Если Mini App «не работают» у части аудитории, сначала проверьте свой HTTPS и только потом ищите баг в вёрстке.
Критерий успеха: на телефоне в Telegram открывается ваша страница, видны разделы и оффер, кнопка ведёт куда нужно, startapp-ссылка работает без белого экрана. Это и есть success: полка жива, лид не теряется в ленте.
Чеклист перед анонсом в канале
Перед постом «открывайте наше мини-приложение» пробегитесь по короткому чеклисту. Сделайте это один раз – сэкономите вечер на правках после волны вопросов.
- Шаг 1. Оффер понятен с первого экрана без пояснений в комментариях.
- Шаг 2. Ровно один главный CTA; уберите вторую и третью кнопки «на всякий случай».
- Шаг 3. Добавьте UTM на внешние ссылки, чтобы видеть трафик из Mini App.
- Шаг 4. Проверьте Menu Button и startapp на двух телефонах, если есть.
- Шаг 5. Убедитесь, что в репозитории нет токена BotFather.
- Шаг 6. Напишите анонс: зачем полка + одна ссылка t.me/бот?startapp.
- Шаг 7. После публикации сами пройдите путь подписчика от поста до CTA.
Живой ориентир, как выглядит каталог для аудитории: тот же Mayaai_bot и пост #1318 выше. Не копируйте чужой дизайн один в один – возьмите идею «полка ярлыков» и соберите свою под свой оффер.
Что дальше после первого прототипа
Когда каталог открывается стабильно, можно усложнять осторожно: квиз из 3 вопросов, отдельные экраны под продукт, связка с ботом через deep-link. Не делайте сразу бэкенд-авторизацию и платежи – сначала доведите навигацию и CTA. Если нужна автоворонка вокруг Telegram, смотрите соседний материал про автоворонку в Telegram на Make.
Хотите системно собирать такие прототипы в связке с автоматизацией – программа обучения на курсе Make.com и вайбкодинга как раз про практику без найма разработчика. На сегодня достаточно: бот, статика, HTTPS, тест на телефоне.
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Достоверность данных: правила Mini Apps и Menu Button – по core.telegram.org/bots/webapps; требование HTTPS/SSL – по docs.telegram-mini-apps.com; GitHub vanilla-js-boilerplate и issues initData; живой кейс каталога – t.me/Mayaai_bot?startapp и пост maya_pro/1318; частотность «telegram mini app» и RU how-to – по Яндекс Вордстат на 2026-07-11.
Частые вопросы
Как создать telegram mini apps новичку без опыта?
Сделайте бота в @BotFather, попросите Cursor одну HTML-страницу с разделами и CTA, выложите на HTTPS и вставьте URL в Menu Button. Проверьте открытие на телефоне по t.me/ИмяБота?startapp – это и есть первый рабочий прототип.
Нужен ли React для Mini App?
Нет для v1. Используйте статику и скрипт telegram-web-app.js. React-шаблоны удобны командам со сборкой, но новичку достаточно plain HTML; ориентир – vanilla-js boilerplate без npm.
Чем Mini App отличается от обычного бота?
Бот общается сообщениями в чате. Mini App показывает полноценный экран (каталог, квиз, оффер) внутри Telegram. На практике бот остаётся «дверью», а Mini App – «витриной», куда ведёт меню или startapp-ссылка.
Где хостить Mini App бесплатно?
Подойдут Vercel, GitHub Pages или Netlify – главное валидный HTTPS. Не делайте Menu Button на localhost: Telegram отклонит незащищённый HTTP.
Сколько времени на первый прототип?
Ориентир – один вечер: бот, страница в Cursor, деплой, привязка URL, тест на телефоне. Избегайте React-курса и оплаты конструктора, пока не проверили гипотезу полки на своей аудитории.
Что делать, если Mini App не открывается?
Проверьте HTTPS и сертификат, обновите Menu Button, сбросьте кэш параметром ?v=2, откройте именно в клиенте Telegram, а не в обычном браузере. Уберите из URL http:// и любые локальные адреса.
