<tl-concierge>
Concierge: search the help articles, ask the AI when the channel has it on, see my orders after a code typed into the widget, or contact the organiser.
| HTML tag | <tl-concierge> |
| React | import { TlConcierge } from '@ticketlayer/elements-react' |
| Category | support |
| Runs in | web (browser DOM), native (planned React Native set) |
Concierge: search the help articles, ask the AI when the channel has it on,
see my orders after a code typed into the widget, or contact the organiser.
Hidden unless the channel turns it on. A launcher bubble, an inline panel
or a full page (HBO /help); inside another element through
tl-concierge-slot.
Laid out as a front desk: a home with the persona's greeting in a band of the brand's colour, one field that searches as the customer types (and offers to ask the persona when the query reads as a question), and labelled doors to Ask, My orders and Contact; every other view has a bar with a way back; a tab bar keeps the four in reach, at the thumb on a launcher and across the top of a page.
<tl-concierge placement="launcher"></tl-concierge>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
cartId | cart-id | Context: the cart, when the host has one. | string | undefined | undefined |
embedded | embedded | Set by tl-concierge-slot: the element it is inside, whose placement the channel switches on. | "buy-modal" | "checkout" | "confirmation" | "my-orders" | undefined | undefined |
eventId | event-id | Context: the event the customer is looking at. | string | undefined | undefined |
occurrenceId | occurrence-id | Context: the occurrence the customer is looking at. | string | undefined | undefined |
open | open | Launcher only: start with the panel open. | boolean | false |
orderId | order-id | Context: the order the customer is looking at. | string | undefined | undefined |
ordersView | orders-view | After verification: hand off to tl-my-orders (element), or list the orders in the widget (list). | "element" | "list" | 'element' |
placement | placement | Where it sits: a launcher bubble, an inline panel, or a full page. | "inline" | "launcher" | "page" | 'launcher' |
query | query | A search to start with, shown in the field: what the customer typed into the embedded field. | string | undefined | undefined |
section | section | The tab to open on, when the channel offers it. | "ask" | "contact" | "orders" | "search" | undefined | 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__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlConciergeCardAction | The customer answered a confirm card the engine sent: confirmed (executed or failed, with the code) or cancelled. | CustomEvent<{ proposal: string; proposalId: string; action: "cancel" | "confirm"; outcome: "failed" | "cancelled" | "executed"; code: string | null; }> |
tlConciergeContactSent | The contact form opened a case. | CustomEvent<{ caseId: string | null; reference: string | null; }> |
tlConciergeHandover | The assistant handed the conversation to a person. | CustomEvent<{ caseId: string | null; }> |
tlConciergeToggle | The launcher panel opened or closed. | CustomEvent<{ open: boolean; }> |
tlConciergeVerified | The code was accepted and the customer is signed in. | CustomEvent<{ authenticated: boolean; }> |
tlError | Something the customer asked for failed. | CustomEvent<{ message: 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.
Related elements#
Renders: <tl-my-orders>
Used by: <tl-concierge-slot>