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>

Supported order fields include:

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>

Optional filters:

• data-tiquo-limit="upcoming" or data-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:

Cancel and reschedule bookings

Signed-in customers can cancel or move their own bookings with the same rules as the customer portal: the service's cancellation deadline, availability, and advance-booking limits. Build the buttons yourself and call the JavaScript API:

const { bookings } = await window.Tiquo.getUpcomingBookings();
const booking = bookings[0];

if (booking.customerActions.canCancel) {
  await window.Tiquo.cancelBooking(booking.id);
}

if (booking.customerActions.canReschedule) {
  const { options } = await window.Tiquo.getBookingRescheduleOptions(booking.id);
  if (options[0]) {
    await window.Tiquo.rescheduleBooking(booking.id, {
      date: options[0].date,
      startTime: options[0].startTime,
    });
  }
}

window.Tiquo.render();

Use the booking's raw id (the rawId field above), not the human booking number. window.Tiquo.render() reloads any data-tiquo-bookings lists on the page after a change. getBookingRescheduleOptions() also accepts { dateFrom, dateTo } (YYYY-MM-DD) to page through calendar dates. When a change isn't allowed, the promise rejects with an Error whose message you can show, such as "The cancellation deadline for this booking has passed." Imported bookings, such as hotel stays from Mews, have customerActions.cancellationBlockedReason set to managed_by_venue; ask the customer to contact the venue instead.

See Cancel and Reschedule Bookings for the fields, rules, and responses.

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>

Besides the raw flow fields, each item has maxGuests, maxGuestsLabel ("Up to 3 guests"), availableGuests, availableGuestsLabel ("5 Guest Passes available") and isAvailable. availableGuestsLabel and isAvailable only describe a pass balance when the flow's requiresGuestPass is true; for unlimited flows, show maxGuestsLabel instead.

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.

Render Guest Pass invitations

For signed-in customers, data-tiquo-guest-passes renders the live guest invitations returned by getGuestPasses(): ones the customer sent (assigned) and ones they received and accepted (accepted). Each item is one invitation. To show how many Guest Passes or Access Passes the customer has left, use Pass balances instead.

<div data-tiquo-guest-passes data-tiquo-guest-pass-status="accepted" data-tiquo-limit="20">
  <article data-tiquo-guest-pass-item>
    <h3 data-tiquo-guest-pass="name"></h3>
    <p data-tiquo-guest-pass="venueName"></p>
    <time data-tiquo-guest-pass="visitDate"></time>
    <p>Invited by <span data-tiquo-guest-pass="personName"></span></p>
  </article>

  <p data-tiquo-empty>No Guest Pass invitations.</p>
</div>

The list clears on logout and refreshes after an invitation is created or accepted. Call window.Tiquo.render() to refresh it at other times. It shows only live invitations, without share tokens or links; see Custom Guest Invitations for tracking sent invitations.

See Rendering and empty states for shared collection behaviour.