Почему не выбрали готовый виджет YClients?

Встраиваемый виджет ограничен по стилю и не даёт работать с availability-matrix на уровне всей сети. Нам нужен был собственный UX: сразу показать, где есть запись сегодня, и перелинковать бронирование со страницами локаций и мастеров для SEO.

Как работает real-time, если слоты кэшируются?

Кэш 15 секунд — это защита от всплеска запросов при открытии каталога. На фактический шаг выбора времени уходит no-store запрос прямо к YClients, поэтому к моменту подтверждения пользователь видит актуальную картину.

Что с безопасностью токенов YClients?

Все модули с токенами помечены `import "server-only"` и не попадают в клиентский бандл. Публичные API-роуты проксируют запросы и не передают партнёрский токен наружу.

Как масштабируется на новые салоны?

Новая локация добавляется одной записью в `salons.ts` — координаты, телефон, часы, companyId в YClients. Остальное подтягивается из API: услуги, мастера, расписание.

Кейс · Сеть салонов красоты, Санкт-ПетербургСайт + YClients + real-time availability

Платформа онлайн-бронирования для сети салонов красоты NailLounge

Собрали Next.js 16 booking-платформу для сети из 5 салонов СПб: каталог услуг и мастеров, 4-шаговое бронирование, real-time слоты из YClients.

Итог: Клиент получил мобильный сайт с онлайн-записью, WCAG AA доступностью и SEO-оптимизацией под поисковые запросы по локациям.

Посмотреть сайт Обсудить похожий проект

Интерьер салона NailLounge — премиальная атмосфера

локаций в СПб

30 мин

revalidate услуг и мастеров

15 сек

TTL для real-time слотов

WCAG AA

пройдено по контрастам и фокусу

Исходная задача

С чем пришёл клиент

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

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

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

Подход

Как мы это решали

Шаг 01

Карта доступности вместо простого календаря

Собрали availability-matrix: снапшот свободных 30-минутных окон по всем мастерам салона. Клиент видит «где и когда есть запись» ещё до выбора конкретного мастера.

Шаг 02

4-шаговое бронирование в модальном окне

Салон → услуга → мастер → дата и слот. На каждом шаге данные подтягиваются из YClients в реальном времени; отмена на любом шаге не теряет ранее выбранные значения.

Шаг 03

Два уровня кэша

Мастера и услуги редко меняются — их кэшируем на 30 минут через Next.js revalidate. Слоты меняются ежеминутно, поэтому для них in-memory TTL 15 секунд плюс no-store на клиенте.

Шаг 04

Real vs mock переключатель

В dev-режиме работает mock-адаптер YClients с детерминированным набором данных. В prod через env-флаг включается боевой клиент. Это позволило дизайнить UX без зависимости от API рейт-лимитов.

Шаг 05

Страницы салонов, мастеров и услуг под SEO

Каждая локация получила отдельную страницу с Yandex Maps, фото салона и реальными отзывами. Каталоги мастеров и услуг индексируются и линкуют обратно в бронирование.

Шаг 06

Юридический пакет под 152-ФЗ

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

Шаг 07

AEO-готовность: llms.txt и JSON-LD

Подготовили сайт к работе с ИИ-ассистентами и расширенным поисковым сниппетам. Добавили llms.txt — карту контента для LLM-краулеров, и полный JSON-LD: LocalBusiness по каждой локации, перечень услуг и мастеров, FAQ, breadcrumbs. Контент одинаково читаем для Яндекса, Google и ChatGPT / Perplexity по локальным запросам.

Стек