Ten steps. Each one fits on one screen. Scroll through to walk a fresh page from empty HTML to a fully wired single-event purchase flow with queue, cart, payment and post-purchase analytics.
You need a tenant slug, an event ID, a Turnstile site key, and the API origin for your environment.
The tenant slug comes from your SurgeTix organizer settings. Event IDs come from each event's detail page or the public API. Turnstile keys come from the integration settings tab.
One type="module" script tag near the end of <body>. It reads its own data-* attributes, boots the kernel, and starts watching the DOM for widget mount points.
The loader does not block rendering. Widgets mount when their HTML appears, even if it appears later from an SPA route change.
Use data-surgetix="full" when one page sells one event. It renders queue + buy button + cart + checkout in the default layout.
This is the right starting point for opening night pages, single-screening landing pages, and "buy one thing" microsites.
For a festival program grid, place a buy-button next to each event card and one shared cart + checkout in a sticky sidebar. All widgets share the same cart automatically.
Drop a seat-picker next to a buy-button for the same event. The buy button switches its action to "Select seats" and scrolls to the picker. Mouse, touch, keyboard, and live WebSocket inventory all work out of the box.
Three options: guest (default — buyer enters email at checkout), simple provided (pre-fill email and name), or signed JWT (cryptographic identity, no Turnstile needed).
Use signed JWT when your site already authenticates the buyer. Use simple provided to pre-fill known fields. Otherwise, guest mode is correct.
SurgeTix Connect speaks English, German, French, and Italian. Set data-locale on the loader, or call SurgeTix.setLocale() at runtime when the host site has a language switcher.
SurgeTix uses CSS variables (--st-bg, --st-accent, --st-font, …) that pierce Shadow DOM. Set them on :root, on a wrapper, or on a single widget mount.
Page CSS will not accidentally rewrite widget internals. CSS custom properties intentionally pass through.
All integration touch points are standard DOM events on document. surgetix:cart-updated, surgetix:order-complete, surgetix:queue-required, and a dozen more.
Wire them straight into your analytics layer, your floating cart visibility, your post-checkout redirect.
Pin a versioned CDN URL for production: cdn.surgetix.com/surgetix-connect/v1.0.0/surgetix.js. Versioned paths are immutable and safe for long browser caches. Use latest for staging.
Add cdn.surgetix.com, challenges.cloudflare.com and your API origin to your CSP. You're done.
# From SurgeTix organizer settings
TENANT_SLUG = "summer-fest"
EVENT_ID = "evt_opening_night"
TURNSTILE_KEY = "0x4AAAAAAAA…"
# Per environment
API_URL_PROD = "https://api.surgetix.com"
API_URL_STAGING = "https://api.staging.surgetix.com"
WIDGET_URL = "https://cdn.surgetix.com/surgetix-connect/latest/surgetix.js"<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><main>
<h1>Opening Night Gala</h1>
<p>Friday, 20:00</p>
<div
data-surgetix="full"
data-event="evt_opening_night"></div>
</main><section class="program">
<article>
<h2>All We Imagine as Light</h2>
<div data-surgetix="buy-button"
data-event="evt_fri_1830"></div>
</article>
<!-- … more films … -->
</section>
<aside class="cart-rail">
<div data-surgetix="cart"></div>
<div data-surgetix="checkout"></div>
</aside><div data-surgetix="buy-button"
data-event="evt_main_screen"></div>
<div data-surgetix="seat-picker"
data-event="evt_main_screen"></div>
<div data-surgetix="cart"></div>
<div data-surgetix="checkout"></div><!-- guest (default) -->
<script data-tenant="summer-fest"
data-turnstile-key="…"></script>
<!-- simple pre-fill -->
<script data-tenant="summer-fest"
data-user-email="[email protected]"
data-user-name="Jane Doe"></script>
<!-- signed JWT -->
<script data-tenant="summer-fest"
data-user-token="eyJhbGciOiJIUzI1NiIs…"></script><script
type="module"
src="…/surgetix.js"
data-tenant="aurora-festival"
data-locale="de"
></script>
<script>
document.addEventListener("surgetix:ready", () => {
document.getElementById("lang")
.addEventListener("change", (e) =>
SurgeTix.setLocale(e.target.value)
);
});
</script>:root {
--st-bg: #ffffff;
--st-bg-surface: #f6f6f6;
--st-text: #171717;
--st-text-muted: #666666;
--st-accent: #d71920;
--st-on-accent: #ffffff;
--st-border: #dedede;
--st-radius: 6px;
--st-font: Inter, system-ui, sans-serif;
--st-font-display: Georgia, serif;
}document.addEventListener("surgetix:cart-updated", (e) => {
console.log("Cart total", e.detail.total, e.detail.currency);
});
document.addEventListener("surgetix:order-complete", (e) => {
analytics.track("Ticket order completed", {
orderId: e.detail.orderId,
email: e.detail.email,
});
window.location.href =
`/thank-you?order=${e.detail.orderId}`;
});<!-- pinned, immutable -->
<script
type="module"
src="https://cdn.surgetix.com/surgetix-connect/v1.0.0/surgetix.js"
data-tenant="summer-fest"
data-api-url="https://api.surgetix.com"
data-turnstile-key="YOUR_TURNSTILE_SITE_KEY"
></script>
<!-- CSP additions -->
<!-- script-src cdn.surgetix.com challenges.cloudflare.com -->
<!-- connect-src api.surgetix.com cdn.surgetix.com -->
<!-- frame-src challenges.cloudflare.com js.stripe.com -->