Orders and bookings
Display customer orders, bookings, and guest pre-registration flows.
Orders and bookings
Display customer orders, bookings, and guest pre-registration flows. First, complete the installation.
Render orders
<div data-tiquo-orders data-tiquo-limit="5">
<div data-tiquo-order-item>
<span data-tiquo-order="month"></span>
<span data-tiquo-order="day"></span>
<span data-tiquo-order="year"></span>
<span data-tiquo-order="date"></span>
<span data-tiquo-order="orderNumber"></span>
<span data-tiquo-order="status"></span>
<span data-tiquo-order="items"></span>
<span data-tiquo-order="itemQuantity"></span>
<span data-tiquo-order="total"></span>
</div>
<p data-tiquo-empty>No orders yet.</p>
</div>Orders collection
Inspect the collection, filters, template, every supported order field, and the empty-state fallback.
Account
Recent orders
Order
#TQ-1048
Placed
28 Jun 2026
Total
£42.50
Every other order field
7 fieldsOrder day
28
Order month
JUN
Order year
2026
Order status
Completed
Order items
Recovery Suite, Guest pass
Item quantity
2
Quantity label
2 items
No orders yet
Your completed orders will appear here.
Tiquo hides the first order card, clones it once per result, fills its fields, and shows the fallback only when no orders exist.
Supported order fields include:
| Attribute value | Description |
|---|---|
date | Order creation date as DD/MM/YYYY |
day | Order creation day, such as 28 |
month | Short order creation month, such as JUN |
year | Order creation year, such as 2026 |
items | Comma-separated order item names |
itemQuantity | Total quantity across all order items |
itemQuantityLabel | Total quantity with label, such as 1 item or 2 items |
total | Order total formatted with the order currency and two decimal places, such as £12.50 |
Optional filters:
data-tiquo-limit="5"data-tiquo-status="completed"
The first data-tiquo-order-item element is the template. Tiquo hides that
template and appends rendered copies for each order.
data-tiquo-status filters by the order lifecycle status, not payment status.
Use values such as completed, processing, cancelled, refunded, or
open_tab. Do not use payment statuses such as paid here.
Render bookings
<div data-tiquo-bookings data-tiquo-limit="upcoming" data-tiquo-count="5">
<div data-tiquo-booking-item>
<span data-tiquo-booking="date"></span>
<span data-tiquo-booking="day"></span>
<span data-tiquo-booking="month"></span>
<span data-tiquo-booking="year"></span>
<span data-tiquo-booking="id"></span>
<span data-tiquo-booking="serviceName"></span>
<span data-tiquo-booking="items"></span>
<span data-tiquo-booking="itemQuantity"></span>
<span data-tiquo-booking="duration"></span>
<span data-tiquo-booking="startTime"></span>
<span data-tiquo-booking="endTime"></span>
<span data-tiquo-booking="status"></span>
</div>
<p data-tiquo-empty>No upcoming bookings.</p>
</div>Bookings collection
Inspect the collection filters, repeatable template, every supported booking field, and empty state.
Bookings
Upcoming visits
Booking number
BKG-1CTYN6
Booking date
03/08/2026
Service name
Recovery Suite
Start time
11:00
End time
12:00
Booking status
Confirmed
Every other booking field
9 fieldsInternal booking ID
booking_01JZ8A2K
Booking day
03
Booking month
AUG
Booking year
2026
Service category
Wellness
Booking items
Recovery Suite
Item quantity
2
Quantity label
2 items
Duration
60 min
No upcoming bookings
Future confirmed bookings will appear here.
Canonical booking field names are shown. The documented booking-prefixed aliases bind to the same values.
Optional filters:
data-tiquo-limit="upcoming"ordata-tiquo-limit="past"data-tiquo-count="5"data-tiquo-status="confirmed"
The first data-tiquo-booking-item element is the template. Tiquo hides that
template and appends rendered copies for each booking.
data-tiquo-upcoming="true" still works for older pages, but new embeds
should use data-tiquo-limit="upcoming" instead. When using upcoming or
past, use data-tiquo-count for the number of bookings to render.
Booking fields:
| Field | Description |
|---|---|
date or bookingDate | Booking date formatted as DD/MM/YYYY |
day or bookingDay | Two-digit booking day |
month or bookingMonth | Three-letter booking month, such as JUN |
year or bookingYear | Four-digit booking year |
items or bookingItems | Booking service/item name. Falls back to the service record when no order snapshot exists. |
itemQuantity or bookingItemQuantity | Booking attendee/item quantity |
itemQuantityLabel or bookingItemQuantityLabel | Quantity with item or items label |
id or bookingId | Human booking number, such as BKG-1CTYN6 |
rawId | Internal booking row ID |
duration or bookingDuration | Booking duration, such as 30 min |
startTime or bookingStartTime | Booking start time formatted as HH:mm |
endTime or bookingEndTime | Booking end time formatted as HH:mm |
status | Booking status |
serviceName | Booking service name |
serviceCategoryName | Booking service category name, when captured |
Render guest pre-registration flows
For signed-in customers, data-tiquo-guest-flows renders the Guest Flows returned by the Customer API.
<div data-tiquo-guest-flows data-tiquo-limit="10">
<article data-tiquo-guest-flow-item>
<h3 data-tiquo-guest-flow="label"></h3>
<p data-tiquo-guest-flow="inviteMessage"></p>
<span data-tiquo-guest-flow="availableGuestsLabel"></span>
<a data-tiquo-guest-flow="hostedUrl" data-tiquo-preserve-text>Register guests</a>
</article>
<p data-tiquo-empty>No guest registration flows are available.</p>
</div>Advanced sites can access the same data directly:
const { guestFlows } = await window.Tiquo.getGuestFlows();See the Customer API Guest Flows reference for the raw response fields.
See Rendering and empty states for shared collection behaviour.