# Paid event

A real event page, added to a website with one tag. Book a seat the way your buyers would, then copy the tag.

## Try it

1. Pick seats: Tap open seats on the map
2. Pay with the test card: Type your own email to get the ticket.
3. Get your ticket: By email, with a QR code

[Book tickets on SeatLayer](https://llc.seatlayer.events/demo-an-evening-at-the-grand)

Not a mock-up. This is the released tag on a real event in test mode. Prefer a full page? [Open the booking page](https://llc.seatlayer.events/demo-an-evening-at-the-grand)

## Copy this code

- HTML (any website)
- React
```
<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>
```

```
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"
    />);}
```

### Paste it where the seats should appear

It works on WordPress, Wix, Squarespace, Webflow and any HTML page. SeatLayer runs the checkout and sends the tickets.

Replace demo-an-evening-at-the-grand with your own event key from the dashboard.

[View on GitHub](https://github.com/seatlayer/seatlayer-nextjs-example/blob/main/examples/hosted/event.html)

[How Hosted works](https://seatlayer.io/sell-tickets-on-your-website/)

[Read the docs](https://docs.seatlayer.io/)

[Start free](https://app.seatlayer.io/)

## What you get with Hosted

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

---

_Machine-readable site index: [/llms.txt](https://seatlayer.io/llms.txt) · full corpus: [/llms-full.txt](https://seatlayer.io/llms-full.txt)_
_Source page: [https://seatlayer.io/demo/hosted/paid-event/](https://seatlayer.io/demo/hosted/paid-event/) · Questions: [Contact SeatLayer](https://seatlayer.io/contact/) · hello@seatlayer.io_