Basic · Setup
Set up Seat Map Basic.
Six short steps, all in the Properties panel. No code and no accounts needed.
01
Add Seat Map to your page
Install Seat Map from the Framer Marketplace, then open the Insert panel and drag Seat Map onto your page.
Set its width to Fill, or a fixed width up to about 900px. The height adjusts itself.
Place it in a section with a max width of about 800px for the best look.
02
Pick a layout
Choose a Layout: Theatre, Cinema, Concert Hall, Small Venue or Bus.
For your own room choose Custom and type the Rows: one line per row and one letter per seat. The letter is the price zone. Use _ for aisles and empty spaces.
___VVVVVV__VVVVVV___
_PPPPPPPP__PPPPPPPP_
SSSSSSSSS__SSSSSSSSS
SSSSSSSSS__SSSSSSSSS
Rows are labelled A, B, C… from the top and seats are numbered left to right, skipping gaps, so the first seat in row A is A1.
03
Set your price zones
Open Zones and add one item per zone. Give each one a Code (the letter you used in Rows), a Name, a Price and a Color.
Set the Currency symbol and choose whether it goes Before or After the price.
04
Mark sold seats
Type sold seats into Sold Seats, separated by commas. To keep a list per event, connect the field to a CMS text field.
For live updates, use a Google Sheet. List sold seat IDs in column A, choose File → Share → Publish to web, pick that sheet and Comma-separated values (.csv), then copy the link into Google Sheet.
Sold seats refresh every 30 seconds without republishing. Change the timing with Refresh.
A5, A6, B9, C12
Only docs.google.com “Publish to web” links work. Never publish a sheet that contains customer names or emails.
05
Collect bookings with a Framer Form
Add a Form from the Insert panel and drag the Seat Map inside it, next to fields like Name and Email and a submit button.
Set Booking to Framer Form. Each submission includes the picked seats as Seats and the total as Seats Total. Rename them with Field Name.
In the form’s settings choose where submissions go: email, Google Sheets or a webhook. Set Booking to None to show availability only.
Seats: A5, A6
Seats Total: $50
Seats
The picked seat IDs, e.g. A5, A6
Seats Total
The total with currency, e.g. $50
06
Style it and publish
Set Max Seats, the Stage label, Curve, Seat Size and gaps, then match the colors and font to your site.
Publish your site and send a test booking from start to finish.
Need real Stripe checkout with seat holds and automatic booking records? Take a look at the Payment edition.
Stuck on a step?
Most answers are in the FAQ. If not, message me on Framer and I’ll help.