Battle-tested integration patterns. Drop one into your page, swap the tenant slug and the event/festival/pass IDs, and you have a working checkout. Each pattern lists the layout it suits and the events it relies on.
Place a buy-button on every film card. Add one shared cart and checkout to the page chrome. Buyers add screenings across days and pay once. The same code runs the queue when an opening night sells fast.
Best for a landing page that sells one event.
<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>
<section class="event">
<h1>Opening Night Gala</h1>
<p>Friday, 20:00, Main Hall</p>
<div data-surgetix="full" data-event="evt_opening_night"></div>
</section>Best for a program grid where each item has its own ticket control. All buy-buttons share one cart in the sidebar.
<script
type="module"
src="https://cdn.surgetix.com/surgetix-connect/latest/surgetix.js"
data-tenant="aurora-festival"
data-api-url="https://api.surgetix.com"
data-locale="de"
data-turnstile-key="YOUR_TURNSTILE_SITE_KEY"
></script>
<main class="program-grid">
<article class="film-card">
<h2>La Chimera</h2>
<div data-surgetix="buy-button" data-event="evt_la_chimera_fri"></div>
</article>
<article class="film-card">
<h2>Perfect Days</h2>
<div data-surgetix="buy-button" data-event="evt_perfect_days_fri"></div>
</article>
</main>
<aside class="booking-sidebar">
<div data-surgetix="cart"></div>
<div data-surgetix="checkout"></div>
</aside>Best for festival venues with reserved seating.
<section class="booking">
<header>
<h1>All We Imagine as Light</h1>
<p>Saturday, 20:15, Main Hall</p>
</header>
<div data-surgetix="buy-button" data-event="evt_all_we_imagine"></div>
<div data-surgetix="seat-picker" data-event="evt_all_we_imagine"></div>
</section>
<aside>
<div data-surgetix="cart" data-expand-up></div>
<div data-surgetix="checkout"></div>
</aside>Best for a dedicated booking route where the cart should stay in the page layout instead of behaving like a floating drawer.
<div class="showtime-grid">
<div class="seat-map" data-surgetix="seat-picker" data-event="evt_screening_123"></div>
<aside class="cart-rail">
<div data-surgetix="cart" data-inline></div>
</aside>
</div>
<div data-surgetix="checkout"></div>The waiting room widget polls a fair queue, returns a guest JWT on admission, and hands the token to buy-button and seat-picker. Buyers stay on your domain the whole time.
Best for a high-demand event where buyers must be admitted before reserving tickets. The widget dispatches surgetix:queue-required when reservations are blocked, so your layout can open a custom overlay if you prefer.
<div data-surgetix="queue" data-event="evt_headliner"></div>
<div data-surgetix="buy-button" data-event="evt_headliner"></div>
<div data-surgetix="cart"></div>
<div data-surgetix="checkout"></div>
<script>
document.addEventListener("surgetix:queue-required", (e) => {
openQueueOverlay(e.detail.eventId);
});
function markAdmitted(eventId, token) {
document.dispatchEvent(new CustomEvent("surgetix:queue-admitted", {
detail: { eventId, token },
}));
}
</script>Per-festival pass cards take a festival ID + pass type and render any required parameter form (venue, date, name on pass). Gift-card pass types accept a configurable amount, recipient email and message — and ride the standard cart and checkout.
Best for per-festival passes — day passes, full passes, student passes, section passes.
<section class="passes">
<div
data-surgetix="pass-card"
data-festival-id="fest_2026"
data-pass-type-id="pass_full"></div>
<div
data-surgetix="pass-card"
data-festival-id="fest_2026"
data-pass-type-id="pass_student"></div>
</section>
<div data-surgetix="cart"></div>
<div data-surgetix="checkout"></div>Best for gift-card pass types with a configurable amount and recipient email.
<div
data-surgetix="gift-card-purchase"
data-festival-id="fest_2026"
data-pass-type-id="pass_gift_card"></div>
<div data-surgetix="cart"></div>
<div data-surgetix="checkout"></div>Mount widgets from a CMS template, an SPA route, or a hand-written page. Wire surgetix:cart-updated and surgetix:order-complete straight into your analytics. Theme everything with CSS variables. The kernel never tries to own your stack.
Best for WordPress, Squarespace, Wix custom code blocks, or any CMS template. Add one shared cart and checkout in your global footer template.
<!-- per page -->
<div class="surgetix-embed">
<div data-surgetix="buy-button" data-event="{{ event.id }}"></div>
</div>
<!-- global footer template -->
<div class="surgetix-global-cart">
<div data-surgetix="cart"></div>
<div data-surgetix="checkout"></div>
</div>Best for React, Vue, Svelte, vanilla History API routing, or any page that creates DOM after the loader has initialized. The loader also watches for newly inserted elements, so declarative SPA rendering works too.
<div id="booking-root"></div>
<script>
function renderBooking(eventId) {
const root = document.getElementById("booking-root");
root.innerHTML = `
<div id="buy"></div>
<div id="seats"></div>
<div id="cart"></div>
<div id="checkout"></div>
`;
SurgeTix.mount("buy-button", document.getElementById("buy"), { eventId });
SurgeTix.mount("seat-picker", document.getElementById("seats"), { eventId });
SurgeTix.mount("cart", document.getElementById("cart"));
SurgeTix.mount("checkout", document.getElementById("checkout"));
}
document.addEventListener("surgetix:ready", () => {
renderBooking("evt_screening_123");
});
</script>Best for conversion tracking and host-page funnels. All cart and order events surface as standard CustomEvents.
<script>
window.dataLayer = window.dataLayer || [];
document.addEventListener("surgetix:cart-updated", (e) => {
const { items, passItems, total, currency } = e.detail;
dataLayer.push({
event: "surgetix_cart_updated",
item_count: items.length + passItems.length,
value: total / 100,
currency,
});
});
document.addEventListener("surgetix:order-complete", (e) => {
dataLayer.push({
event: "purchase",
transaction_id: e.detail.orderId,
item_count: e.detail.items.length,
});
});
</script>Best for white-background editorial sites. Set CSS variables on a wrapper; they pierce Shadow DOM by design.
<style>
.surgetix-light {
--st-bg: #ffffff;
--st-bg-surface: #f7f7f7;
--st-text: #18181b;
--st-text-muted: #71717a;
--st-accent: #bf1d2d;
--st-on-accent: #ffffff;
--st-border: #d4d4d8;
--st-radius: 6px;
--st-font: Inter, system-ui, sans-serif;
}
</style>
<div class="surgetix-light">
<div data-surgetix="full" data-event="evt_opening_night"></div>
</div>The reference documents the entire integration surface — script attributes, widget options, JS API methods, CustomEvents, identity modes, theming, and browser support.