How to Integrate Seatmap Pro?

Integrate interactive venue seating charts into your ticketing platform with a TypeScript SDK, REST API, and visual editor. Seatmap Pro handles the visualization layer while your system retains full control over bookings, pricing, and payments.

Request a Demo

Step 1

Create a Schema for Your Venue

Use Seatmap Pro's visual Editor to design a professional seating chart for any venue. The Editor supports numbered seats, general admission sections, tables, standing areas, and mixed layouts. You can embed the Editor directly into your backoffice application via iframe with SSO autologin.

Use Drag-and-Drop Tools

Create seat rows, sections, and shapes with drag-and-drop. Adjust numbering, define aisles, and apply transformations like rotation and curving. Import existing SVG floor plans as background layers.

Draw the Overall Venue Shape

Use the Venue Shape tool to align seats to the actual geometry of your space. Rows automatically curve and adjust to fit arenas, theaters, and stadiums of any size.

Publish the Schema

When a schema is created and published, it is ready for event and price assignment. Schemas are versioned and can be duplicated across multiple venues and configurations.

Explore More

Step 2

Set Up the Event

Create events via the Booking API v2 and link them to your venue schemas. Each event connects a specific date, time, and show to a seating layout. Your ticketing system remains the single source of truth for all booking data.

Seatmap Pro operates as a visualization layer only. It never stores prices, sales data, or payment information on its servers.

Create an Event via API

Use the Booking API v2 to create events programmatically: POST to /api/private/v2.0/events with your venue schema ID, event name, date, and configuration. The API returns an event ID used by the renderer.

Link an Event to the Designed Schema

An Event connects your schema with specific prices for a particular show. Multiple events can share the same venue schema, each with independent pricing and availability.

Explore More

Step 3

Set Your Prices

Assign prices to individual seats, rows, sections, or categories via the API. Each seat has a unique key based on section, row, and seat number. The Admin Renderer provides a visual interface for managing pricing zones and seat states in your backoffice.

Assign Prices for the Event

Set prices via API calls or visually through the Admin Renderer component. Seatmap Pro supports multiple price tiers per event with real-time availability and two-way synchronization with your ticketing system.

Manage Booking State

The booking lifecycle follows a lock-confirm pattern: seats are locked with a configurable TTL (time-to-live), then confirmed as sold after payment. Expired locks are automatically released back to available status.

Explore More

Step 4

Show the Seating Plan to Your Users

Embed the Booking Renderer on your customer-facing sales page. Install the @seatmap.pro/renderer npm package and initialize it with your public key and event ID. The renderer handles WebGL-accelerated visualization for 10,000+ seats at 60fps, real-time availability display, and seat selection callbacks.

Install the TypeScript SDK

Run npm install @seatmap.pro/renderer to add the SDK to your project. The renderer is framework-agnostic and works with React, Vue, Angular, Svelte, or vanilla JavaScript.

Handle Seat Selection Events

Subscribe to seatSelected and seatDeselected callbacks to update your cart. Each event provides the seat key (section, row, seat), price tier, and availability state. Integrate these callbacks with your existing checkout flow.

Explore More

Quick Integration Example

Install the Booking Renderer SDK and render an interactive seating chart in a few lines of code.

import { SeatmapBookingRenderer } from '@seatmap.pro/renderer';

const renderer = new SeatmapBookingRenderer({
  publicKey: 'YOUR_PUBLIC_KEY',
  container: document.getElementById('seatmap'),
  settings: {
    theme: {
      priceColors: [['#2563eb', '#16a34a', '#dc2626', '#ca8a04']],
    },
  },
});

renderer.loadEvent('EVENT_ID');

renderer.on('seatSelected', (seat) => {
  console.log(`Selected: ${seat.sectionName} / Row ${seat.rowName} / Seat ${seat.seatName}`);
});

renderer.on('seatDeselected', (seat) => {
  console.log(`Deselected: ${seat.seatName}`);
});

Here is what You Get

Benefits Seatmap Pro platform brings to the table.

Increased Ticket Sales and Revenue

Interactive seat selection with real-time availability reduces cart abandonment and increases conversion rates compared to static seat maps or dropdown-based selection.

Improved Time to Market for Your Product

The TypeScript SDK and structured REST API mean your development team can have a working integration in days. AI coding assistants can generate integration code from our documentation.

Data-Driven Insights for Better Decision Making

Track seat popularity, pricing zone performance, and booking patterns through the API. Use the Admin Renderer to visualize occupancy and adjust pricing strategies in real time.

Ready to Get Started?

Request a demo, and see Seatmap Pro in action. Map out your success with a secure, user-friendly and versatile solution for ticketing platforms.

Request a Demo