Сайты с ИИ2026-08-257 минНатали Анарбаева

Как сделать сайт бронирования: слоты без двойной записи

Как сделать сайт бронирования: слоты без двойной записи

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

Опишите, что именно бронирует человек

До выбора сервиса запишите единицу бронирования. Для консультации это специалист и отрезок времени, для студии добавляется помещение, для проката предмет и период, для мероприятия место и вместимость. Если два клиента не могут использовать ресурс одновременно, ресурс должен участвовать в проверке свободного слота.

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

Главная проверка сайта бронирования: два человека одновременно выбирают один слот, подтверждение получает только один, а второму система предлагает новое время.

Выберите готовый календарь или собственную систему

Готовый календарь подходит, если вы бронируете консультации, занятия или услуги по времени и можете описать их стандартными слотами. Например, Cal.com позволяет создать тип события, задать доступность и встроить запись на сайт. На официальной странице перечислены inline-вставка, всплывающая кнопка, окно по клику и ссылка для письма, а код генерируется после настройки события: варианты встраивания Cal.com.

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

  • Один специалист и фиксированные услуги: готовая страница записи или встроенный календарь.
  • Несколько специалистов с одинаковыми услугами: календарь должен учитывать отдельную доступность каждого ресурса.
  • Аренда по дням: нужна проверка пересечения периодов, а не только списка начальных слотов.
  • Места, номера и товары: нужен учёт вместимости или остатков, обычный календарь встреч может не подойти.
  • Нестандартные правила и внешняя учётная система: сначала проектируется обмен данными и защита от повторной операции.

Если у вас ещё нет страницы с услугами, ценами и контактами, начните с сайта услуг. Бронирование добавляется поверх понятного предложения, а не заменяет описание услуги.

Понимания, как это устроено, уже достаточно, чтобы начать. На бесплатном эфире сайт собирают за один вечер и показывают, как его выложить.

Посмотреть, как собрать

Соберите минимальный сценарий записи

Страница должна вести человека по короткому пути: услуга, специалист или ресурс, дата, время, контакты, подтверждение. Не просите адрес, дату рождения или подробный комментарий, если они не нужны для исполнения услуги. Рядом с формой разместите ссылку на политику обработки персональных данных, объясните цель сбора контактов и получите требуемое согласие до отправки.

  1. Создайте одну тестовую услугу с реальной длительностью и отдельным календарём исполнителя.
  2. Задайте доступность, перерывы и часовой пояс. Не открывайте все часы по умолчанию.
  3. Подключите календарь исполнителя, чтобы личные занятые события закрывали соответствующее время, если выбранный сервис это поддерживает.
  4. Скопируйте штатный код встраивания и поставьте календарь на отдельную страницу сайта.
  5. Настройте страницу успеха, письмо или сообщение с датой, временем, часовым поясом и способом отмены.
  6. Откройте только тестовые даты и пройдите весь путь двумя разными адресами.
  7. После приёмки добавляйте остальные услуги, сотрудников и оплату по одному.

В официальном руководстве Cal.com доступность задаётся через расписания, которые можно связать с типами событий; там же описана работа с несколькими расписаниями: документация по availability. У другого сервиса названия экранов будут отличаться, но принцип остаётся тем же: показывать можно только время, которое прошло все ограничения.

По теме: Как сделать сайт-форум: движок, разделы и модерация

Встройте календарь так, чтобы был запасной путь

Inline-календарь удобен, когда запись является главным действием страницы. Всплывающее окно подходит для нескольких кнопок на длинной странице. Ссылка подходит как запасной путь: если вставка не загрузилась из-за блокировщика, слабой сети или ограничений браузера, человек всё равно сможет открыть календарь отдельно.

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

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

Один собранный сайт учит больше десяти инструкций, потому что ошибки видны сразу. На бесплатном эфире по вайбкодингу показывают, как описать идею словами и получить работающую страницу, а участникам достаётся гайд.

Собрать сайт с ИИ

Настройте подтверждение, перенос и отмену

Подтверждение должно повторять услугу, дату, время, часовой пояс, адрес или ссылку встречи и способ отмены. Если запись считается окончательной только после оплаты или ручного одобрения, так и напишите. Статус «заявка получена» не равен статусу «время забронировано».

Для переноса безопаснее отменить старый слот только после успешного выбора нового. Иначе человек может потерять запись из-за закрывшегося окна или ошибки платежа. Для отмены используйте уникальную ссылку из подтверждения и не просите человека присылать секретные данные в мессенджере.

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

По теме: Как сделать CMS-сайт: пошаговый план в 2026 году

Проверьте сайт матрицей приёмки

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

  • Два человека одновременно подтверждают один слот: создаётся одна запись.
  • Клиент и исполнитель в разных часовых поясах: каждый видит корректное местное время и явное обозначение зоны.
  • Клиент отменяет запись: слот возвращается в доступность по заданному правилу.
  • Клиент переносит запись: новая появляется, старая освобождается, оба изменения подтверждены.
  • Календарь исполнителя временно недоступен: сайт не показывает сомнительные слоты как свободные.
  • Письмо попало в спам: запись всё равно видна на странице успеха и доступна в панели.
  • Страница открыта с телефона: выбор даты, ввод данных и отмена доступны без увеличения экрана.

Диагностика частых сбоев

Слот отображается занятым без причины: проверьте часовой пояс, подключённые календари, буфер и скрытые повторяющиеся события. Двойная запись появилась: выясните, где выполняется окончательная проверка. Она должна происходить в системе бронирования в момент подтверждения, а не только в браузере до отправки формы.

Подтверждение не пришло: найдите запись в панели, затем журнал отправки, адрес отправителя и папку спама. Не просите клиента бронировать снова, пока не убедились, что первая попытка отсутствует. Виджет пустой только на сайте: откройте прямую ссылку, проверьте блокировщик, политику встраивания и ошибки браузера.

Если одно и то же событие создаётся дважды, ищите повторный запуск после обновления страницы или повторную обработку уведомления. Используйте уникальный идентификатор операции и делайте повтор безопасным: второй одинаковый запрос должен вернуть уже созданную запись, а не создавать новую.

По теме: Как сделать Метрику на сайте: установка и проверка

Ограничения и случаи, когда нужен другой продукт

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

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

Частые вопросы

Можно ли сделать сайт бронирования без кода?

Да, если задача укладывается в готовый календарь и его можно встроить в конструктор или CMS. Код понадобится при нестандартных ресурсах, обмене с внутренней системой или особых правилах подтверждения.

Нужна ли регистрация клиенту?

Для разовой услуги обычно достаточно подтверждённого контакта и уникальной ссылки управления записью. Кабинет нужен, когда клиент возвращается, хранит историю и управляет несколькими бронированиями.

Как не допустить двойную запись?

Проверяйте свободный ресурс ещё раз в момент подтверждения и создавайте бронь одной неделимой операцией. Проверка только при показе календаря устаревает, пока человек заполняет форму.

Что делать, если внешняя вставка не загрузилась?

Покажите прямую ссылку на запись и контакт для ручного согласования. Затем проверьте доступность сервиса, блокировщики и ошибки в коде вставки.

На воркшопе по сайтам с ИИ вы соберёте страницу услуги, добавите нужный сценарий и проверите первую версию на телефоне.

Собрать сайт
Разборы, кейсы и фишки вайбкодинга каждую неделю в телеграм-канале «Яков вайбкодит».
Первый проект с ИИ: живой разбор, бесплатно Занять место