DeveloctopusУ вас уже есть сайт, личный кабинет или веб-сервис, и хочется, чтобы клиенты пользовались им прямо в Telegram или MAX. Разбираем, как сделать mini app из сайта: что переиспользуется без изменений, как адаптировать интерфейс под окно мессенджера, чем заменить логин и пароль и какие подводные камни встречаются при переносе. Вебапп в мессенджере — это не копия сайта, а его версия под другой контекст.
Почему нельзя просто вставить ссылку на сайт
Технически можно указать адрес существующего сайта как адрес мини-приложения, и он откроется. Но выглядеть это будет как сайт в рамке:
- шапка с меню и подвал съедают и без того небольшое окно;
- пользователь видит форму входа, хотя мессенджер уже знает, кто он;
- баннер про cookies и всплывающие окна закрывают контент;
- ссылки уводят во внешний браузер или открывают страницы, не рассчитанные на это окно;
- тяжелая главная страница долго грузится по мобильному интернету;
- своя кнопка «Назад» на сайте конфликтует с системной кнопкой мессенджера.
Пользователь закрывает такое приложение через несколько секунд. Поэтому задача — не «завернуть» сайт, а собрать из его частей отдельный вебапп в мессенджере со своими экранами и логикой входа.
Что можно переиспользовать
Хорошая новость: самая дорогая часть системы обычно остается как есть. Чем лучше на сайте отделены интерфейс и логика, тем дешевле перенос:
| Часть системы | Переиспользуется | Что меняется |
|---|---|---|
| Бэкенд и API | Да | Добавляется вход через мессенджер |
| База данных | Да | Связь аккаунта с ID пользователя в мессенджере |
| Бизнес-логика | Да | Ничего: цены, расчеты, статусы те же |
| Интеграции с CRM, 1С | Да | Новый источник заказов в отчетах |
| Компоненты интерфейса | Частично | Новые экраны под узкое окно |
| Навигация | Нет | Под системные кнопки мессенджера |
| Авторизация | Нет | Вход по подписанным данным мессенджера |
| Оплата | Частично | С учетом правил платформы |
Если сайт — одностраничное приложение поверх API, перенос во многом сводится к новым экранам и слою авторизации. Если это классическая CMS, где страницы собираются на сервере вместе с данными, сначала придется выделить API, и это основная часть работы.
Верстка под окно мессенджера
Интерфейс мини-приложения проектируется под телефон в первую очередь, даже если на сайте основной трафик с десктопа. Что меняется по сравнению с мобильной версией сайта:
- Высота окна плавает. Окно может быть развернуто не полностью, менять размер жестом и сжиматься при открытии клавиатуры. Telegram сообщает актуальную высоту и дает CSS-переменные для нее — верстку строят на них, а не на высоте экрана устройства.
- Цвета темы. Фон и текст лучше брать из темы мессенджера, а фирменный цвет оставить для акцентов. Тогда приложение не будет «светить» белым экраном у пользователя с темной темой.
- Системные кнопки. Главное действие — «Оформить», «Записаться», «Отправить» — выносится на основную кнопку платформы внизу экрана, а шаг назад — на системную кнопку «Назад».
- Нет шапки и подвала. Логотип, меню и контакты убираются: человек и так знает, куда зашел.
- Нет наведения курсором. Подсказки по наведению и выпадающие меню заменяются явными элементами, области нажатия — крупнее.
- Безопасные зоны в полноэкранном режиме: контент не должен уходить под вырез камеры и элементы клиента.
Вход через мессенджер вместо логина и пароля
Главное, что дает перенос, — исчезает форма входа. При открытии мини-приложения мессенджер передает данные пользователя, подписанные платформой. Сервер проверяет подпись — в Telegram это HMAC на основе токена бота, в MAX схема проверки уточняется по документации платформы — и только после этого считает пользователя авторизованным. Значению ID, которое фронтенд прислал «как есть», доверять нельзя. Как устроена эта проверка в Telegram, подробно описано в статье о разработке Telegram Mini App.
Отдельный вопрос — существующие клиенты сайта. У них уже есть аккаунты с историей заказов, и их нужно связать с аккаунтом в мессенджере. Варианты:
- Запросить телефон системным диалогом мессенджера и сопоставить с аккаунтом — если телефон на сайте был подтвержден.
- Отправить одноразовый код на email или телефон из аккаунта и ввести его в мини-приложении.
- Дать кнопку «Подключить Telegram» в личном кабинете сайта, которая ведет в бота со специальной ссылкой.
Новых пользователей проще: аккаунт создается при первом открытии, а недостающие данные запрашиваются, когда они действительно нужны, например при первом заказе.
Что придется переписать
Кроме экранов входа и навигации, при переносе обычно переделывают:
- Сессии. Авторизация на cookies может не работать в веб-версии Telegram: там мини-приложение открывается во фрейме, и браузер ограничивает такие cookies. Надежнее передавать токен в заголовке запроса.
- Хранение состояния. Корзину, черновики и настройки лучше держать на сервере с привязкой к пользователю, а не только в локальном хранилище браузера.
- Формы. Имя и телефон подставляются из мессенджера, капча не нужна — пользователь уже авторизован.
- Оплату. Физические товары и услуги в Telegram оплачивают через платежных провайдеров, а цифровые товары и услуги внутри Telegram — в Telegram Stars. Если сайт продает подписку на цифровой контент, модель оплаты придется пересмотреть. Для MAX правила уточняются по документации платформы.
- Уведомления. Письма и SMS дополняются сообщениями бота — это основной канал связи с пользователем мини-приложения.
- Внешние ссылки и файлы. Переходы на сторонние сайты и скачивание документов открывают через методы платформы, иначе поведение будет разным на разных устройствах.
Telegram и MAX: одна кодовая база, два адаптера
Если нужны оба мессенджера, мы обычно делаем общий интерфейс и бэкенд, а все, что зависит от платформы, выносим в тонкий слой: инициализацию, проверку подписи на сервере, системные кнопки, тему, оплату, отправку уведомлений. Под каждую платформу пишется свой адаптер, остальной код общий.
У MAX есть платформа для ботов и мини-приложений, HTTP API с авторизацией токеном бота и получение событий через webhook или long polling. Набор методов для мини-приложений, требования к публикации и модерации уточняются по документации платформы на момент разработки — на это стоит заложить время в план. Ботов в каждом мессенджере будет по одному, но данные клиентов и заказы останутся в общей базе. Особенности MAX разобраны в статье о разработке мини-приложения для MAX.
Подводные камни и чек-лист переноса
Что чаще всего всплывает уже после запуска:
- аналитика смешивает трафик сайта и мини-приложения — нужен отдельный источник или метка;
- адреса мини-приложения попадают в поиск и дублируют страницы сайта — их стоит закрыть от индексации;
- старые ссылки внутри контента ведут на полные версии страниц сайта;
- в мини-приложении всплывают окна, рассчитанные на сайт: чат поддержки, подписка, cookies;
- один и тот же клиент оказывается двумя аккаунтами, потому что связывание с сайтом не продумали заранее.
Мы начинаем перенос с короткого аудита: есть ли API, как устроена авторизация, какие сценарии клиенты реально используют с телефона. Часто оказывается, что в мини-приложение нужно перенести три-четыре ключевых сценария, а не весь сайт. Если сайт при этом остается главным источником поискового трафика, пригодится статья о SEO при разработке сайта.
Короткий чек-лист перед стартом:
- выбраны сценарии, которые переносим;
- у бэкенда есть API или понятен план его выделения;
- решено, как связываем аккаунты сайта и мессенджера;
- сессии не зависят от cookies;
- модель оплаты проверена на соответствие правилам платформы;
- мини-приложение закрыто от индексации, аналитика разделена.
Частые вопросы
Можно ли вообще не переделывать сайт?
Открыть сайт внутри мессенджера можно, но удобным приложением он от этого не станет. Минимум — новые экраны ключевых сценариев и вход через мессенджер; бэкенд при этом обычно не трогают.
Сколько времени занимает перенос?
Зависит от того, есть ли у сайта API. Если есть, первую версию с одним-двумя сценариями можно запустить от 2 недель; если API нужно выделять, срок считаем после аудита.
Сохранятся ли аккаунты и история заказов клиентов?
Да, если продумать связывание: клиент один раз подтверждает телефон или email, и мини-приложение показывает его прежние заказы.
Сколько стоит сделать Mini App из сайта?
Мини-приложения у нас — от 30 000 ₽. При переносе часть работы уже сделана, поэтому итог зависит в основном от числа сценариев и состояния API; предварительная оценка бесплатна.
Обсудим проект
Нужна похожая разработка?
Расскажите о задаче — уточним детали, предложим формат запуска и подготовим предварительную оценку. Это бесплатно.
Источники
Опубликовано · Обновлено