Главная · Навигация · Mini App Preview
📱 TELEGRAM MINI APP · PREVIEW

Как выглядит Mini App в Telegram

Отдельный flow для пользователей в Telegram — не копия сайта, а сжатый customer path из 5 экранов. Открой справа в макете телефона.

🎯Зачем отдельный Mini App?

Сайт = витрина для холодного трафика (47 страниц, SEO, разные сегменты). Mini App = личный кабинет в кармане для тех, кто уже подписан на бот.

Главные отличия:

  • Только 5 экранов вместо 47 — фокус на одной задаче
  • Telegram-native UX — BackButton, MainButton, HapticFeedback
  • Авто-идентификация — имя/ID из Telegram, без логина
  • Темы Telegram — light/dark адаптивно
  • Single page — открывается мгновенно, без перезагрузок

🗺5 экранов customer path

👋
Welcome
Привет + старт
📋
Brief
5 шагов, 3 мин
🤖
Team
Подобранные агенты
🏢
Office
Мини-кабинет
💬
Chat
Чат с агентом

🤖Как настроить через @BotFather

1Создать бота

Открой @BotFather → /newbot → имя AI Growth Office → username aio_growth_bot

2Привязать Mini App

В @BotFather → /newapp → выбрать бота → название AI Office → URL: https://ai-growth-office.ru/mini-app/

3Назначить кнопку меню

/setmenubutton → выбрать бота → текст «🏢 Открыть AI Office» → URL такой же

4Команды бота

/setcommands → выбрать бота:

start - Открыть AI Office
brief - Пройти бриф заново
team - Моя команда
help - Помощь
Готово. Теперь пользователь в Telegram открывает бота → кнопка «🏢 Открыть AI Office» внизу → Mini App запускается.

📊Что внутри (технически)

  • Single-file SPA — `mini-app/index.html` (~30 КБ)
  • Hash-router — навигация без перезагрузок (`#welcome`, `#brief`, `#office`)
  • localStorage state — данные брифа/команды/чатов сохраняются между сессиями
  • Telegram WebApp SDK — авто-загружается с telegram.org/js/telegram-web-app.js
  • Anthropic API — через `/api/chat` (Netlify Function, единая с сайтом)
  • Theme variables — `var(--tg-theme-bg-color)` etc. — следуют за Telegram
  • HapticFeedback — лёгкая вибрация на действиях (iOS+Android)
  • MainButton / BackButton — нативные кнопки Telegram, не свои

🚀Customer path · подробно

Шаг 1 · Welcome (5 сек)
Видит привет с именем из Telegram + 3 perks + кнопка «Поехали»

Шаг 2 · Brief (≈3 минуты)
5 коротких вопросов (вместо 10 на сайте): тип бизнеса → ниша → главная цель → доход → главный затык. Прогресс-бар сверху. После заполнения шага кнопка автоматически активируется.

Шаг 3 · Loading + Team (10 сек + 30 сек)
Анимация «AI собирает» с 4 тиками. Затем экран с подобранными агентами: must-have + recommended. Toggle для каждого. Можно убрать ненужных.

Шаг 4 · Office
Главный экран: приветствие, цель, 3 KPI (агенты / запуски / сэкономлено), список агентов с последним сообщением, быстрые задачи под цель. Bottom-nav (Офис / Бриф / Команда / Настройки).

Шаг 5 · Chat
Тапнул агента → открылся чат. iMessage-стиль (user справа синим, agent слева серым). Streaming-ответы. История сохраняется. BackButton (нативный TG) возвращает в офис.

⚡Что работает уже сейчас

  • ✅ Все 5 экранов · переходы · hash-router
  • ✅ Сохранение state в localStorage (брифа, команды, чатов)
  • ✅ Telegram WebApp API (theme/MainButton/BackButton/Haptic)
  • ✅ Подбор команды по логике «цель → агенты»
  • ✅ Streaming-чат с агентами через /api/chat
  • ✅ Fallback на «friend» если не в Telegram (для preview)
Что добавить позже: Telegram Payments (для оплаты Pro), уведомления через бот при готовности задач, экспорт чатов в личку, deep-link на конкретного агента (?agent=sofia).

🔗Прямые ссылки