Booking workflow

The calendar
Days with available slots and days with booked slots are highlighted with corresponding colors.
Frontend
Under the day number, colored dots preview what services are available in that day.
The booking calendar
When the customer clicks on highlighted days, a step-by-step booking process shows.
Step-by-step booking process
Selecting the service
Depending on how many services are available for the day, the customer may be asked to choose between them. In case there are 2 or more services, selecting one of them will display the full description of the service (if available) before continuing.
Service selection step
Selecting the location
If 2 or more locations are assigned to the selected service, additional step to choose the location is presented.
Location selection step
When a location is selected, or when there is only just one location available, a map is displayed before continuing. 
Maps settings
Google Maps
Selecting the time slot
A dropdown with available (and booked, if any) timeslots allows the customer to pick the preferred one.
Reservation form
The final step, where user data is collected.
Reservation form
The reservation form (fully customizable)
Booking feedback
At the end of the booking process, a positive confirmation message is shown to the customer.
Booking process is completed.

Elementor

Next - Reservations

Reservations list

Last modified 4mo ago

Copy link

Contents

The calendar

Step-by-step booking process

Selecting the service

Selecting the location

Selecting the time slot

Reservation form

Booking feedback