Block: Online Booking
This block adds a full booking system to the page: the client selects a date, time, services, a specialist or resource, leaves contact details, and confirms the booking.
🧭 Operating modes
1️⃣ Single screen
All steps are displayed immediately on one page. The client can choose in any order.
2️⃣ Step-by-step mode
The client completes the booking step by step. Progress is shown at the top: Step 1 of 4 and the name of the current stage.
After each step, small “chips” are displayed with the already selected values (for example: Date, Time, Service).
The “Next” button becomes active only when the step is filled in. The final stage is Contacts.
⚙️ How booking logic works
Specialist selection
- If selection is not required, the system will assign one automatically.
- You can choose an auto-assignment strategy (who is available / who is less busy).
- If a time has already been selected, unavailable specialists are highlighted.
- When changing the specialist, the selected time is reset (if it becomes unavailable).
Resource selection
- A resource can be a room, hall, equipment, etc.
- Unavailable resources for the selected time are highlighted.
Date and time
- Only truly available options are shown.
- You can enable grouping: Morning / Day / Evening.
- If a service is long and does not fit, the time becomes unavailable.
- When changing an employee, resource, or services, the time may be reset automatically.
Services
- You can select one or more services.
- Service durations are summed.
- If the total duration does not fit into the slot, an error appears.
- Unavailable services for the selected time are highlighted.
🔁 Step interdependence
The block is smart: each selection affects the availability of other steps.
- Selected time → some specialists may become unavailable
- Selected specialist → available time is updated
- Added service → the selected slot may disappear
If the selected time no longer fits, it is cleared automatically.
📝 Contact details
- Name and phone are required.
- You can add additional fields (text, select, checkbox, etc.).
- Fields with errors are highlighted.
💳 Prepayment
- You can enable prepayment.
- You can make it mandatory.
- If a payment method is not configured, the client will see a warning.
- The amount is calculated automatically: base price + services.
- If the amount is 0, prepayment will be unavailable.
💰 Final summary before submission
Before confirming, the client sees:
- Date
- Time
- Selected services
- Specialist (or “auto”)
- Resource (or “auto”)
- Total amount (if enabled)
✅ After a successful booking
- A success message is shown.
- The booking date and time are displayed.
- You can click “Book again”.
⚙️ Block setup
Widget mode
- Single screen — everything is displayed at once.
- Step-by-step mode — the client goes through the stages in order.
Step order
- You can change the order: Specialists → Resources → Time → Services.
- In step-by-step mode, stages follow the selected order strictly.
Specialists
- Enable / disable the step.
- Make it required.
- Set up auto-assignment.
- Choose the display type: list or scroll + search.
Resources
- Enable / disable the step.
- Make it required.
- Choose the display type.
Services
- Enable / disable service selection.
- Make a service required.
- Configure the display (list or scroll).
Display
- Button text “Book”.
- Success message after booking.
- Light or dark theme.
- Show or hide the total amount.
Prepayment
- Enable prepayment.
- Make it mandatory.
- Select a payment method.
Additional fields
- You can add text fields, checkboxes, select lists, etc.
- You can make a field required.
- You can reorder fields.
🚨 Common reasons it doesn’t work
- Schedule or slots are not configured.
- There are no active services or employees.
- The total duration of services does not fit into the slot.
- Mandatory prepayment is enabled, but no payment method is configured.