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 subaccounts.   

  1. The Seats Designer is embeddable: you can embed the designer tool in your web page in much the same fashion as you can embed an interactive floor plan. 
  2. Subaccounts


A subaccount is a special type of Seats.io user account, that can't log in, and that is linked to a parent account (i.e. your account), so that their usage is billed to you. 

Other than that, subaccounts are normal and fully functional Seats accounts: they have their own set of API keys, and their own set of floor plans. 

If you want your users to do their own floor plan design, you should create a subaccount 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. 

Subaccounts are created through the Seats API. Please refer to the documentation for more information.  

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",
        designerKey: "[your designer key]",
        chartKey: "[your chart key]",
        v2: true // to enable our new V2 designer.
                 // this will become default version on 15 July 2018

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

You can find your own designer key on your settings page, and your subaccounts' on the subaccounts overview.   

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?