SP
Developer Docs

Quick Start Guide

Get SeatPilot integrated into your ticketing platform in under 5 minutes with our JavaScript SDK.

2 Lines of Code to Start

html
<script src="https://seatpilot.co.uk/sdk/seatpilot.js"></script>
<script>
  const sp = SeatPilot.init({ apiKey: 'YOUR_API_KEY' });
</script>

Auto-save is on by default

When you embed the Canvas builder via sp.builder(), your users' edits are saved every 5 seconds to the server. You don't need to wire up a "Save" button.

  • Watch the green dot at the top of the Canvas — auto-save is live when green.
  • Press Ctrl/⌘+S to force-save immediately, or call sp.save() from your parent page.
  • Use the "Save Now" button (renamed from "Save Draft") in the quick-preset embed widget only when you want to manually commit.
1

Embed the Layout Builder

Let users create/edit seating layouts directly on your website. Full drag-and-drop canvas editor.

javascript
// Full canvas builder (create new)
const builder = sp.builder('#my-builder-div');

// Edit existing layout
const editor = sp.builder('#my-builder-div', {
  layoutId: 'LAYOUT_ID',
  onSave: function(layout) {
    console.log('Saved:', layout.layout_id);
    console.log('Seats:', layout.total_seats);
    console.log('Categories:', layout.categories); // [{category, total, seats: [...]}]
  }
});

// Programmatic control
editor.save();    // Trigger save
editor.publish(); // Publish layout
2

Add Seat Selection Widget

Embed the interactive seat picker on your checkout page.

javascript
// Embed seat selection
const widget = sp.widget('#seat-picker', 'LAYOUT_ID', {
  maxSeats: 6,
  onSeatSelected: (seat) => console.log('Selected:', seat),
  onCheckout: (seats) => {
    // User clicked checkout with these seats
    processBooking(seats);
  }
});
3

Set Pricing & Book Seats (API)

Set prices, reserve seats, and confirm bookings — all via SDK methods.

javascript
// Set pricing by category
await sp.setPrice('LAYOUT_ID', [
  { category: 'VIP', price: 75 },
  { category: 'Standard', price: 25 }
], 'GBP');

// Get seat details (grouped by category, with seat_id, ref, status)
const seats = await sp.getSeats('LAYOUT_ID');
// seats.categories = [{category: "VIP", total: 50, available: 45, seats: [...]}]

// Calculate total with fees
const total = await sp.calculate('LAYOUT_ID', ['VIP-A1', 'VIP-A2']);
// total.summary = {ticket_subtotal, total_service_fees, total_seat_fees, grand_total}

// Reserve + confirm in one call
const booking = await sp.book('LAYOUT_ID', ['VIP-A1', 'VIP-A2']);

// Or step by step:
const hold = await sp.reserve('LAYOUT_ID', ['VIP-A1', 'VIP-A2'], 15); // 15 min hold
const confirmed = await sp.confirm(hold.hold_token);
4

Quick Create Layouts (Zero UI Needed)

Create bus or theater layouts with pricing in a single SDK call.

javascript
// Create a bus with pricing in one call
const bus = await sp.createBus({
  name: 'Express Route 42',
  rows: 12,
  seatsPerRow: 4,
  price: 15.00,
  currency: 'GBP'
});
// bus.layout_id → ready to use

// Create a theater with zones
const theater = await sp.createTheater({
  name: 'Grand Hall',
  zones: [
    { name: 'VIP', rows: 3, seats_per_row: 12, price: 100 },
    { name: 'Premium', rows: 5, seats_per_row: 15, price: 60 },
    { name: 'Standard', rows: 8, seats_per_row: 20, price: 30 }
  ],
  currency: 'GBP'
});

All SDK Methods

Builder & Widget

sp.builder(container, options)sp.widget(container, layoutId, options)

Layouts

sp.getLayouts()sp.getLayout(id) / createLayout(data)sp.updateLayout(id, data) / deleteLayout(id)

Seats & Pricing

sp.getSeats(id, {category, status})sp.getSeat(id, seatRef)sp.addSeats(id, [{seat_ref, category}])sp.updateSeat(id, ref, {category, status})sp.updateSeats(id, [...]) — bulksp.deleteSeat(id, ref)sp.setPrice(id, [{category, price}])sp.assignCategories(id, [...])sp.calculate(id, ['A1','A2'])

Booking

sp.book(id, ['A1','A2']) — reserve+confirmsp.reserve(id, refs, mins)sp.confirm(token) / sp.release(token)

Quick Create

sp.createBus({name, rows, price})sp.createTheater({name, zones})

Analytics & Config

sp.analytics() / sp.revenue(id)sp.trends('daily', 30)sp.setServiceFee({percent, fixed})

SDK URL: https://seatpilot.co.uk/sdk/seatpilot.js

Need help? Check or for complete integration guides.