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

Сферы применения: Кому и зачем нужен модуль бронирования?

Модуль онлайн-записи от Hotlist.biz — это универсальный инструмент автоматизации, который избавляет бизнес от «ручного» управления расписанием, исключает ошибки и позволяет клиентам бронировать услуги в режиме 24/7.

👨‍⚕️

Услуги и специалисты

Идеально для записи к врачам, в салоны красоты, фитнес-центры или на частные юридические и бизнес-консультации.

🍽️

Аренда ресурсов

Управление бронированием столиков в ресторанах, массажных кресел, кабинетов или номеров в небольших отелях.

🚗

Транспорт и прокат

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

🎟️

События и группы

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

Гибкость и логика «Свободно/Занято»

Главная проблема большинства систем бронирования — их изолированность. В Hotlist.biz модуль записи является частью «организма» статистики продаж. Это означает, что каждое бронирование — это реальный заказ, а каждый временной слот — это статус этого заказа в реальном времени.

🤖 Автоматический контроль слотов

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

Пока заказ находится в статусах В обработке или Оплачен, система блокирует это время для других пользователей. Вам не нужно вручную «закрывать» даты — алгоритм делает это мгновенно.

👥 Групповые записи (Multiply): Один слот — много мест

Что делать, если у вас не один массажист, а три? Или вы продаете 10 билетов на один мастер-класс? Здесь вступает в дело параметр data-booking-slot-allow-multiply.

Как это работает:Вы указываете количество доступных мест (например, 10). Система будет показывать это время какСвободноедо тех пор, пока количество успешных заказов на этот час не достигнет лимита. Только после 10-го клиента слот станет «занятым».

⚡ Почему отмена в админке — это магия для сайта

Гибкость Hotlist.biz проявляется в моменты изменений. Представьте ситуацию: клиент позвонил и отменил запись. Вы заходите в статистику продаж и меняете статус заказа на Отменен.

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

Эта связка работает и в обратную сторону: вы можете вручную создать заказ в админке на определенное время (например, запись по телефону), и сайт тут же «узнает», что это время теперь занято.

Такая архитектура исключает «человеческий фактор» и риск овербукинга (двойных записей) на 100%.

Умное управление временем

⏲️ Гибкий шаг времени (Time Slots)

Вы сами решаете, как дробить рабочий день. Параметр data-booking-slot-booking-time позволяет задать шаг в секундах. Хотите запись на быстрые консультации по 15 минут? Ставьте 900. Нужна аренда зала на 3 часа? Ставьте 10800.

09:0009:1509:3009:45

🛡️ Динамические лимиты и защита от «сюрпризов»

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

1. Минимальный порог: Ограничьте запись «не ранее чем за X часов». Это спасет вас от ситуации, когда клиент записывается «на сейчас», а вы еще не готовы.
2. Максимальный предел: Укажите endofmonth или конкретную дату, чтобы клиенты не бронировали ресурсы на год вперед.
3. Смещение дат: Возможность бронирования со смещением (начало сегодня — конец завтра).

🎨 Буферные зоны для идеального UI

Чтобы интерфейс не выглядел «дырявым», используйте параметр data-booking-time-show-empty. Он позволяет отображать неактивные временные интервалы до начала доступного времени. Это создает визуальный порядок и показывает клиенту полную сетку вашего рабочего дня, даже если утро уже занято или недоступно.

4. Ценообразование и монетизация

💰 Динамический расчет стоимости

Hotlist.biz умеет считать деньги за вас. Если у вас установлена базовая цена за 1 час, а клиент выбирает в селекторе 3 часа — система автоматически применит коэффициент.

Базовая цена (1ч): $50 | Выбрано: 3 часа | Итого к оплате:$150

Если же длительность не должна влиять на стоимость (например, фиксированный билет на квест), просто активируйте параметр data-booking-slot-fixed-price.

💳 Моментальный прием оплаты

Для бизнеса, где важна гарантия явки, предусмотрена функция data-booking-payment-required.

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

Быстрый старт: Превратите любую кнопку в систему записи

Уникальность платформы Hotlist.biz в том, что вам не нужно менять структуру сайта. Достаточно подключить скрипт и добавить нужные атрибуты к любому HTML-элементу (кнопке, ссылке или блоку), чтобы активировать профессиональный виджет бронирования.

Шаг 1: Подключите ресурсы

Добавьте эти строки в раздел или перед закрывающим тегом :

Шаг 2: Создайте кнопку бронирования

Достаточно создать контейнер с атрибутом data-booking и поместить в него кнопку с классом booking-slot-start-order.

⚙️Генератор окна бронирования

Полный справочник параметров (Data-attributes)

📂 Основные настройкиdata-booking-form-id="XX"ОбязательноID формы из Конструктора форм для обработки заказа.data-booking-window-title="Текст"Заголовок всплывающего окна (по умолчанию "Бронирование").data-booking-slot-group-id="0"Цифровой ID группы объектов. Позволяет разделить ресурсы (столики, авто, кабинеты), чтобы клиент видел расписание только конкретной группы.data-booking-slot-group-title="Название"Название объекта в заказе. Если не указано, берется имя группы из настроек.data-booking-product-id="XX"ID товара для жесткой фиксации его в заказе.data-booking-form-captcha="false"Отключает проверочный код (captcha), если он активирован в настройках формы.📅 Ограничения календаряdata-booking-slot-min-calendar-date-form-now=""Минимальная дата бронирования. Форматdays:+X,hours:+Y.

Доступны:month,weeks,days,hours.data-booking-slot-max-calendar-date-form-now=""Максимальная дата в часах (неделя — 168) или константы:endofmonth,endofnextmonth,endofyear,endofnextyear.data-booking-slot-max-calendar-date="2027-05-20"Абсолютная крайняя дата отображения в календаре.🕒 Время и Слотыdata-booking-slot-booking-time="1800"Базовый интервал (шаг) времени в секундах (1800 — 30 мин, 3600 — 1 час).data-booking-slot-max-booking-time="10800"Максимальное время для одного бронирования.data-booking-slot-max-booking-time-show-selector="true"Включает выбор лимита времени (зависит от параметра выше).data-booking-slot-booking-time-allowchange="true«Разрешить «обрезать» выбор времени, если доступный остаток периода меньше желаемого.data-booking-time-show-empty="1"Показ пустых неактивных слотов перед доступным временем:0— выкл,1— все,2— после минимального.data-booking-slot-time-format="12"Формат времени. По умолчанию 24ч. При значении12— формат AM/PM.👥 Групповая логика и Повторыdata-booking-slot-allow-multiply="10"Количество доступных мест на один слот (для групповых мероприятий).data-booking-slot-allow-preorder="0"Логика доступности слота при необработанных заказах:0: занят (статус "Не обработан")1: свободен ("Не обработан")2: свободен ("В обработке")3: свободен (0 и 2 статусы)data-booking-slot-days-extended="true"Разрешить бронирование со смещением дат (выбор даты начала и даты конца).💳 Оплата и Статусыdata-booking-slot-price="10USD"Цена за базовый период. При выборе нескольких периодов происходит автопересчет (коэффициент).data-booking-slot-fixed-price="1"Фиксированная цена (автопересчет и коэффициенты отключены).data-booking-status-after="0"Статус заказа сразу после бронирования:0: Не обработан1: В обработке3: Обработан2, 5, 6: Отмененdata-booking-payment-required="1"Требовать оплату. После заказа — автоматическая переадресация на платежный шлюз.data-booking-payment-system="XX"ID конкретной платежной системы из админки.data-booking-payment-system-hide-selector="true"Скрывает выбор других платежных систем при переадресации.data-booking-status-after-payment="3"Статус, который будет установлен заказу автоматически после успешной оплаты.

🚀 Полная гибкость под любой бизнес-процесс

Сочетание этих параметров позволяет настроить всё: от простой записи в салон красоты до сложной системы аренды оборудования с посуточной оплатой и автоматическим изменением статусов. Ваша фантазия — единственный лимит.

Открыть полную инструкцию подключения🎨 Визуальная индикация статусов

Скрипт автоматически управляет состоянием элементов. Когда слот занят, ему присваивается атрибут data-booking-status="busy". Вы можете задать любой CSS-стиль для таких элементов, чтобы визуально выделить их для пользователя.

/* Пример CSS для выделения занятого слота */

[data-booking-status="busy"] {opacity:0.5;pointer-events:none;filter:grayscale(1); }Реальные примеры интеграции

Ниже приведен готовый фрагмент кода для создания кнопки бронирования группы № 1 с часовым интервалом и автоматическим расчетом цены:

Где увидеть живой пример?

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

🎱 Бронированиебильярдных столов💸 Поддержка чаевыхпри оплате🕒 Шаг времени 1 час📱 Полная адаптивностьПосмотреть живой пример (PeakyClub)🛠️ Advanced: Callback-функции для разработчиков

Для глубокой интеграции и отслеживания каждого шага пользователя используйте функцию callback_hotengine_booking_form($a). Она позволяет внедрять свои скрипты (аналитику, проверку данных, уведомления) на любом этапе бронирования.

functioncallback_hotengine_booking_form(step) {

console.log(’Текущий этап бронирования:’, step);

if (step === 10) { /* Ваш код при подтверждении */ }

}ID ($a)Описание события2Перед запросом списка свободных слотов3Список свободных слотов сформирован и выведен4Пользователь нажал кнопку «Назад» / Показать слоты с указанной даты6Начало процесса подтверждения (выбор конкретного слота)7Перед отправкой подтверждения бронирования8Формирование финального списка данных перед отправкой9Момент перед непосредственной отправкой выбранного слота10Отправка формы подтверждения бронирования (Action)1Финальный результат (успешная отправка или ошибка)

Управление и аналитика: Полный контроль над записями

Модуль бронирования Hotlist.biz — это не просто виджет на сайте, а полноценная CRM-система. Все данные о бронированиях мгновенно синхронизируются с вашей панелью управления, предоставляя детальную отчетность и инструменты для работы с клиентами.

📊Детальная статистика продаж

1. Данные покупателя: Полная информация из формы (имя, телефон, email, доп. поля).
2. Детализация слотов: Четкое указание выбранных дат и временных интервалов.
3. Прозрачное ценообразование: В каждом заказе видна базовая цена за час, примененный коэффициент и итоговая стоимость.
4. Управление статусами: Меняйте статусы («В обработке», «Подтвержден», «Отменен») прямо в таблице продаж.

Пример: 1 час ($10) × 3 (коэффициент) = $30 Итого

📅Административный календарь

1. Наглядный обзор: Визуальная сетка всех занятых и свободных слотов на день, неделю или месяц.
2. Мгновенная инфо: При клике на занятый слот открывается карточка с данными о заказчике и статусе оплаты.
3. Контроль оплат: Визуальные маркеры оплаченных и неоплаченных броней.
4. Гибкое редактирование: Возможность оперативно управлять каждым конкретным слотом через административный интерфейс.

💡 Почему это важно для бизнеса?

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

✅ Все готово к запуску!

Используйте сочетание data-атрибутов для логики, CSS для стиля занятых слотов и Callback-функции для полного контроля над поведением системы. Hotlist.biz предоставляет полный функционал для создания сайта бронирования любых услуг. Статусы, Оплыта онлайн и полный контроль.

Создать сайт бесплатно