E-commerce: Promotion and Launch of an Online Store
Useful articles and guides on promoting, launching, and developing online stores in the E-commerce field

How to launch a booking website and an online appointment system: a complete guide to creation and configuration



Booking module interface: service selection, calendar with available time slots, and instant booking confirmation button


Areas of Application: Who Needs a Booking Module and Why?

The online appointment module from Hotlist.biz is a universal automation tool that relieves businesses of "manual" schedule management, eliminates errors, and allows customers to book services 24/7.

👨‍⚕️

Services and Specialists

Perfect for booking doctors, beauty salons, fitness centers, or private legal and business consultations.

🍽️

Resource Rental

Management of table reservations in restaurants, massage chairs, office rooms, or rooms in small hotels.

🚗

Transport and Rental

Organization of car, bicycle, and scooter rentals or specialized construction equipment with return time control.

🎟️

Events and Groups

Selling spots for masterclasses, group tours, webinars, or registration for sporting events.

Flexibility and the "Available/Busy" Logic

The main problem with most booking systems is their isolation. In Hotlist.biz, the appointment module is an integral part of the sales statistics "organism." This means that every booking is a real order, and every time slot represents the real-time status of that order.

🤖 Automatic Slot Control

The system understands availability not just by the presence of a record, but by the order status in your admin panel. As soon as a customer selects a time and confirms the form, an order is created.

While the order is in the Processing or Paid statuses, the system blocks this time for other users. You don't need to manually "close" dates — the algorithm does it instantly.

👥 Group Bookings (Multiply): One Slot — Multiple Spots

What if you have not one massage therapist, but three? Or you are selling 10 tickets for a single masterclass? This is where the data-booking-slot-allow-multiply parameter comes into play.

How it works: You specify the number of available spots (e.g., 10). The system will show this time as Available until the number of successful orders for that hour reaches the limit. Only after the 10th customer will the slot become "busy."

⚡ Why Admin Cancellation is Magic for the Website

The flexibility of Hotlist.biz shines during moments of change. Imagine the situation: a client calls and cancels an appointment. You go into the sales statistics and change the order status to Canceled.

Instant Reaction: In that same second, without cache reloads or manual edits, this time slot on the website becomes available for booking by others again.

This connection works both ways: you can manually create an order in the admin panel for a specific time (e.g., a phone booking), and the website will immediately "know" that this time is now occupied.

This architecture eliminates the "human factor" and the risk of overbooking (double bookings) by 100%.

Smart Time Management

⏲️ Flexible Time Slots

You decide how to divide the workday. The data-booking-slot-booking-time parameter allows you to set the step in seconds. Want bookings for quick 15-minute consultations? Set it to 900. Need to rent a hall for 3 hours? Set it to 10800.

09:00
09:15
09:30
09:45

🛡️ Dynamic Limits and "Surprise" Protection

The system allows you to configure the planning horizon to suit your staff's convenience.

  • Minimum Threshold: Restrict bookings to "no earlier than X hours." This saves you from situations where a client books "for right now" before you are ready.
  • Maximum Limit: Specify endofmonth or a specific date so that clients don't book resources a year in advance.
  • Date Offset: Ability to book with an offset (start today — end tomorrow).

🎨 Buffer Zones for Perfect UI

To prevent the interface from looking "empty," use the data-booking-time-show-empty parameter. It allows displaying inactive time intervals before the available time starts. This creates visual order and shows the client the full grid of your workday, even if the morning is already booked or unavailable.

4. Pricing and Monetization

💰 Dynamic Cost Calculation

Hotlist.biz can do the math for you. If you have a base price for 1 hour and a client selects 3 hours in the selector — the system will automatically apply the coefficient.

Base price (1h): $50   |   Selected: 3 hours   |   Total to pay: $150

If duration should not affect the cost (e.g., a fixed ticket for a quest room), simply activate the data-booking-slot-fixed-price parameter.

💳 Instant Payment Acceptance

For businesses where a "show-up" guarantee is vital, the data-booking-payment-required function is provided.

As soon as the user clicks "Book," the system doesn't just create an order; it instantly redirects them to the chosen payment gateway. The booking is confirmed only after a successful transaction, reducing "no-show" rates to zero.

Quick Start: Turn Any Button into a Booking System

The uniqueness of the Hotlist.biz platform is that you don't need to change your website structure. Simply connect the script and add the required attributes to any HTML element (button, link, or block) to activate a professional booking widget.

Step 1: Connect Resources

Add these lines to the <head> section or before the closing </body> tag:

<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" />
Step 2: Create a Booking Button

It is enough to create a container with the data-booking attribute and place a button with the booking-slot-start-order class inside it.

Full Parameter Reference (Data-attributes)

📂 General Settings
data-booking-form-id="XX" Required
Form ID from the Form Builder to process the order.
data-booking-window-title="Text"
The title of the popup window (default is "Booking").
data-booking-slot-group-id="0"
Digital ID of the object group. Allows separating resources (tables, cars, offices) so the client only sees the schedule for a specific group.
data-booking-slot-group-title="Name"
The name of the object in the order. If not specified, the group name from the settings is used.
data-booking-product-id="XX"
Product ID for strict binding to the order.
data-booking-form-captcha="false"
Disables the verification code (captcha), even if it is activated in the form settings.
📅 Calendar Restrictions
data-booking-slot-min-calendar-date-form-now=""
Minimum booking date. Format: days:+X,hours:+Y.
Available: month, weeks, days, hours.
data-booking-slot-max-calendar-date-form-now=""
Maximum date in hours (one week — 168) or constants: endofmonth, endofnextmonth, endofyear, endofnextyear.
data-booking-slot-max-calendar-date="2027-05-20"
Absolute deadline date for display in the calendar.
🕒 Time and Slots
data-booking-slot-booking-time="1800"
Base interval (step) of time in seconds (1800 — 30 min, 3600 — 1 hour).
data-booking-slot-max-booking-time="10800"
Maximum time for a single booking.
data-booking-slot-max-booking-time-show-selector="true"
Enables the time limit selector (depends on the parameter above).
data-booking-slot-booking-time-allowchange="true"
Allow "trimming" the time selection if the available remaining period is less than desired.
data-booking-time-show-empty="1"
Display empty inactive slots before available time: 0 — off, 1 — all, 2 — after minimum.
data-booking-slot-time-format="12"
Time format. Default is 24h. If set to 12 — AM/PM format.
👥 Group Logic and Repeats
data-booking-slot-allow-multiply="10"
Number of available spots per slot (for group events).
data-booking-slot-allow-preorder="0"
Slot availability logic for unprocessed orders:
0: busy ("Unprocessed" status)
1: available ("Unprocessed")
2: available ("In Processing")
3: available (statuses 0 and 2)
data-booking-slot-days-extended="true"
Allow booking with a date offset (selecting a start date and an end date).
💳 Payment and Statuses
data-booking-slot-price="10USD"
Price for the base period. When multiple periods are selected, auto-calculation (coefficient) occurs.
data-booking-slot-fixed-price="1"
Fixed price (auto-calculation and coefficients are disabled).
data-booking-status-after="0"
Order status immediately after booking:
0: Unprocessed
1: In Processing
3: Processed
2, 5, 6: Canceled
data-booking-payment-required="1"
Require payment. After the order is placed — automatic redirection to the payment gateway.
data-booking-payment-system="XX"
ID of a specific payment system from the admin panel.
data-booking-payment-system-hide-selector="true"
Hides the selection of other payment systems during redirection.
data-booking-status-after-payment="3"
The status that will be automatically set to the order after successful payment.

🚀 Full Flexibility for Any Business Process

The combination of these parameters allows you to configure everything: from a simple appointment at a beauty salon to a complex equipment rental system with daily rates and automatic status updates. Your imagination is the only limit.

Open full integration guide
🎨 Visual Status Indication

The script automatically manages the state of elements. When a slot is busy, it is assigned the attribute data-booking-status="busy". You can set any CSS style for such elements to visually distinguish them for the user.

/* CSS example for highlighting a busy slot */
[data-booking-status="busy"] { opacity: 0.5; pointer-events: none; filter: grayscale(1); }
Real Integration Examples

Below is a ready-made code snippet for creating a booking button for Group №1 with a one-hour interval and automatic price calculation:

<div class="booking-slot" 
     data-booking 
     data-booking-slot-group-id="1" 
     data-booking-slot-group-title="Title"
     
     <!-- Time Settings -->
     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"
     
     <!-- Calendar -->
     data-booking-slot-min-calendar-date-form-now=""
     data-booking-slot-max-calendar-date-form-now="endofnextmonth" 
     data-booking-slot-max-calendar-date=""
     
     <!-- Spot Management and Logic -->
     data-booking-slot-allow-multiply="0"
     data-booking-slot-days-extended="0"
     data-booking-slot-allow-preorder="0"
     
     <!-- Form and Payment -->
     data-booking-form-id="YOUR_FORM_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="Booking">

     <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>
        
Where to see a live example?

See how the module works on a real project. A booking system for a billiard club using individual groups for tables and advanced payment logic.

🎱 Billiard table booking
💸 Tips support during payment
🕒 1-hour time step
📱 Full responsiveness
View live example (PeakyClub)
🛠️ Advanced: Callback functions for developers

For deep integration and tracking every user step, use the callback_hotengine_booking_form($a) function. It allows you to inject your scripts (analytics, data validation, notifications) at any stage of the booking process.

function callback_hotengine_booking_form(step) {
  console.log('Current booking stage:', step);
  if (step === 10) { /* Your code on confirmation */ }
}
ID ($a) Event Description
2Before requesting the list of available slots
3Available slots list is formed and displayed
4User clicked "Back" / Show slots from a specified date
6Confirmation process starts (specific slot selection)
7Before sending booking confirmation
8Final data list generation before sending
9Moment before the direct submission of the selected slot
10Submission of the booking confirmation form (Action)
1Final result (successful submission or error)

Management and Analytics: Full Control Over Bookings

The Hotlist.biz booking module is not just a widget on a website, but a full-fledged CRM system. All booking data is instantly synchronized with your control panel, providing detailed reporting and tools for customer relations.

📊 Detailed Sales Statistics

  • Customer Data: Full information from the form (name, phone, email, additional fields).
  • Slot Detailing: Clear indication of selected dates and time intervals.
  • Transparent Pricing: Each order shows the base price per hour, the applied coefficient, and the total cost.
  • Status Management: Change statuses ("Processing," "Confirmed," "Canceled") directly in the sales table.
Example: 1 hour ($10) × 3 (coefficient) = $30 Total

📅 Administrative Calendar

  • Visual Overview: A visual grid of all occupied and free slots for the day, week, or month.
  • Instant Info: Clicking an occupied slot opens a card with customer data and payment status.
  • Payment Control: Visual markers for paid and unpaid bookings.
  • Flexible Editing: Ability to promptly manage each specific slot through the administrative interface.

💡 Why Is This Important for Business?

You don't just receive an order notification; you see the entire economics of the process. The system automatically calculates revenue based on booking duration and allows administrators to work within a single visual calendar field, eliminating the risk of overlaps or double bookings.

✅ Everything is ready for launch!

Use a combination of data attributes for logic, CSS for styling occupied slots, and Callback functions for full control over system behavior. Hotlist.biz provides full functionality for creating a booking site for any services. Statuses, online payments, and total control.

Choosing a platform for a professional online store with many products and automation.
What is the fastest platform for SEO in 2026?
Superfast Architecture for E-Commerce, or How to Build a Superfast Store Using Hotlist.biz