Fastlane ticketshop

How to implement the shop widget

One <script> tag puts the ticketshop on your page as a pill in the corner. It opens in a panel above itself. Nothing else on your page moves.

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.

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 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.

03 What the launcher 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.

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 on the launcher, 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 standalone 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 panel, so a link from a newsletter, a QR code or an app lands somewhere that looks like the widget and sells like it. Use it when you want the shop to have the page to itself; use the launcher when you want it available without leaving yours. Both can be live at once.

06 What we will not do