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="Назва групи"
     
     <!-- Налаштування часу -->
     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%;">Група 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 надає повний функціонал для створення сайту бронювання будь-яких послуг. Статуси, онлайн-оплата та повний контроль.

Як використовувати AI ChatGPT для наповнення інтернет-магазину
Основні рекомендації щодо просування інтернет магазину та збільшення продажів
Яка платформа найшвидша для SEO у 2026 році?