Telegram Mini App для онлайн-записи в сеть студий красоты NailLounge
Превратили основной канал общения с клиентом в канал продаж: запись на услугу за 30 секунд внутри Telegram, без перехода в браузер, синхронно создаётся в YClients с пометкой источника.
Итог: Дополнительный канал записи без участия администратора — клиент бронирует слот за полминуты внутри мессенджера, запись попадает в YClients с тегом канала и Telegram-username для связи.
30 сек
целевое время записи
1 тап
передача телефона
12
unit-тестов на HMAC-валидацию
~2 нед
срок реализации
С чем пришёл клиент
Telegram у NailLounge — это не «ещё один мессенджер», а основной канал коммуникации с клиентами: бизнес-чаты, рассылки, объявления об акциях. Но запись в нём требовала ручной обработки администратором — каждый запрос на бронь превращался в переписку и занятое время сотрудника.
Клиенты, готовые записаться «здесь и сейчас», уходили из чата на внешний сайт. На переключении контекста часть отваливалась: открытая вкладка браузера, повторный логин, поиск удобного слота — и тёплый лид остывал.
Нужно было дать возможность записаться, не выходя из мессенджера, при этом оставить YClients единственным источником правды (без второй БД и двусторонних синхронизаций) и удержать operational cost около нуля — без своего постоянного бэкенда под бот.
Как мы это решали
Шаг 01
Полный booking-flow в одном экране
Клиент видит весь путь — Студия → Услуга → Мастер → Дата → Время → Подтверждение — внутри Mini App, без единого перехода в браузер. Никакого «открыть в Safari» и потери контекста: пользователь остаётся в привычном Telegram-клиенте.
Шаг 02
Нативный UX уровня iOS
Вместо HTML-кнопок задействован официальный Telegram WebApp API: липкая брендовая MainButton снизу с фирменным цветом и shine-эффектом, нативная BackButton в системном header, тактильная отдача HapticFeedback на каждое действие, нативные popup-диалоги для ошибок. Приложение неотличимо от родного.
Шаг 03
Передача телефона в один тап
Кнопка «Поделиться номером» открывает стандартный диалог Telegram. После согласия номер автоматически появляется в форме за 1–2 секунды — через бот-вебхук, без ручного ввода. Ноль места для опечаток, ноль отвалов на этапе «введите 11 цифр».
Шаг 04
Source tracking прямо в YClients
Каждая запись попадает в учётку с комментарием «Источник: Telegram Mini App | TG: @username». Администратор сразу видит канал клиента и знает, как с ним связаться, маркетинг — оценивает вклад нового канала в выручку без дополнительных дашбордов.
Шаг 05
Edge-инфраструктура с обходом геоблокировки
Mini App остался на RU-домене (важно для SEO и скорости отдачи RU-юзерам), а Telegram-вебхук вынесен на Cloudflare Worker — на международной edge-сети, куда серверы Telegram доходят гарантированно. Общее состояние — через Upstash Redis по HTTPS REST с TTL 5 минут. И Worker, и Redis — на бесплатных тарифах: ноль постоянных расходов на инфраструктуру.
Шаг 06
Безопасная HMAC-валидация подписи
Mini App не доверяет данным от клиента: подпись initData пересчитывается на сервере по RFC Telegram, сравнение через timingSafeEqual защищает от timing-атак, проверяется auth_date и TTL 24 часа. Security-критичный слой покрыт 12 unit-тестами Vitest — гарантия, что логика не сломается при будущих рефакторингах.
Шаг 07
Синхронизация с темой Telegram и защита от случайного выхода
Light/dark переключение клиента моментально перерисовывает Mini App, учитывается safe-area для устройств с notch/home-indicator. Когда юзер уже ввёл телефон, активируется enableClosingConfirmation — случайный свайп вниз больше не выкидывает с заполненной формой.
На чём собрано
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)
Вопросы, которые чаще всего задают по проекту
Коротко по техническим и продуктовым решениям NailLounge.
Приём заявок временно приостановлен
Мы временно не обрабатываем заявки через форму. Свяжитесь с нами напрямую:
- Email: it@nextprism.ru
- Телефон: +7 904 555 92 92