<tl-concierge-slot>
The "Need help?" another element hosts: renders nothing unless the channel has Concierge on for that placement, then a help field that opens tl-concierge inline with the host's context and what was ty
| HTML tag | <tl-concierge-slot> |
| React | import { TlConciergeSlot } from '@ticketlayer/elements-react' |
| Category | support |
| Runs in | web (browser DOM), native (planned React Native set) |
The "Need help?" another element hosts: renders nothing unless the channel has Concierge on for that placement, then a help field that opens tl-concierge inline with the host's context and what was typed. The buy-tickets modal, the checkout step, my-orders and the order confirmation each place one with what they know (event, occurrence, cart, order). It renders nothing - no box, no gap - unless the channel's Concierge config is on with that placement switched on; then the help field: a "Need help?" heading that opens the panel, the host's context as a chip, and one field that searches (and asks the persona, when the AI is on). Sending the field opens tl-concierge inline with the host's context, already searching for what was typed.
<tl-concierge-slot placement="buy-modal" event-id="evt_1"></tl-concierge-slot>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
cartId | cart-id | Context: the cart. | string | undefined | undefined |
eventId | event-id | Context: the event. | string | undefined | undefined |
label | label | The text of the toggle. | string | 'Need help?' |
occurrenceId | occurrence-id | Context: the occurrence. | string | undefined | undefined |
orderId | order-id | Context: the order. | string | undefined | undefined |
placement (required) | placement | Which element hosts it; the channel switches each placement on separately. | "buy-modal" | "checkout" | "confirmation" | "my-orders" | undefined |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-concierge-slot__* class. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlConciergeToggle | The help panel opened or closed. | CustomEvent<{ open: boolean; }> |
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-concierge>
Used by: <tl-buy-modal>, <tl-my-orders>, <tl-order-confirmation>