<tl-wristband-activate>
Activate a wristband that came in the post by tapping it on the phone (Web NFC where the browser has it); where it cannot, explains the desk at the event instead.
| HTML tag | <tl-wristband-activate> |
| React | import { TlWristbandActivate } from '@ticketlayer/elements-react' |
| Category | Tickets |
| Runs in | web (browser DOM), native (planned React Native set) |
Activate a wristband that came in the post by tapping it on the phone (Web NFC where the browser has it); where it cannot, explains the desk at the event instead. Says the band is active only once the API does. Reads the chip with Web NFC where the browser has it (Chrome on Android); everywhere else it explains the other ways (that phone, or the desk at the event) and offers nothing that would not work. The band is called active only once the API says so.
<tl-wristband-activate order-id="ord_..." slot-id="hsl_..." holder-label="Sam Patel"></tl-wristband-activate>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
heading | heading | A heading in place of "Activate <name>'s wristband". | string | '' |
holderLabel | holder-label | Who the band is for, as the booking names them. | string | '' |
orderId (required) | order-id | The booking the wristband was posted for. | string | undefined |
slotId (required) | slot-id | The holder it was posted to (hsl_...). | 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-wristband-activate__* 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 the band cannot be read or the API refuses it, with the message shown. | CustomEvent<{ message: string; }> |
tlWristbandActivated | Emitted once the API says the band is active, never before. | CustomEvent<TlWristbandActivated> |
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#
Used by: <tl-booking-holders>