Создание Telegram Mini App: что это и когда нужнее обычного бота

Бот и Mini App решают задачу по-разному

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

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

Главное отличие не в красоте, а в количестве действий. В боте, чтобы изменить один параметр заказа, человек нередко проходит всю цепочку заново или листает чат вверх, ища нужное сообщение. В Mini App он видит весь заказ на одном экране и правит нужную строку. Чем больше в вашем процессе вариантов выбора, тем дороже боту обходится каждый шаг назад.

Когда обычный бот справляется и платить за Mini App не надо

Скажу прямо: в половине запросов, которые к нам приходят со словами «нужно мини-приложение», хватает бота, и это дешевле в разработке и в поддержке.

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

Отдельно про внутренние задачи. Если инструментом пользуются пять человек из вашей команды, красивый интерфейс им не нужен, им нужна скорость. Бот с командами тут объективно удобнее приложения.

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

Где бот начинает мешать продажам

Момент, после которого мы почти всегда советуем Mini App, - появление каталога. Пока позиций десять, кнопки работают. Когда их сто, человек листает сообщения, теряет место, где остановился, и уходит.

Второй маркер - корзина и повторный заказ. В боте состояние корзины приходится показывать отдельным сообщением и обновлять его на каждое движение, иначе в чате остаются устаревшие версии с другой суммой. Клиент видит три разных итога и не понимает, какой из них настоящий.

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

И четвёртый - личный кабинет. История заказов, статус доставки, бонусы, подписка, договоры. Это набор экранов, а не набор сообщений.

Как устроено создание Telegram Mini App изнутри

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

Дальше начинается то, о чём стоит спросить подрядчика. Когда Telegram открывает ваше приложение, он передаёт в него данные о пользователе - initData. Эти данные подписаны, и подпись проверяется на сервере секретным ключом бота. Если проверки нет, а бэкенд просто верит тому, что прислал клиент, любой человек может подставить чужой идентификатор и открыть чужой личный кабинет. Это не теория, это первая вещь, которую мы смотрим, когда нас просят доработать чужое приложение.

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

Ошибки, которые видно с первого экрана

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

Свой логотип и название сверху. Место на экране маленькое, а у Telegram уже есть заголовок окна. Получается два заголовка подряд и меньше места под товар.

Своя кнопка «назад» в левом верхнем углу. Она конфликтует с системной, и человек два раза выходит из того, из чего хотел выйти один раз.

Жёсткие цвета вместо цветов темы. У клиента тёмная тема, у вас белый фон с серым текстом - читается плохо.

Отсутствие состояний загрузки. Мессенджер часто открывают в метро и на плохом Wi-Fi. Если в момент запроса экран пустой и ничего не происходит, приложение считают сломанным и закрывают.

И про повторную авторизацию по SMS. Если пользователь уже пришёл из Telegram, просить у него код из СМС - лишний шаг, на котором отваливаются.

Разумный порядок: сначала бот, потом приложение

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

Эти данные потом окупают проектирование. Вы приходите к дизайну не с догадками, а со знанием, что 80 процентов запросов - это три категории товаров, а фильтр по бренду вообще никто не трогал.

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

Из чего складывается смета

На сайте студии по каждой услуге опубликована вилка «от» - и по Telegram-ботам, и по веб-сервисам, и по интернет-магазинам. Это нижняя граница, а не прайс на любой проект: точная сумма появляется после брифа, когда понятен список экранов и интеграций.

Цену двигают вверх примерно одни и те же вещи. Количество экранов и уникальных состояний. Наличие админки, в которой вы сами меняете товары и цены. Оплаты и возвраты. Интеграция с CRM, складом или 1С - тут почти всегда основная трудоёмкость не в приложении, а в стыковке с чужой системой. И отдельная веб-версия вне Telegram, если она нужна.

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

Приёмка: двадцать минут своими руками

Не принимайте работу по видеозаписи с экрана разработчика. Откройте приложение со своего телефона и пройдите весь путь клиента до оплаты.

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

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