diff --git a/.env.example b/.env.example index 8b7e8fd..ce3b537 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,4 @@ -# Event key for the event you want to sell, for example ev_9f3a. +# Your event key. It starts with ev_ and is at the top of the event's page in the dashboard (not the pk_ key). VITE_SEATLAYER_EVENT_KEY=ev_replace_me # Publishable key for the same account. It is safe in browser code. diff --git a/README.md b/README.md index 6d92eed..0c13b0f 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,16 @@ payment gateway. Every example is a route in one small Vite and React application, and each one names the question it answers and links the matching documentation page. +## Live demos + +Try SeatLayer in your browser before you clone anything: +[pick a seat](https://app.seatlayer.io/demo/play/grand-theatre) · [the 3D venue](https://app.seatlayer.io/demo/play/grand-theatre?tour=3d) · +[the chart designer](https://app.seatlayer.io/demo/designer) · +[all live demos](https://docs.seatlayer.io/start/live-demos/). +Those demos run on a template chart with no server event behind them, so a +hold there is not real. This repository gives you real test holds and +bookings with your own test keys. + [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/seatlayer/seatlayer-react-example) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/seatlayer/seatlayer-react-example) @@ -22,8 +32,8 @@ npm run dev | Variable | What it is | | --- | --- | -| `VITE_SEATLAYER_EVENT_KEY` | The event you want to sell, for example `ev_9f3a` | -| `VITE_SEATLAYER_PUBLIC_KEY` | The publishable `pk_` key for the same account | +| `VITE_SEATLAYER_EVENT_KEY` | Your event key. It starts with `ev_` and is at the top of the event's page in the dashboard, with a Copy button | +| `VITE_SEATLAYER_PUBLIC_KEY` | Your public key (`pk_test_…` in test mode) from Developer → API keys, from the same account as the event | Three more are optional: `VITE_SEATLAYER_EVENT_KEY_2` and `VITE_SEATLAYER_EVENT_KEY_3` give the multiple events route real variety, and @@ -32,8 +42,7 @@ notice instead of a chart until its keys are present, so the repository runs the moment it is cloned. Test mode is free, so you can run every step above before a live account exists. -Register `http://localhost:5173` as an embed origin for the key, otherwise the -chart will refuse to bootstrap. Never put a secret `sk_` key in browser code. +Never put a secret `sk_` key in browser code. ## Examples in this repo @@ -204,7 +213,7 @@ import { SeatingChart } from "@seatlayer/react";