Reference
<tl-booking-holders>
Manage my booking, people first: each holder with their ticket and add-ons, to name or rename, move an add-on to someone else, place add-ons nobody has yet, and activate a posted wristband.
| HTML tag | <tl-booking-holders> |
| React | import { TlBookingHolders } from '@ticketlayer/elements-react' |
| Category | Account |
| Runs in | web (browser DOM), native (planned React Native set) |
Manage my booking, people first: each holder with their ticket and add-ons, to name or rename, move an add-on to someone else, place add-ons nobody has yet, and activate a posted wristband. The event's pass policy decides what can change, its naming rules are on each card, and its refusals are said in plain words on the card.
<tl-booking-holders order-id="ord_..."></tl-booking-holders>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
allowActivation | allow-activation | Offer to activate a wristband that came in the post, on a holder whose posted band waits for them. | boolean | true |
guestPageUrl | guest-page-url | The page a guest's link opens, the one carrying tl-holder-pass; the link adds order, slot and holder_token to it. Without it, this page without its query. | string | '' |
heading | heading | The element's heading. | string | "Who's going" |
orderId (required) | order-id | The booking to manage. | string | undefined |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-booking-holders__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlError | Emitted when a change is refused or the booking cannot be loaded, with the message shown. | CustomEvent<{ message: string; }> |
tlGuestLinkCreated | Emitted when the booker makes a guest's own link, with the link and when it expires. | CustomEvent<TlGuestLinkCreated> |
tlHoldersChanged | Emitted after a holder is named or an add-on is moved or placed. | CustomEvent<TlHoldersChanged> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.
Related elements#
Renders: <tl-wristband-activate>