With a client library
The easiest way to show a chart is to use one of our client libraries:
- React: https://github.com/seatsio/seatsio-react
- Vue: https://github.com/seatsio/seatsio-vue
- Angular: https://github.com/seatsio/seatsio-angular
- React-native: https://github.com/seatsio/seatsio-react-native
- Android: https://github.com/seatsio/seatsio-android
- iOS: https://github.com/seatsio/seatsio-ios
Without a client library
If we don't offer a library for your frontend framework, you can embed a chart using plain HTML and JS.
Insert one of following scripts in your HTML page (for instance inside
<head>) based on your account region:
- North America:
- South America:
Add an empty element to your page to act as a container for the embed, for instance:
Add the following snippet at the end of the HTML page:
PUBLIC_WORKSPACE_KEYis your public workspace key, found at your accounts Workspace Settings.
EVENT_KEYis the floor plans event you want to display.
Below you will find a live example of this.
As of October 2023, we ship our own type definitions package for Seats.io,
@seastsio/seastsio-types. If you have been using
@types/seatsio, that package is now deprecated and we recommend that you switch to the new package.
If you use our React client library, we ship that with types from version 14 onwards. Your IDE should automatically pick up on those and provide suggestions:
Install types manually
If you have a TypeScript project and you are using Seats.io without a client library, you can add the typings yourself:
@seatsio/seatsio-typesas a dev dependency
- In your
tsconfig.jsonfile, make sure that
That's it! You should now be able to use Seats.io with type checks and suggestions.