# Multi-date

Every upcoming date, listed on your page with one tag. Buyers pick a date, then their seats.

## Try it

1. Pick a date: Every upcoming date is listed
2. Pick seats: Tap open seats on the map
3. Pay with the test card: Then get your ticket by email

[View tickets on SeatLayer](https://llc.seatlayer.events/demo-jazz-at-the-grand)

Not a mock-up. This is the released tag, listing every upcoming date in a real SeatLayer workspace in test mode.

## Copy this code

- HTML (any website)
- React
```
<div data-seatlayer-collection = "ws_f6e14e3a6f9d46e7a22c7262c9cd3181" >
  <a class = "slc-fallback" href = "https://llc.seatlayer.events/demo-jazz-at-the-grand" > View tickets on SeatLayer </a>
</div>
<script src = "https://app.seatlayer.io/sl-event-collection@0.js" defer ></script>
```

```
import {useEffect} from "react";
 
const COLLECTION = "https://app.seatlayer.io/sl-event-collection@0.js";
 
export function Dates () {// 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 {SeatLayerCollections?: {scan(): void}}).SeatLayerCollections;
    if (runtime) return runtime.scan();
    if (document.querySelector(`script[src="${COLLECTION}"]`)) return;
    const s = document.createElement("script");
    s.src = COLLECTION;
    s.defer = true;
    document.body.appendChild(s);}, []);
 
  return <div data-seatlayer-collection = "ws_f6e14e3a6f9d46e7a22c7262c9cd3181" />;}
```

### 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 ws_f6e14e3a6f9d46e7a22c7262c9cd3181 with your own workspace id from the dashboard. Every public upcoming event in it is listed.

[View on GitHub](https://github.com/seatlayer/seatlayer-nextjs-example/blob/main/examples/hosted/collection.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/multi-date/](https://seatlayer.io/demo/hosted/multi-date/) · Questions: [Contact SeatLayer](https://seatlayer.io/contact/) · hello@seatlayer.io_