Telegram Mini App для онлайн-записи в сеть студий красоты NailLounge
Превратили основной канал общения с клиентом в канал продаж: запись на услугу за 30 секунд внутри Telegram, без перехода в браузер, синхронно создаётся в YClients с пометкой источника.
Итог: Дополнительный канал записи без участия администратора — клиент бронирует слот за полминуты внутри мессенджера, запись попадает в YClients с тегом канала и Telegram-username для связи.
Product surface
Website + web booking
30 сек
целевое время записи
1 тап
передача телефона
12
unit-тестов на HMAC-валидацию
~2 нед
срок реализации
01 / Brief
С чем пришёл клиент
Telegram у NailLounge — это не «ещё один мессенджер», а основной канал коммуникации с клиентами: бизнес-чаты, рассылки, объявления об акциях. Но запись в нём требовала ручной обработки администратором — каждый запрос на бронь превращался в переписку и занятое время сотрудника.
Клиенты, готовые записаться «здесь и сейчас», уходили из чата на внешний сайт. На переключении контекста часть отваливалась: открытая вкладка браузера, повторный логин, поиск удобного слота — и тёплый лид остывал.
Нужно было дать возможность записаться, не выходя из мессенджера, при этом оставить YClients единственным источником правды (без второй БД и двусторонних синхронизаций) и удержать operational cost около нуля — без своего постоянного бэкенда под бот.
02 / Execution
Как мы это решали
Решения разложены как цепочка продуктовых слоёв: от входа в запись до аналитики, кэша и SEO-структуры. Каждый слой поддерживает основной сценарий, а не существует ради отдельной технологии.
Полный booking-flow в одном экране
Клиент видит весь путь — Студия → Услуга → Мастер → Дата → Время → Подтверждение — внутри Mini App, без единого перехода в браузер. Никакого «открыть в Safari» и потери контекста: пользователь остаётся в привычном Telegram-клиенте.
Нативный UX уровня iOS
Вместо HTML-кнопок задействован официальный Telegram WebApp API: липкая брендовая MainButton снизу с фирменным цветом и shine-эффектом, нативная BackButton в системном header, тактильная отдача HapticFeedback на каждое действие, нативные popup-диалоги для ошибок. Приложение неотличимо от родного.
Передача телефона в один тап
Кнопка «Поделиться номером» открывает стандартный диалог Telegram. После согласия номер автоматически появляется в форме за 1–2 секунды — через бот-вебхук, без ручного ввода. Ноль места для опечаток, ноль отвалов на этапе «введите 11 цифр».
Source tracking прямо в YClients
Каждая запись попадает в учётку с комментарием «Источник: Telegram Mini App | TG: @username». Администратор сразу видит канал клиента и знает, как с ним связаться, маркетинг — оценивает вклад нового канала в выручку без дополнительных дашбордов.
Edge-инфраструктура с обходом геоблокировки
Mini App остался на RU-домене (важно для SEO и скорости отдачи RU-юзерам), а Telegram-вебхук вынесен на Cloudflare Worker — на международной edge-сети, куда серверы Telegram доходят гарантированно. Общее состояние — через Upstash Redis по HTTPS REST с TTL 5 минут. И Worker, и Redis — на бесплатных тарифах: ноль постоянных расходов на инфраструктуру.
Безопасная HMAC-валидация подписи
Mini App не доверяет данным от клиента: подпись initData пересчитывается на сервере по RFC Telegram, сравнение через timingSafeEqual защищает от timing-атак, проверяется auth_date и TTL 24 часа. Security-критичный слой покрыт 12 unit-тестами Vitest — гарантия, что логика не сломается при будущих рефакторингах.
Синхронизация с темой Telegram и защита от случайного выхода
Light/dark переключение клиента моментально перерисовывает Mini App, учитывается safe-area для устройств с notch/home-indicator. Когда юзер уже ввёл телефон, активируется enableClosingConfirmation — случайный свайп вниз больше не выкидывает с заполненной формой.
04 / Stack
На чём собрано
Технический стек показан как производственная схема: интерфейс, интеграции и инфраструктура поддерживают одну цепочку записи.
Frontend
- Next.js 16 (App Router, Server Components, Turbopack)
- React 19, TypeScript strict
- Tailwind CSS 4 с @theme-токенами + shadcn/ui (Radix)
- react-day-picker v9 — кастомизированный календарь под бренд
- next-themes для синхронизации с системной и Telegram-темой
Telegram-интеграция
- Telegram WebApp API: MainButton, BackButton, HapticFeedback, themeParams, safeAreaInset
- requestContact и enableClosingConfirmation для UX-надёжности
- Telegram Bot API: setWebhook, setMenuButton, обработка contact-сообщений
- Graceful degradation для возможностей Bot API 7.10+ / 9.5+ через versionAtLeast()
Edge / Backend
- Cloudflare Workers (~60 строк webhook-relay) на бесплатном тарифе
- Upstash Redis (HTTPS REST, без SDK) для cross-region стейта с TTL
- Wrangler CLI и paste-safe shell-скрипты для регистрации вебхука
- Vercel / Coolify (Docker) для основного Next.js-сайта
Безопасность и тесты
- HMAC-SHA256 валидация initData с node:crypto.timingSafeEqual
- Secret-token check через X-Telegram-Bot-Api-Secret-Token header
- Точечный CSP: script-src telegram.org и frame-ancestors web.telegram.org только на маршруте Mini App
- Все секреты через wrangler secret put — ничего конфиденциального в репо
- 12 unit-тестов Vitest на security-критичный слой HMAC-валидации
Внешние интеграции
- YClients API: услуги, мастера, слоты, создание брони, доступные дни мастера
- Yandex.Metrica: события booking_* с разделением источников (telegram_mini_app vs home_hero)
05 / Evidence
Визуальные артефакты кейса
Скриншоты поданы как доказательства продуктовой системы: сайт, сценарий записи, web-виджет и дизайн-система студий.
Product surfaces
Booking flow за 30 секунд: студия → дата и время → подтверждение с шарингом номера через нативный диалог Telegram.
Вопросы, которые чаще всего задают по проекту
Коротко по техническим и продуктовым решениям NailLounge.
Приём заявок временно приостановлен
Мы временно не обрабатываем заявки через форму. Свяжитесь с нами напрямую:
- Email: it@nextprism.ru
- Телефон: +7 904 555 92 92