<tl-seat-map>
| HTML tag | <tl-seat-map> |
| React | import { TlSeatMap } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM) |
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
apiUrl | api-url | API URL for the seat map data | string | 'https://api.ticketlayer.com' |
hboUrl | hbo-url | Base URL for the hosted seat map (HBO URL) | string | 'https://checkout.ticketlayer.com' |
height | height | Height of the seat map | string | '600px' |
occurrenceId (required) | occurrence-id | Occurrence ID to show seat map for | string | undefined |
width | width | Width of the seat map | string | '100%' |
Events
| Event | Description | Type |
|---|---|---|
tlCartChange | Emitted when cart seats change | CustomEvent<{ seatIds: string[]; }> |
tlError | Emitted when an error occurs | CustomEvent<{ error: string; }> |
tlLoad | Emitted when seat map is loaded | CustomEvent<{ seatMapId: string; }> |
tlReady | Emitted when seat map is ready | CustomEvent<void> |
tlSeatAdded | Emitted when a seat is added to cart | CustomEvent<{ seatId: string; ticketTypeId: string; }> |
tlSeatRemoved | Emitted when a seat is removed from cart | CustomEvent<{ seatId: string; }> |
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.