All Collections
Embedding the Seats Designer
Manage categories from your app
Manage categories from your app

How to prevent users from editing the category list in Seats Designer, while still allowing them to assign them to seats

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

Note: This article is only relevant if you have embedded the floor plan designer in your back office application, so that your users - event organisers - can create their own floor plans. If you haven't, read more here.

Under normal circumstances, the Seats Designer lets you edit categories: their names, colors, etc.

But in case of an embedded Designer, you may want your users to manage categories and pricing from within your own system, rather than from within the Seats Designer. 

This is perfectly possible, you need to follow these steps: 

  1. have your users create the category list in your application

  2. create an empty chart containing your category list via the Seats API

  3. make the category list read-only when embedding the designer

  4. if/when the category list is edited, update the category list via the Seats API

Step 1: the category list

Have your users create the category list in your application. How you do this is of course entirely up to you, but as a result, you'll need a list of categories that have the following properties: 

  • a numeric key (1, 2, 3, ... is fine)

  • a label (e.g. "Category 1")

  • a hex color code (eg "#CA5A41")

Step 2: Create an empty chart with your categories

To do so, call the create chart API and pass in the category list under a "categories" key in the body. Check the documentation on how to do this. 

Step 3: embed the Designer with read-only categories

You'll want to prevent your users from editing the category list from within the designer. Configure the features config param when embedding the designer like so:

new seatsio.SeatingChartDesigner({
    ..., 
    features: {
        readOnly: ['categoryList']
    }  
}).render();

This will hide the “create category” button, etc.

Step 4: update the category list when appropriate

If you allow your users to change the categories after chart creation, you need to make sure that these changes are synced in the seating chart as well. If you don't, you'll end up with a different category list in your system and on the seating chart, which may even result in seating charts not being displayed at all to ticket buyers.  

To do this, call the update chart API to update the category list via the Seats API.
​

Did this answer your question?