SurgeTix Connect · v1.0

Sell tickets anywhere
a script tag can land.

One ES module. A handful of data-surgetix mount points. A real cart, a real queue, a real checkout — embedded in any festival page, CMS template or SPA, with your typography and your colors intact.

Start in 60 seconds → Full reference
9 widgets · Shadow DOM isolated · en · de · fr · it · ~25 KB kernel

Most ticketing widgets behave like uninvited guests — they bring their own font, their own colors, their own opinions about what your page should look like. SurgeTix Connect is the opposite. It mounts inside Shadow DOM, listens to standard browser events, and inherits the few CSS variables you choose to share. Your site stays your site.

0
Composable widgets — buy buttons, seat maps, passes, queues, checkout, more.
0 KB
Kernel ships everything shared. Each widget chunk lazy-loads only when mounted.
0 langs
English, German, French, Italian — runtime setLocale() for switchers.
0 build
Drop a module script tag. No bundler, no framework adapter, no CSS reset war.
Architecture

One kernel.
Many widgets.
Shared everything.

Every widget on the page talks to the same store, the same cart, the same identity, the same locale. A buyer can add tickets from three events, a festival pass and a gift card, then check out once — no matter how many separate elements you placed on the page.

The kernel exposes a tiny window.SurgeTix for SPA mounting, locale switching, programmatic checkout, and live store subscriptions. Everything else flows through standard CustomEvents on document.

Read the JS API →
Festival mode

Program grids,
sticky carts,
multi-event flows.

Drop a buy-button next to every film card in your program. Drop one shared cart in your sidebar. Buyers add screenings across days and pay once. The same script runs the queue when an opening night sells fast.

Festival example →
Festival passes

Full passes.
Day passes.
Gift cards.

Mount a pass-card for every pass type your festival sells. Buyers pick a tier, the widget renders any required parameter forms (venue, date, name on pass), drops it in the same shared cart, and rides the standard checkout. Gift cards work the same way.

Passes example →

Editorial websites earn trust through restraint. A ticketing layer should disappear into that restraint, then return at exactly the moment a buyer is ready to act. — SurgeTix design principle №2

Widget catalog

Nine mount points.
One state machine.

Every widget is declarative — a single element with data-surgetix="…". Mix and match them per route. The kernel scans the DOM, mounts each into its own Shadow Root, and keeps them in sync.

full

Single-event flow

Queue, ticket selection, cart and checkout stacked in one drop-in. Use it when one page sells one event.

buy-button

Ticket selector

GA categories with quantities, or a "Select seats" action that scrolls to the matching seat picker.

seat-picker

Live seat map

Canvas2D map with mouse, touch, keyboard and pinch zoom. Live inventory updates over WebSocket.

cart

Shared cart

One cart per page. Holds tickets, passes, coupon state, expiry countdown and the checkout action.

checkout

Payment modal

Stripe Payment Element, Datatrans redirect or lightbox — picked from tenant config.

queue

Waiting room

Cloudflare Turnstile, position polling, guest JWT admission. Hands the token to seat-picker on admission.

pass-card

Festival passes

Per-festival passes — full pass, day pass, section pass, student. Renders parameter forms (venue, date, name) when the pass type requires them.

coupon-input

Standalone coupon

Drop a coupon field anywhere. Cart already supports codes; use this when your layout demands a separate input.

gift-card-purchase

Gift cards

Configurable amount, recipient email and message. Goes through the standard cart and checkout.

Minimum viable embed

This is the entire integration.

Three lines of HTML. The first loads the kernel. The second tells it which tenant. The third tells it which event to sell.

<script
  type="module"
  src="https://cdn.surgetix.com/surgetix-connect/latest/surgetix.js"
  data-tenant="summer-fest"
  data-api-url="https://api.surgetix.com"
  data-turnstile-key="YOUR_TURNSTILE_SITE_KEY"
></script>

<div data-surgetix="full" data-event="evt_opening_night"></div>

That's the whole page. Queue, ticket selection, cart, checkout — all of it lives inside that one <div>, isolated by Shadow DOM, themed via CSS variables you set on a parent.

Walk through quickstart →