Мини-приложение в Телеграме: каталог, запись и заказ

Клиент пишет в личку «а что у вас есть?». Ты отправляешь ему фото прайса, потом ещё три фото, потом он спрашивает, есть ли такое же, но в синем, и есть ли свободное время в четверг. Ещё через десяток сообщений выясняется, что в четверг ему неудобно.

Мини-приложение в Телеграме убирает эту переписку. Это окно, которое открывается прямо в мессенджере из твоего бота: внутри каталог или список услуг, человек сам выбирает, сам смотрит свободное время, оставляет заказ. Ставить ничего не надо, Телеграм у твоих клиентов уже есть.

В уроке разберём, что положить в такое окно для своего дела, и соберём первую версию с нейросетью. Если ты ещё решаешь, нужно ли тебе вообще отдельное приложение, начни с урока по слову ПРИЛОЖЕНИЕ, там это сравнение.

Что получишь

• Понимание, как мини-приложение связано с ботом и что оно умеет в общих чертах
• Таблицу каталога или услуг, готовую к загрузке в любое окно
• Первую версию мини-приложения, собранную нейросетью и проверенную на телефоне
• Список проверок, без которых окно не стоит показывать клиентам

Чего в этом уроке нет

Пересказа документации Telegram по памяти. Всё, что мини-приложения умеют, описано в официальной документации Telegram на core.telegram.org в разделе про Mini Apps. Я её из облака открыть не смогла, поэтому пишу только общее устройство, без названий настроек и без цифр. Конкретные возможности, оплату и требования к странице читаешь там, на сегодня.

Сторонних конструкторов и ботов-помощников. Только официальное: бот заводится у BotFather, это официальный бот Телеграма, документация на сайте Телеграма.

Цен. Ни на разработку, ни на хостинг.

Что нужно до старта

• Свой бот в Телеграме. Как его завести у BotFather и где хранить его ключ, разобрано в уроке по слову БОТ. Повторять не буду, без бота мини-приложение не открыть
• Список товаров или услуг с ценами и, если есть, фото. Фото свои
• Нейросеть. Из России без VPN и по-русски работают Алиса AI от Яндекса и ГигаЧат от Сбера, вход на официальных сайтах или в официальных приложениях. Код для окна они тоже пишут. Claude и ChatGPT это второй путь, Claude с кодом справляется лучше, но ему нужен доступ из-за рубежа
• Место в интернете, где будет лежать страница мини-приложения. Как выложить сайт, разобрано в уроке по слову САЙТ

Как это устроено, в двух словах

Мини-приложение это обычная веб-страница, как маленький сайт. Ты кладёшь её в интернет, а в настройках бота у BotFather указываешь её адрес. После этого у бота появляется способ открыть эту страницу окном прямо внутри Телеграма. Клиент нажимает, окно открывается поверх чата, он выбирает и отправляет.

Куда уходит заказ из окна, решаешь ты: в чат с ботом, тебе в личку, в таблицу. Про таблицу и уведомления отдельный урок по слову АВТОМАТ.

Как именно привязать страницу к боту и какие есть способы её открыть, смотри в официальной документации Telegram про Mini Apps. Там же требования к адресу страницы.

Шаги

1. Реши, что клиент делает в окне

Одно главное действие. Не три, одно.

• магазин: выбрать товар и оставить заказ
• мастер или салон: выбрать услугу и время
• эксперт: выбрать формат консультации и оставить заявку
• кафе или кондитерская: собрать заказ и выбрать время самовывоза

Отдай нейросети, чтобы проверила:

У меня своё дело: [чем занимаешься]. Клиенты сейчас пишут мне в личку в Телеграме и спрашивают: [частые вопросы].

Я хочу мини-приложение внутри Телеграма. Помоги выбрать одно главное действие, ради которого клиент будет открывать окно. Предложи два-три варианта, для каждого: что клиент делает по шагам, что я получаю в итоге, сколько переписки это убирает. Не выбирай за меня.

2. Собери каталог в таблицу

Окно работает на данных: товары, услуги, цены, время. Если это лежит в голове и в фото прайса, сначала собери таблицу.

Вот мой прайс как есть: [вставь текст или фото прайса].

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

Бери только то, что есть в прайсе. Где непонятно, ставь пометку [уточнить], не додумывай.

Проверь таблицу глазами, особенно цены. Нейросеть иногда путает строки, если прайс был фотографией.

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

3. Попроси нейросеть собрать первую версию окна

Самый простой вариант первой версии: одна страница, каталог из твоей таблицы, выбор, форма с именем и телефоном, кнопка отправить.

Собери первую версию мини-приложения для Telegram одной HTML-страницей.

Что внутри:
- сверху название моего дела: [название],
- каталог из таблицы ниже, по категориям, у каждой позиции название, описание, цена, кнопка «выбрать»,
- внизу то, что клиент выбрал, и итог,
- форма: имя, телефон, комментарий,
- кнопка «отправить заказ».

Требования:
- страница должна хорошо смотреться на телефоне,
- используй официальный способ подключения мини-приложения из документации Telegram (core.telegram.org/bots/webapps), напиши, какой именно, чтобы я могла сверить,
- после отправки данные заказа должны прийти в моего бота,
- никаких сторонних сервисов и библиотек без объяснения, зачем они,
- ключ бота в код страницы не вставляй ни в каком виде.

Таблица: [вставь].

Объясни простыми словами, что мне сделать с этим файлом, по шагам.

Про ключ бота отдельно. Ключ даёт полный доступ к боту. В чат нейросети его не вставляешь, в код страницы тоже, страницу может открыть любой. Если нейросеть сама просит вставить ключ, ответь, что не будешь, и попроси другой способ. Подробнее про хранение ключа в уроке по слову БОТ.

4. Открой страницу в обычном браузере

До всякого Телеграма открой файл на компьютере и посмотри. Потом в браузере на телефоне.

Что проверить:

• весь ли каталог на месте, совпадают ли цены с прайсом
• нажимается ли «выбрать», считается ли итог
• не съезжает ли вёрстка на маленьком экране
• влезает ли форма без прокрутки вбок

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

5. Выложи и подключи к боту

Страницу выкладываешь в интернет так же, как сайт, по шагам из урока по слову САЙТ. Адрес страницы указываешь в настройках своего бота у BotFather. По документации Telegram про Mini Apps (https://core.telegram.org/bots/webapps, проверено 29.10.2026) кнопку меню с адресом страницы ставят у BotFather командой /setmenubutton или в Bot Settings > Menu Button, а главное мини-приложение бота настраивается там же, в Bot Settings. Дальше BotFather подсказывает по шагам.

Если что-то не получается, спроси нейросеть, но приложи ей текст из официальной документации:

Я подключаю мини-приложение к своему боту. Вот что написано в официальной документации Telegram: [вставь кусок]. Вот что я сделала: [по шагам]. Вот что вижу: [ошибка или скриншот].

Объясни, где я ошиблась, опираясь на текст документации. Если в нём ответа нет, так и скажи.

6. Проверь заказ целиком на себе

Открой бота со своего телефона, открой окно, закажи что-нибудь у самой себя. Потом с другого аккаунта или попроси постоянную клиентку.

• дошёл ли заказ до бота
• видно ли в нём всё: что выбрали, имя, телефон, комментарий
• понял ли клиент, что заказ принят
• что будет, если отправить пустую форму

Последний пункт обычно и вскрывает проблемы. Попроси нейросеть добавить проверку, чтобы без телефона заказ не уходил.

7. Подумай про данные клиентов

Имя и телефон это персональные данные. Если окно их собирает, клиенту надо видеть, кто ты и что с этими данными делаешь, и дать согласие. Как подготовить такой текст и где сверять с законом, разобрано в уроке по слову МАГАЗИН в шаге про возврат и данные.

8. Обновляй каталог без переделки

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

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

Тогда цену меняешь сама и ничего не ломаешь.

Где обычно ломается

В окно положили всё сразу. Каталог, запись, отзывы, блог, бонусы. Клиент теряется. Одно главное действие в первой версии, остальное потом.

Ключ бота оказался в коде страницы. Это самая опасная ошибка. Если увидела ключ в файле, убирай и выпускай у BotFather новый ключ, старый считай засвеченным.

Нейросеть придумала возможность Telegram. Она уверенно напишет про функцию, которой нет или которая устроена иначе. Сверяй с официальной документацией, особенно всё, что касается оплаты.

Страница работает в браузере, а в Телеграме нет. Чаще всего дело в адресе страницы или в настройке бота. Смотри требования в документации и пиши нейросети с её текстом.

Заказы приходят, а ты их не видишь. Бот принимает, а уведомление тебе не настроено. Проверь шаг 6 и урок по слову АВТОМАТ.

Цены в окне старые. Каталог обновили в прайсе, а в окне забыли. Шаг 8 и одна таблица на всё.

Если хочется готовое

Шаги выше дают рабочую первую версию своими руками: каталог, выбор, заказ в бота. Дальше можно наращивать по одному куску.

А можно отдать сборку нам. Мы с дочерью Анастасией делаем сайты, приложения и ботов под ключ: я веду заказ от первого сообщения до сдачи, бриф, тексты и боты на мне, Анастасия рисует и собирает. На странице услуг есть живые демо под ниши, например запись к мастеру маникюра и сборка букета с доставкой для цветочного магазина, фирмы в демо вымышленные. Работаем в переписке, рассказываешь задачу боту, можно голосовым.

Посмотреть демо записи к мастеру: https://ии-вайбкодинг.рф/demo/manikyur/ , демо заказа букета: https://ии-вайбкодинг.рф/demo/cvety/ . Рассказать про своё мини-приложение: https://t.me/ketrin_priyom_bot?start=app

Источники

1. https://core.telegram.org/bots/webapps
2. https://core.telegram.org/bots/features

Ещё уроки