3D view

The same event, in 3D. Look at the stage from any seat before you book it.

Try it

Test mode

Switch to 3D: Tap 3D above the map
Look from your seat: Tap a seat to see its view
Book it: Pay with the test card

4242 4242 4242 4242

Any future expiry · Any CVC

Test mode. No real money moves.Seats reset every night.

yourvenue.com/events/demo-an-evening-at-the-grandThe real SeatLayer tag, on a real event

Book tickets on SeatLayer

Not a mock-up. This is the released tag on a real event in test mode. Prefer a full page? Open the booking page

Copy this code

index.html

<div
  data-seatlayer-event="demo-an-evening-at-the-grand"
  data-layout="picker"
  data-checkout="hosted"
  data-height="740px"
  data-fallback-url="https://llc.seatlayer.events/demo-an-evening-at-the-grand">
  <a href="https://llc.seatlayer.events/demo-an-evening-at-the-grand">
    Book tickets on SeatLayer
  </a>
</div>
<script src="https://app.seatlayer.io/sl-event-widget@0.js" defer></script>

Tickets.tsx

import { useEffect } from "react";
 
const WIDGET = "https://app.seatlayer.io/sl-event-widget@0.js";
 
export function Tickets() {
  // Load the script once. If it is already on the page, ask it to
  // render this new block (a second embed or a route change).
  useEffect(() => {
    const runtime = (window as { SeatLayerEvents?: { scan(): void } }).SeatLayerEvents;
    if (runtime) return runtime.scan();
    if (document.querySelector(`script[src="${WIDGET}"]`)) return;
    const s = document.createElement("script");
    s.src = WIDGET;
    s.defer = true;
    document.body.appendChild(s);
  }, []);
 
  return (
    <div
      data-seatlayer-event="demo-an-evening-at-the-grand"
      data-layout="picker"
      data-checkout="hosted"
      data-height="740px"
    />
  );
}

What you get with Hosted

Your own payment gatewayStripe, PayPal and more. The money goes straight to you.
Tickets by emailEach buyer gets a ticket with a QR code, their seat and the time.
Check-in at the doorScan tickets from your phone. Each code works once.