MRSHKNMurashkin Studio
Обсудить сайт
← Все работы
Пример студии

Салон красоты «Капля лака»: сайт и запись через Telegram

Кафе, бар, салон красоты

Пример сайта салона красоты «Капля лака»: раздел «Мастера» с портретами мастеров на главной странице, на ноутбуке и на телефоне

Задача

Гость выбирает салон по мастерам, ценам и отзывам, а записаться хочет без звонка — в том числе вечером, когда администратор уже не отвечает. Салону важно, чтобы запись не терялась и гость не забывал о визите.

Чтобы показать такой сайт в деле, мы сделали пример — работающий сайт придуманного салона красоты «Капля лака» в Калининграде. Салона на самом деле нет, а сайт настоящий: его можно открыть и записаться, как записался бы ваш клиент. Пробная запись и заявка из примера приходят нам, студии. Бот пришлет вам подтверждение и напоминания, как гостю, а на пробную заявку мы ответим, как ответил бы администратор салона, — приходить никуда не нужно.

Решение

На сайте — шесть направлений: маникюр, педикюр, брови, ресницы, стрижки и окрашивание, макияж. В прайсе 19 услуг. У каждой написано, сколько она длится и сколько стоит «от», то есть самая низкая цена. Точную стоимость мастер называет до начала работы. У каждого из пяти мастеров своя страница: портрет, специализация, стаж, рассказ о себе, его услуги с ценами, три фото работ и отзывы о нем. Еще на сайте есть отзывы гостей и контакты: адрес, часы работы, как найти вход и карта. Отзывы салон вносит на сайт сам, в примере они придуманы.

Услуги и цены, описания мастеров и отзывы салон меняет сам — в админке. Это закрытый раздел сайта: туда входят по логину и паролю, посетители его не видят. Программист для этого не нужен. В админке же видны заявки — их оставляют через форму на сайте те, кто записывается без Telegram (об этом ниже). Фото для сайта присылает салон, а портреты мастеров и фото работ на сайт ставим мы при запуске.

Салона нет, поэтому все 21 фото на сайте — портреты мастеров, их работы и зал — взяты с Unsplash. Это фотобанк: сайт, куда фотографы выкладывают снимки. Их можно бесплатно ставить на сайт, даже если сайт помогает зарабатывать. Для каждого снимка мы записали, кто его снял и на каких условиях его можно брать (это и есть лицензия). Люди на портретах — не мастера салона, и работы на фото сделаны не ими. На сайте клиента чужих людей под видом мастеров мы не ставим: пока своего фото нет, на месте портрета будет заглушка в стиле сайта. На сайте настоящего салона на этих местах будут фото его мастеров, их работ и зала.

Кнопка «Записаться» есть в верхней строке каждой страницы, а еще на главной странице, на странице каждого мастера и на странице контактов. Кнопка открывает бота салона в Telegram. Бот — это автоматический собеседник в мессенджере: он пишет гостю сам, без администратора. В боте гость нажимает «Запустить», а затем «Открыть» — открывается мини-приложение «Запись», небольшое окно прямо внутри Telegram, скачивать ничего не нужно.

Дальше гость делает четыре шага: выбирает услугу, потом мастера, который ее делает, потом свободное время на ближайшие две недели и в конце проверяет запись и подтверждает ее. Бот сразу присылает гостю подтверждение, а перед визитом — напоминания: за сутки и за 2 часа. Так гость не забудет, что записан. О каждой новой записи бот сразу пишет в Telegram — владельцу салона или в общий чат с администраторами — с именем гостя из его профиля в Telegram.

У записи через Telegram своя админка, отдельная от админки сайта. В ней салон добавляет мастеров и услуги и задает, в какие дни недели и часы работает каждый мастер: по этому расписанию приложение показывает гостю свободное время. Там же администратор видит все записи. Если администратор переносит или отменяет запись, гостю приходит об этом сообщение. Мастеров и услуги в записи ведут отдельно от сайта: поменяли на сайте — поменяйте и в записи.

Кто не пользуется Telegram, тоже может записаться. На главной странице и внизу каждой страницы под кнопкой «Записаться» есть ссылка «Оставьте заявку»: она ведет на страницу «Запись» с короткой формой — имя, телефон или ник в Telegram и комментарий. Это заявка, а не готовая запись: администратор сам позвонит или напишет и подберет время. Заявка сразу приходит в Telegram — владельцу или в общий чат с администраторами — и сохраняется в админке сайта.

Такой сайт — это тариф «Сайт для вашей сферы»: разделы и функции берем из этого примера, а дизайн рисуем под ваш салон. Запись через Telegram — отдельный тариф «Отраслевое приложение в Telegram». В него входят мини-приложение «Запись», бот и админка записи, а еще бонусная карта со штампами — ее можно посмотреть в нашем примере кофейни «Гуща». В этом примере салона бонусов нет, показана только запись.

На чем сделан сайт

  • Next.js 16
  • React 19
  • TypeScript
  • Payload CMS 3
  • PostgreSQL
  • Yandex Maps
  • Telegram Mini Apps
  • Telegram Bot API

Результаты в цифрах

  • 98Скорость из 100 — Google PageSpeed, телефон
  • 100Доступность из 100 — Google PageSpeed, телефон
  • 100Рекомендации из 100 — Google PageSpeed, телефон
  • 100SEO из 100 — Google PageSpeed, телефон

Снимок экрана: тест скорости Google (Lighthouse)

Отчет PageSpeed Insights, мобильные: 98, 100, 100, 100

Яндекс Метрика и Google Analytics 4 считают посещения сайта и для этого сохраняют в вашем браузере cookie — маленькие файлы. Включим их, только если вы согласны. Подробнее — в политике обработки персональных данных.