Customer Booking Flow

This page describes the complete customer journey from opening your page to adding services to the cart. The booking flow differs based on your branch type - PrivateSpace (space rental) and ServiceProvider (service delivery). Both flows end at the cart and checkout, where the customer completes the order.

Customers access the booking page through a link to your branch in the following format: https://vasefirma.reservine.me/branch/{id}/{slug}/reservation

You can share this link on your website, social media, or send it directly to customers.

---

PrivateSpace - Space Rental

The PrivateSpace flow is designed for businesses where the customer reserves a space for a specific duration - such as a tennis court, meeting room, photo studio, or party room. The customer chooses the duration themselves.

Step 1: Viewing the Time Grid

After opening the branch page, the customer sees a calendar grid with time slots. The grid displays:

• Available slots - free time slots that can be clicked
• Occupied slots - already booked times that are visually distinguished
• Opening hours - slots outside opening hours are unavailable

The customer can navigate between days using the navigation in the calendar header.

Step 2: Selecting a Time Range

The customer selects their time as follows:

1. Clicks on the start of the desired time in the grid
2. Drags (on desktop) or clicks on the end to select the duration
3. The selected block is highlighted in the grid

Minimum and maximum reservation duration is governed by your branch settings (see timeslot settings).

Step 3: Adding to Cart

After selecting a time range, the block is automatically added to the cart:

• On desktop, the cart appears as a sidebar panel next to the grid
• On mobile devices, the cart appears as a bottom dock that can be expanded

In the cart, the customer sees:

• The selected day and time range
• Duration
• Rental price

Step 4: Adding More Blocks (Optional)

The customer can add multiple blocks to a single cart - for example, booking two different hours or different days. Each block is added by repeating the selection in the grid.

Step 5: Proceeding to Checkout

When the customer is satisfied with their selection, they click the Continue button in the cart. This takes them to the checkout, where they fill in personal details and make the payment.

---

ServiceProvider - Service Delivery

The ServiceProvider flow is designed for businesses where the customer selects a specific service and employee - such as a hair salon, massage parlor, medical office, or auto repair shop.

Step 1: Browsing Services by Category

After opening the branch page, the customer sees a list of services grouped into categories. At the top of the page, category tabs (sticky header) are displayed, allowing quick navigation to the desired service group.

Each service is displayed as a card with the following information:

• Service name
• Description (if provided)
• Duration (e.g., 60 min)
• Price (e.g., 800 CZK)

Step 2: Recent Reservations Section (For Logged-In Users)

If the customer is logged in and has visited before, a Recent Reservations section appears above the service list. This section allows quickly repeating a previous reservation with a single click - the customer doesn't need to search for the service in the catalog again.

Step 3: Selecting a Service

The customer clicks on the desired service. What happens next depends on your branch settings:

If employee selection is enabled:

• An employee picker appears - the customer sees available employees with their profile photos and names
• The customer clicks on their preferred employee

If employee selection is not enabled:

• An employee is assigned automatically based on availability
• The customer proceeds directly to time selection

Step 4: Selecting a Time

After choosing a service (and optionally an employee), the customer is shown a time picker with available time slots. The display depends on your timeslot settings:

• Flexible mode - the customer sees a time grid and selects a range (similar to PrivateSpace)
• Fixed mode - the customer sees specific time slots (e.g., 9:00, 9:30, 10:00) and clicks on one
• Scheduled mode - the customer sees predefined blocks (e.g., "Morning group 9:00-11:00")

Learn more about timeslot modes in branch settings.

Step 5: Adding to Cart

The selected service with the chosen time is added to the cart. On desktop, the cart appears as a sidebar; on mobile, as a bottom dock.

In the cart, the customer sees:

• Service name
• Employee name (if selected)
• Date and time
• Price

Step 6: Adding More Services (Optional)

The customer can return to the service catalog and add more services to the same cart. This is useful, for example, in a hair salon where the customer books both a haircut and coloring at once.

Step 7: Proceeding to Checkout

When the customer finishes selecting, they click the Continue button in the cart and proceed to the checkout.

---

Mobile Optimization

The booking flow is fully responsive and optimized for use on mobile phones and tablets:

• The cart appears on mobile as a compact bottom bar that can be expanded to show details
• The time grid (PrivateSpace) supports touch gestures for scrolling and selection
• The service list (ServiceProvider) is optimized for single-finger scrolling with sticky category headers
• The employee picker appears as a scrollable carousel on small screens

Common Elements in Both Flows

Regardless of the branch type, both flows share the following elements:

• Cart timer - after adding the first item, a countdown begins showing how long the customer has to complete the order
• Price calculation - the cart automatically calculates the total price including any discounts
• Voucher support - the customer can enter a discount or gift code in the cart
• Membership - if the customer has an active membership, the discount is applied automatically

Related Pages

• Cart & Checkout - continuation of the booking flow (4 steps)
• Branch Types - detailed comparison of PrivateSpace and ServiceProvider
• Timeslot Settings - time grid configuration