Fastlane ticketshop

How to embed the shop

Two ways to put the ticketshop on your own page, and a third that needs no code at all. Pick one — they sell the same tickets, through the same checkout.

Popup Widget — one <script> tag puts a pill in the corner that opens a panel above itself. Nothing else on your page moves. Start here if you are not sure.
Inline Embed — a <fl-shop> element you place in your own layout, as tall as its content. See below.
Hosted page — the shop on a page of its own, nothing to install. See below.

It is running on this page

This page is the embed origin, and it loads its own copy of the loader — the same tag as below, selling a real shop.

The pill is in the bottom-left corner of this window right now.
Open it: the panel carries its own background, so it reads over any page.
Add a ticket and go to the cart — the flow is the whole shop, not a preview.
Close it again: the pill comes back, and the page around it is untouched.

Every example on this page follows the shop you pick here — the pill, the three snippets and the standalone link. The choice lives in the URL, so the link is the thing to send: ?shop=…&event=…, where the event is optional (without it we use the shop's first event). This page is the demo, though — on your own site you embed the snippet below, not this URL.

Here the panel is same-origin with the page. On your site it is cross-origin, which is why we cannot read your page — no other behaviour changes.

01 The Popup Widget's snippet

Put it anywhere before </body>. There is no package to install, no CSS to link, and no build step. It is one file, and everything it draws is inside it.

<script src="https://<embed-host>/loader.js"
        data-shop="<shop-slug>"
        data-event="<event-slug>"></script>

<embed-host> is the origin this page is served from — the page fills in its own address, so the block above is exactly what it runs.

Two things that only matter if you write the tag by hand. Keep src pointing at loader.js itself: the loader works out where the shop lives from its own URL, so a copy on your own CDN has nothing to load. And keep it a classic script — a type="module" loader cannot see its own tag, so it does nothing at all, silently.

02 The attributes

data-shop: Required. Your shop's slug — the first half of tickets.fastlane.events/shop/event. Without it the panel has nothing to load.
data-event: Which event to sell. Omitted, the shop's first event is used. A slug that matches nothing stops and says so in the panel — we never quietly sell a different event under a stale link.
data-theme: How the shop should look. Omitted, we follow the theme the organiser configured in backoffice, which is the right answer for most sites. See the theme.
data-language: Which language the panel speaks — nl or en. Omitted, we read your page's own <html lang>, so a Dutch site gets a Dutch panel without setting anything. Set it only when your page's lang is not the language your buyers read.
data-position: Which bottom corner the pill sits in: bottom-left (the default) or bottom-right. The panel opens from the same corner. Use bottom-right when your site already keeps something in the bottom-left — a cookie bar, a chat button. Anything else is read as the default.
data-demo: Show an example shop instead of calling the API — for a slide, a design review or a staging page with no backend behind it. Add it bare (data-demo) for our seeded festival, or give it JSON to change what it says: data-demo='{"events":[{"name":"Your Festival"}]}' keeps the products, dates and location and swaps the name. Leave it off on a real page — with it on, nothing the visitor sees is for sale.

03 What the Popup Widget does

The script adds exactly one element to your page: an iframe. Collapsed, it is the size of the pill, and the pill is drawn inside it. That is our whole footprint.

The pill is one button. It sits 32px from the left and 24px from the bottom, painted in the event's brand colour and labelled Tickets in the visitor's language. Its frame is exactly the pill's box, so it never blocks a click anywhere else on your page.
The panel is a window, not an overlay. It opens above the pill and runs in an iframe, so it carries its own background and stays readable over a photograph, a video or a white page. Nothing of your page shows through it, in either direction.
Your page does not move. Opening the panel dims the viewport while it is open; it does not reflow your layout, resize anything, or lock your scroll. Close it and the page is as it was.
Checkout leaves the iframe on purpose. Payment providers refuse to be framed, and the order page with its QR tickets is a full page, so both open in the top window. The buyer is returned to the shop afterwards.
The embed is versioned. The iframe carries the build it is running as data-fl-build. If something looks wrong, that value is the first thing we will ask you for.

04 The theme

data-theme takes one of four words, or a full theme object:

theme: Follow the organiser's own configuration. This is the default in the Popup Widget, because the panel carries its own ground and the organiser already said what they want.
light: Force the light palette.
dark: Force the dark palette, if the organiser authored one. If they did not, we render light and say so in the browser console rather than inventing one.
auto: Follow the visitor's operating system. Available everywhere, and the default nowhere: a dark-mode laptop on a light page gives dark glass on a cream site, and neither of you did anything wrong. Use it only if that is what you want.

If your site is dark

Pass data-theme="dark". One attribute, and the panel switches polarity to match the page it is standing on. We cannot detect it for you: reading your page's background across origins is exactly what the browser forbids, so you tell us.

<script src="https://<embed-host>/loader.js"
        data-shop="<shop-slug>"
        data-event="<event-slug>"
        data-theme="dark"></script>

Or override the theme entirely

When your site's version of the brand differs from the shop's own page, pass an EventThemeConfiguration as JSON — the same object backoffice stores, so it goes through the same parser a server-sent theme does. foreground (the ink) is the field that matters most: the rest of the surface system is derived from it.

<script src="https://<embed-host>/loader.js"
        data-shop="<shop-slug>"
        data-event="<event-slug>"
        data-theme='{"light":{"foreground":"#FFFFFF","primary":"#EE4287","primaryForeground":"#1A0A12"}}'></script>

A theme that does not parse is not half-applied: we use the shop's own theme and tell you why in the console, so a typo never turns into a design decision you have to debug.

05 The Inline Embed

When you want the shop in your layout rather than in a corner: <fl-shop> is a custom element you place like any other. It is as tall as its content and it takes the width you give it.

Same options, same names. shop, event, theme, language and demo mean exactly what they mean on the script tag — the data- prefix there is forced by HTML, which only allows custom attributes on a <script> as data-*. The one option with nowhere to go here is data-position: an element has no corner to sit in, it sits where you put it.

<script type="module" src="https://<embed-host>/inline/elements.js"></script>

<fl-shop shop="<shop-slug>" event="<event-slug>"></fl-shop>

It paints no background at all. Your page shows through every gap between its cards — that is the point of this mode, and it is why we do not put a grey box on your site. The flip side: over a bare photograph the shop is as hard to read as your own body copy would be. Put it on whatever layer your own text sits on.
type="module", unlike the loader. The element's bundle is a module and code-splits; the Popup Widget's loader.js is a classic script and must stay one. They are not interchangeable.
Its ground is the organiser's theme, same as everywhere. A theme with a background colour or a ground image paints it; a theme with neither paints nothing, and your page shows through every gap. We never invent a ground.
More than one on a page is fine. Each element gets its own shadow root, so the shop's styles and yours stay apart in both directions.

06 The hosted page

The same shop has a page of its own, with no embed and nothing of yours around it: tickets.fastlane.events/shop/event. For the shop this page is showing that is tickets.fastlane.events.

It is the same components, the same theme and the same checkout as the two embeds, so a link from a newsletter, a QR code or an app lands somewhere that looks like them and sells like them. Use it when you want the shop to have the page to itself; use an embed when you want it available without leaving yours. All three can be live at once.

07 What we will not do

We will not read your page. Cross-origin, and we would be wrong as often as right: your fonts, your colours and your background are not ours to copy. The pill is painted in the event's colour, and the panel brings its own ground.
We will not claim your viewport. Collapsed, our footprint is the pill's own box. The dimming and the panel only exist while the panel is open.
We will not move the pill for you (yet). The corner is fixed bottom-left and there is no attribute to change it. If the pill collides with something of yours, tell us — that is a real integration problem, not something to work around with CSS.
We will not guess which event you meant. A stale data-event stops the panel rather than selling the wrong tickets under an old link.