Booking workflow

The booking widget guides customers through one decision per step, from choosing what to book to the confirmation.

At the top of the widget, a progress bar and Step X of N show where the customer is. The widget counts only the steps that this booking needs: for example, the provider step is not counted when there is nothing to choose. At the bottom, a summary of the choices made so far stays in view next to the button that moves to the next step.

Two booking flows

TheBooking offers two orders for the first choices:

• Service first (default): the customer chooses a service, then a date and time.
• Calendar first: the customer chooses a day from a calendar of availability across all services, then a service that is open on that day.

Set the flow for all widgets under Settings > Core > Frontend > Booking flow. A single widget can use the other flow: see the WordPress block and the flow shortcode attribute.

Service first

1. The customer chooses a service.

2. The customer chooses a provider, or "Soonest available".

3. The customer chooses a day, then a time.

1. Service. Each service shows its duration, its provider (or the number of providers), a short description and the price.
2. Provider. This step appears only when the service lets customers choose the provider and more than one provider can take the booking. If the service offers Soonest available, that entry comes first and shows who has the nearest free time and when. The customer always sees which provider was picked.
3. Date and time. The monthly calendar shows which days have free times. After the customer chooses a day, its times appear below the calendar, grouped into morning, afternoon, and evening, with the end time of each appointment. When the service accepts more than one ticket per booking, the customer also chooses the number of tickets here.

4. The customer fills in the booking form.

5. The customer reviews the booking and confirms.

The booking is confirmed.

4. Details. The booking form of the service. The chosen appointment stays at the top of the step.
5. Review and confirm. Every choice can be changed from its Edit link. The total includes paid form options and, when promotions are active, a discount code.
6. Payment. This step appears only when the service requires an online payment before the booking is complete. See Service payment settings.

The last screen shows the result and the reservation number. From there the customer can add the appointment to their calendar and, when the service has a location and the Google Maps integration is enabled, get directions to it.

Calendar first

The customer chooses a day, then one of the services open on that day.

The first step shows the calendar and, below it, the services. After the customer chooses a day, the calendar shrinks to that week (Show the whole month expands it again) and the list shows which services are open on that day. Services that are not open on that day stay in the list, marked as not available.

The next steps are the same as in the service-first flow: provider, time of the chosen day, details, review, and payment when needed.

Calendar day states

The calendar tells customers why a day can or cannot be booked:

• Available: the day has at least one free time.
• Fully booked: every time of the day is taken.
• Not available: the service is not offered on that day.
• Not bookable yet: the day opens later because of the opening lead time. These days have a dashed border: the customer selects one to see when it opens.

When the current month has no free times, the widget offers to move to the first day that has some.

Behaviors to know

• Next step without a click. After a single choice with the mouse or a finger, the widget moves to the next step by itself. With the keyboard, a choice never changes the step: the customer moves on with the button at the bottom.
• Booking by the day. When a service hides its times (see Frontend settings), the customer chooses only the day, and TheBooking chooses the time.
• Timezone note. When the times are shown in a timezone different from the visitor's, a short note says which timezone they are in. See Timezones.
• Booking in progress. If the customer leaves the page during a booking and comes back within 30 minutes, the widget offers to resume it or to start over. The browser back button moves to the previous step.
• Final check. TheBooking checks availability again when the customer confirms. This keeps the calendar reliable if another customer books the same time, a provider becomes unavailable, or a connected calendar changes while the customer is still on the page.

Services, providers, and capacity

The same customer flow supports simple and advanced setups:

• A solo business can show one service and one calendar.
• A team can let customers choose a provider, or offer Soonest available.
• A busy service can show one team time and let TheBooking assign an available provider.
• A class or group appointment can accept more than one ticket for the same time.

What happens after confirmation

The reservation starts with the status configured by the service:

• Confirmed when no approval or immediate payment is required.
• Pending when the booking needs approval.
• Pending while the customer completes a required online payment.

From that point, TheBooking can send emails, create calendar events, create meeting links, write reservation history, and notify external systems through webhooks. Customers can review their bookings from My bookings.

Before publishing

Make at least one test booking as a customer, on a phone as well as on a computer. Check the booking page, the confirmation email, the reservation status in WordPress, and any connected payment or calendar integration.