If you're building a full self-service platform, you'll want your users to be able to draw their own floor plans without intervention from your team.

Seats supports this by means of two features: an embeddable Designer, and workspaces.


A workspace is a collection of charts and events, with their own secret key. 

If you want your users to do their own floor plan design, you should create a workspace for each of them, to prevent them from accessing and editing each other floor plans, and to prevent them from booking seats on other than their own events. 

You can create workspaces through the seats.io app.

Embed the Designer

You can embed the floor plan designer in your backoffice with a piece of javascript, much in the same fashion as you would embed an interactive floor plan for your ticket buyers:

<div id="chartDesigner"></div>
<script src="https://cdn.seatsio.net/chart.js"></script>
    new seatsio.SeatingChartDesigner({
        divId: "chartDesigner",
        secretKey: "[your secret key]",
        chartKey: "[your chart key]"

Secret Key
You need to provide the secret key of one of your workspaces. Be sure to keep this key a secret: anyone who has access to this key can edit seating charts and can book seats. So please don't push it to code repositories and only use it in pages served over https.

You can find your own secret key on the settings page of the active workspace.

This is an optional parameter. If you provide it, the designer will load the specified chart in edit mode. If you don’t, a new chart will be created automatically.

You can further configure the embedded Designer with extra configuration parameters and callbacks. Check the documentation on how to do this. 

Did this answer your question?