Embedding the Designer

Give your users the power to draw floor plans themselves

Ben Verbeken avatar
Written by Ben Verbeken
Updated over a week ago

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.

Customize the designer

You can further customize your embedded Designer, to make it a better fit for your users. Here are some of the things you can do:

  • enable or disable features for users. A simple example: you can remove the table tool to prevent users from drawing floor plans that contain tables. Read more here.

  • remove category management, and instead manage categories from your own app

  • prevent users from editing the seating chart name from within the designer (info here)

As always, the documentation lists all possible configuration options.

Did this answer your question?