E-commerce: Продвижение и запуск интернет магазина
Полезные статьи и инструкции по продвижению, запуску и развитию интернет-магазинов в сфере E-commerce

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



Интерфейс модуля бронирования: выбор услуг, календарь со свободными интервалами и кнопка мгновенного подтверждения записи


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

Модуль онлайн-записи от 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:00
09:15
09:30
09:45

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

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

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

🎨 Буферные зоны для идеального 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: Подключите ресурсы

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

<script defer src="/templates/scripts/hotengine-script-api-booking.js"></script>
<link rel="stylesheet" type="text/css" href="/templates/styles/booking/css_hotengine_booking.css" />
Шаг 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 с часовым интервалом и автоматическим расчетом цены:

<div class="booking-slot" 
     data-booking 
     data-booking-slot-group-id="1" 
     data-booking-slot-group-title="Title"
     
     <!-- Настройки времени -->
     data-booking-slot-booking-time="3600"
     data-booking-slot-booking-time-allowchange="true"
     data-booking-time-show-empty="1"
     data-booking-slot-max-booking-time="10800"
     data-booking-slot-max-booking-time-show-selector="true"
     
     <!-- Календарь -->
     data-booking-slot-min-calendar-date-form-now=""
     data-booking-slot-max-calendar-date-form-now="endofnextmonth" 
     data-booking-slot-max-calendar-date=""
     
     <!-- Управление местами и логика -->
     data-booking-slot-allow-multiply="0"
     data-booking-slot-days-extended="0"
     data-booking-slot-allow-preorder="0"
     
     <!-- Форма и Оплата -->
     data-booking-form-id="ВАШ_ID_ФОРМЫ"
     data-booking-slot-price="10USD"
     data-booking-slot-fixed-price="false"
     data-booking-payment-required="false"
     data-booking-status-after="0" 
     data-booking-status-after-payment="1" 
     data-booking-slot-time-format="24" 
     data-booking-window-title="Бронирование">

     <div style="display:block; margin:15px auto; font-size:140%;">Group 1</div>
     <span class="booking-slot-status-block"><span></span></span>
     <span class="booking-slot-start-order"><span></span></span>
</div>
        
Где увидеть живой пример?

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

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

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

function callback_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-система. Все данные о бронированиях мгновенно синхронизируются с вашей панелью управления, предоставляя детальную отчетность и инструменты для работы с клиентами.

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

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

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

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

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

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

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

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

Первые шаги после создания интернет магазина.
Пошаговая Инструкция по созданию интернет-магазина с поисковым фильтром и мобильной версией
Как создать удобный и понятный интернет-магазин?