Public Booking Page
A login-free, six-step wizard that guides customers from resource selection through to payment and booking confirmation.
What It Does
The Public Booking Page is a self-service scheduling interface designed to work without any login or TotalApp account. Customers visit it directly — either from a link on your website, an email, or from the TotalApp sidebar — choose the service they want, pick a date and time, and submit their contact details. The system validates availability in real time and returns a confirmation (or a "pending approval" notice for restricted resources).
No login required
Customers do not need a TotalApp account to make a booking through this page. Their contact information (name, email, phone) is captured as part of the booking record itself.
The Six Steps
The wizard is divided into six sequential steps. A progress indicator at the top shows which step is active and which are complete. Customers can always click Back to revise an earlier step.
Step 1 — Select a Service or Resource
Customers see all available resources grouped by type. Category filter buttons (All, service, room, instructor, equipment) narrow the list. Each resource card shows the name, a short description, duration, price (or "Free"), and an "Approval required" badge if the resource needs admin sign-off. Clicking a card advances to Step 2.
Step 2 — View Resource Details
A confirmation panel shows the full resource specification: duration, max bookings per day, available days, working hours, price, and cancellation notice period. This gives customers all the information they need before committing to a date. Clicking Select Date advances to Step 3.
Step 3 — Pick a Date
An inline calendar shows the current and future months. Days that are outside the resource's availableDays pattern, or that are in the past, are greyed out and not clickable. Customers navigate months with the left and right arrows and click any green (available) day to select it. Today is indicated with a subtle ring.
Step 4 — Pick a Time Slot
The system loads all time slots for the selected date and resource, marking each as available or taken. Taken slots are shown with a strikethrough and cannot be clicked. Available slots are displayed in a responsive grid; the customer clicks one to highlight it. Clicking Fill in Details advances to Step 5.
Step 5 — Enter Contact Details
Customers enter their full name (required), email (required), phone number (optional), and any free-text notes for the provider. If the selected resource has a price greater than 0, clicking the footer button advances to Step 6 (Payment). For free resources, the button is labelled Confirm Booking and submits immediately, creating the booking record and showing the confirmation screen.
Step 6 — Payment
For paid resources, the wizard shows a payment form with three fields:
- Card Number — 16-digit card number displayed in monospace type; auto-formatted as four groups of four digits (e.g.
4242 4242 4242 4242) as the customer types. - Expiry Date — MM/YY format; the slash is inserted automatically after the month digits.
- CVC — three- or four-digit security code.
The Pay button remains disabled until all three fields are filled. Clicking it triggers a 1.2-second simulated processing delay, after which a payment intent ID (pi_sim_…) is generated and the booking record is created with that ID attached. This is a simulated payment — no real charge is made. Wiring up live card processing requires connecting a real payment provider (e.g. Stripe Elements) in place of the simulated flow.
Step 6 is skipped for free resources
Step 6 only appears when the selected resource has price > 0. Resources configured with a price of 0 proceed directly from Step 5 to the confirmation screen without any payment form.
Confirmation Screen
After a successful booking the wizard replaces with a confirmation card that shows:
- A green check icon and "Booking Confirmed!" heading.
- The booked date and time range.
- The customer's name.
- The booking status badge — Confirmed (green) for open resources, or Pending (amber) for resources that require admin approval.
A Book Another button resets the wizard to Step 1 so customers can make a second appointment without reloading the page.
Approval-required resources
When a resource has Requires Approval enabled, the booking is created in Pending status. The admin must manually change the status to Confirmed in the Resource Calendar. Until then, customers should be advised (via your own communication channel) that the slot is not yet guaranteed.
Planner integration
If the Sync bookings to Planner setting is enabled (Settings → Notifications) and the booked resource has a staffId assigned, a Planner event is automatically created for the staff member at the time of confirmation. The Planner event mirrors the booking's date, time range, and customer name. This sync is non-critical — a failure does not prevent the booking from being saved.
UI Walkthrough
| Element | Location | Behaviour |
|---|---|---|
| Step progress bar | Top of wizard card | Shows numbered circles 1–6; completed steps show a green check, current step is highlighted in primary colour |
| Category filter buttons | Step 1, above resource list | Clicking a type filters the resource cards to that type only; "All" shows everything |
| Resource cards | Step 1, main grid | Clicking a card selects it (border turns primary colour) and advances to Step 2 |
| Month nav arrows | Step 3, calendar header | Navigate backwards and forwards one month at a time; past months are not blocked but past days within them are greyed |
| Slot grid | Step 4 | Available slots are clickable buttons; selected slot turns primary; taken slots are grey with strikethrough |
| Back button | Bottom-left of each step | Returns to the previous step without losing data entered in later steps |
| Confirm Booking / Next | Step 5, bottom-right | Disabled until name and email are non-empty. For free resources, submits immediately. For paid resources, advances to Step 6 (Payment). |
| Card Number field | Step 6, payment form | Auto-formats input as four groups of four digits in monospace type; accepts 16-digit numbers |
| Pay button | Step 6, bottom-right | Disabled until card number, expiry, and CVC are all filled; shows a spinner during the 1.2 s simulated processing delay |
| Book Another | Confirmation screen | Resets the wizard to Step 1 with all fields cleared |
Availability Logic
Available time slots are recalculated each time the date changes. The logic:
- Checks whether the selected date's day-of-week is one of the resource's configured available days. If not, no slots are shown.
- Walks through the resource's operating window in fixed-length time-slot steps.
- For each slot start time, checks whether any existing non-cancelled booking on the same resource and date overlaps the slot window, extended by the configured buffer time on each side.
- Also checks whether the current booking count for the day has reached the resource's daily maximum.
- Renders the resulting list of slots, each marked available or not.
Client-side only in this implementation
Availability is computed in the browser using locally fetched booking data. In a production system with many concurrent users you should move the availability check to a server-side endpoint and add optimistic locking to prevent race conditions between two customers booking the last slot simultaneously.
Style Variants
The Public Booking Page respects the global Screen Style setting (Settings → Appearance → Screen Style):
| Style | Look | Best for |
|---|---|---|
| Workstation (default) | Dark surface cards, primary-colour borders, ghost buttons with glow | Internal staff portals and branded dark themes |
| Enterprise | White cards with slate borders, filled indigo primary button | Client-facing portals and traditional corporate environments |
Book Again — Pre-fill from My Bookings
When a customer clicks Book Again on a past or cancelled booking in the My Bookings screen, the wizard opens with the same resource type and resource already selected and jumps directly to Step 2 (Resource Details), skipping the resource-selection grid. This lets customers re-book a familiar service without scrolling through all available resources.
Internally, the My Bookings screen writes a rebook seed (resourceType + resourceId) into the global UI store and then navigates to the booking view. On mount, the wizard detects the seed, pre-fills both fields, clears the seed, and advances to Step 2 automatically. If the resource no longer exists, the wizard falls back to Step 1 gracefully.
Only available when logged in
The "Book Again" button only appears in My Bookings, which requires the customer to be logged in. Anonymous customers using only the Public Booking Page do not have access to booking history and must select a resource from scratch each time.
Frequently Asked Questions
<iframe> pointing at the TotalApp deployment URL with the appt-booking view active. For full white-label embedding (custom domain, logo, colours) configure the White Label module and point your domain at the TotalApp instance.