From plan image to live enquiries in minutes
Everything you need to launch an interactive floor plan in Framer. No code, no backend, just your plans and your units.
Add the component
Paste the component link from your receipt onto your Framer canvas. Floor Plan Selector lands in your Assets, ready to reuse on every page of your site.
Add your plans
Set Role to Plan viewer and add one entry per floor, phase or building under Plans. Give each a Plan ID such as
level-1and upload the image.Connect your units
CMS: add a Collection List, place a second Floor Plan Selector inside it with Role set to Unit card and connect your fields. Use the same Map ID on both. Manual: set Unit data to Manual and add units straight into the Units list.
Draw your regions
Turn Setup tool on and open Preview. Pick a unit, draw rectangles or polygons over the plan, then press Copy configuration and paste it into Regions.
Capture enquiries
Place a Floor Plan Selector inside your native Framer form with Role set to Enquiry field and the same Map ID. Point Enquiry link at the form section and every submission names the chosen unit.
Style and publish
Match your brand with Colours, Font, Layout and Text, then publish. Share links open the exact unit, and setup checks only ever appear in the editor.
CMS fields that work best
| Unit card control | CMS field type | What to store |
|---|---|---|
| Unit ID | Plain text | Matches the region, for example A-101 |
| Name | Title | Apartment 101, Plot 4, Suite G.02 |
| Plan ID | Plain text | Matches a plan, for example level-1 |
| Availability | Option or Plain text | Available, Reserved or Sold, plus your own words |
| Price | Number | Pair with a Price public toggle for price on request |
| Bedrooms | Number | 0 shows as Studio |
| Area | Number | Square metres or square feet |
| Image | Image | Layout or photo shown in the details panel |
| Description | Plain text | A short line about the unit |
| Link | Page link | Opens the unit page from View home |
- Show every unitRemove the Collection List limit so every unit reaches the plan.
- Your own wordingMap phrases such as Under offer or Let agreed under Availability, Also match.
- Many plans, one siteGive each plan viewer its own Map ID and they stay fully independent.
- Rents and feesAdd text after each price, such as /month or /year, under Values.
Your licence covers one website, with every future update included. Your licence key is the receipt number on your purchase email. Need a hand? Reply to that email and we will help you get live.