Elements

Elements are web components (custom HTML tags prefixed tl-) that list events, take a customer through ticket selection, cart and checkout, and show the tickets they bought. They work in plain HTML, in Webflow or any site builder that lets you add a script tag, and in React through the generated wrappers in @ticketlayer/elements-react.

Every element binds to the Live client the page publishes on window.Ticketlayer. Elements take no API key of their own: create the client once (the CDN loader does this from its data-* attributes, or call createLiveClient() from @ticketlayer/live) and the elements find it.

Get them onto the page#

CDN, no build step. One script tag loads the Live SDK, the Elements bundle and the hosted checkout modal. The tags below then just work.

<script src="https://cdn.ticketlayer.com/v1/ticketlayer.js"
        data-publishable-key="tlpk_..."
        data-api-url="live.ticketlayer.com"
        data-checkout-base="checkout.ticketlayer.com"></script>

<tl-event-list columns="3"></tl-event-list>

See the HTML quickstart for the attributes each environment needs today.

npm, for React and bundlers.

npm install @ticketlayer/live @ticketlayer/elements @ticketlayer/elements-react

import { createLiveClient } from '@ticketlayer/live';
import { defineCustomElements, TlEventList } from '@ticketlayer/elements-react';

defineCustomElements(); // once, after hydration
await createLiveClient({ baseUrl: 'live.ticketlayer.com', publishableKey: 'tlpk_...' });

<TlEventList columns={3} onTlEventClick={(e) => console.log(e.detail.eventId)} />

:::note Package status @ticketlayer/live, @ticketlayer/elements and @ticketlayer/elements-react are built in their repositories but are not on the public npm registry yet; they publish once their release workflows run. Until then use the CDN build, which is served at cdn.ticketlayer.com. See the Vite quickstart for the workaround in the meantime. :::

Elements#

Discovery#

List and present events.

Purchase#

Choose a date, pick tickets, open the buy flow.

Cart#

Show and edit what the customer is about to buy.

Checkout#

Hand off to the hosted checkout and confirm the order.

Tickets#

Render issued tickets with QR codes and PDF downloads.

Account#

Sign in with a magic link and show past orders.

Other#

Events#

Every element emits CustomEvents whose names start with tl and whose payload is on event.detail. In HTML:

<tl-event-list></tl-event-list>
<script>
  document.querySelector('tl-event-list').addEventListener('tlEventClick', (e) => {
    location.href = '/events/' + e.detail.eventId;
  });
</script>

In React each event is a prop named onTl...: <TlEventList onTlEventClick={(e) => ...} />.

Theming#

Elements read CSS custom properties prefixed --tl-. The Live SDK injects the values of the channel's theme (configured in Backstage) when applyTheme is on, which it is by default; set any token yourself on :root or on a wrapper to override. The defaults below come from the Elements global stylesheet and apply when nothing else sets the token.

Colour#

Palette.

Type#

Font stacks, the base size and ratio, and the type scale derived from them.

Radius#

Corner radii.

Spacing#

The spacing step scale.

Motion#

Durations and easings.

Seat map#

The seat map: the map itself (map-*: background, plates, sections, labels, pins), the stage (stage-*) and the seats (seat-*: each state, the selected seat on the brand colour, the hover ring and the sizes they are drawn at).

:root {
  --tl-primary: #0f766e;
  --tl-primary-foreground: #ffffff;
  --tl-radius-md: 0.25rem;
  --tl-font-family: 'Inter', system-ui, sans-serif;
}

Elements render in shadow DOM, so ordinary CSS selectors from the page do not reach inside them; the tokens are the styling contract.