Planning an event is an exciting opportunity for every vendor, but dealing with seating charts and ticket sales can be a total headache (especially if your venue is an NHL stadium). Seatmap Pro is here to help! We assist you in creating professional-looking seating charts, prices, and seamless integration with your existing ticketing system – all without needing any coding knowledge.

How can I get started with my website and Seatmap Pro?

Let’s imagine that you already have a ticketing system installed and rolled out on your website. And the only thing you have to do is to somehow bind the seating venue with your tickets.

So let’s start with the basics, shall we?

What you need to know before? helps connect your ticketing system with a fancy seat chart for your customers. Here's how it works in four parts:

  1. Editor: This is your control panel. You use it to create and edit the seating chart for your venue. Think of it like a blueprint for where all the seats are located.
  2. Booking: This acts like a bridge between your seating chart and your ticketing system. It keeps track of which seats are available and their prices. So, when someone buys a ticket, the booking system knows exactly which seat they got.
  3. Renderer: This is a small piece of code you add to your website. It takes the information from the Editor (seat chart) and Booking (availability and prices) and displays a cool interactive seat chart for your customers on your website that customers can interact with. Exactly this part is responsible for the seat selection, price management and other important data.
  4. Backend System: This is your system that will connect with our ticketing platform and connect with the three previously mentioned entities. It communicates with the Seatmap Pro API/Booking part and handles the variables setting.

These four parts work together seamlessly:

  • You design the seating chart (Editor).
  • You set seat availability and prices (Booking).
  • Customers see the interactive seat chart and pick their seats on your website (Renderer).
  • Your platform interacts with our API and makes necessary actions (Backend System).

0. Configure Composite Key

First things first – you need to create a composite key. For example, if you have a giant spreadsheet for your concert seating chart. Each seat has a location like "Section B, Row 5, Seat 14". This can get clunky to write everywhere. uses a shortcut called a "composite key" to identify each seat uniquely. It's like a special code made with separators (like ";;" in this case) to combine the section, row, and seat number into a shorter code. So, instead of "Section B, Row 5, Seat 14", you can simply use "Section B;;5;;14".

This composite key is the main way tells the system which specific seat you're referring to when you want to do things like:

  • Set a price for a seat (e.g., set the price for "Section B;;5;;14" to $50)
  • Block off a seat (make "Section B;;5;;14" unavailable for purchase)
  • Do other actions to specific seats

It's like having a secret handshake for each seat to quickly tell the system which one you mean.

1. Create a Schema For Your Event offers a user-friendly tool called the Editor to help you with this, and it doesn't require any special tech skills. This Editor works for any size venue, from giant stadiums to intimate concert halls.

One of the cool features of the Editor is that you can draw the overall shape of your venue. The seats will then automatically adjust to fit that shape. This saves you a ton of time, especially for complex venues with unusual layouts. If you'd like to see this in action, has a short video tutorial on their website that walks you through how the Editor works step-by-step.

 You can read more about the kind of data our platform handles.

2. Set up the Event

The Event is an entity that connects the available seats in a single show and the prices for them. So imagine you're setting up a concert for a band and here's what you need to do:

Event: The Specific Performance

An Event refers to a specific concert date and time. It acts as the bridge between the seating chart (schema) and the prices applicable for that particular concert.

Same chart for multiple events

If the band plays multiple shows at the same venue with the same seating arrangement, you only need to create the chart (schema) once. Then, you can create separate "Events" for each concert date, all linked to the same schema.

Creating an Event: Adding a New Concert

Creating an Event is similar to adding a new concert date. There are two steps involved:

  1. Retrieve Schemas and Venues: First, you'll need to retrieve a list of available venue layouts, also known as schemas.
  2. Create an Event and Link to Schema: Then, you can create a new "Event" with a name (like "Band Name - Concert") and link it to the chosen venue layout (schema). will provide you with a unique ID for this event.

Think of it like setting the stage (schema) first and then scheduling performances (Events) with specific prices for each show.

3. Set The Prices

For a concert venue with a bunch of seats, and you want to sell tickets at different prices depending on where the seat is. Here's how helps you set those prices:

  1. Secret Seat Codes: Each seat has a unique code called a "composite key" made up of sections (like "B"), rows (like "5"), and seat numbers (like "14") joined together with separators (like ";;" here). So, "Section B, Row 5, Seat 14" might become "Section B;;5;;14"
  2. Getting the Seat Codes: You can use a tool in called "getMeta" to automatically generate a list of all these composite keys for all the seats in your venue. This saves you time from having to write them all out yourself.
  3. Setting Prices: Once you have the seat codes, you can set a price for each seat. You do this by creating a list that pairs each composite key with the price for that seat. For example:
  • "Section B;;5;;14" : 50.00 (price for this seat is $50)
  • "Section B;;5;;15" : 45.00 (price for another seat is $45)

You send this list to Seatmap Pro, and it applies those prices to the matching seats.

4. Render the seating chart to your users

It’s the final step in our list and the most important one: to show your users the chart with all prices and venue plan, here’s the gist of it:

  1. Setting Up the Sales Page:
    • You add a special code snippet (Renderer component) to your sales page.
    • This code needs a few things to work:
      • A security key (like a password) to keep things safe.
      • The unique ID for your concert (remember creating this in step 2 of event creation?).
      • A way to handle user clicks and touches on the seating chart.
  2. Sales Page Gets Ready:
    • Your sales page shows the concert info and loads the data for the seating chart.
    • It retrieves the event ID you created earlier.
  3. Takes Over:
    • The code you added (Renderer) uses the event ID to get all the details about your seating chart and prices from the system.
    • Now, the sales page is ready to show the interactive seat chart where users can pick their seats!

Basically, takes care of the fancy interactive seat chart with prices, so you can focus on selling those tickets!

Still Hesitant? Don't Be!

Seatmap Pro understands that not everyone is a tech whiz. That's why we offer a variety of resources to help you get started, including video tutorials, a comprehensive documentation section, and even a blog with helpful tips. Our website also showcases success stories of event organizers using Seatmap Pro, proving its user-friendliness.

Ready to Simplify Your Event Ticketing?

Seatmap Pro offers a free trial, allowing you to explore its features and see how it can transform your ticketing process. With its intuitive interface and powerful tools, Seatmap Pro can take your event from good to great, leaving you more time to focus on what truly matters – creating a memorable experience for your guests!