How to add an interactive floor plan to WordPress (3 ways)
How to add an interactive floor plan to WordPress: a free plugin, a plain HTML image map, or FloorMap ($39). What each takes to set up, where each stops, and which one fits a building that is actually selling. All three turn a flat plan image into something a visitor can click. They differ in how you mark the units, whether the plan knows what is still available, and what happens when somebody wants to ask about a flat.
What you need before you start
A plan image: the architect’s floor plan, a site plan of the plots, or a photo of the printed brochure page. PNG, JPG or WebP all work; an SVG works too, though in every method here it is a background and not a set of ready-made shapes. Then a list of the units with whatever a buyer asks first: number, floor, floor area, bedrooms, price and whether it is still available.
Decide one thing before you pick a method: does the plan only have to look clickable, or does it have to stay correct while units sell? A plan that shows a sold flat as available costs more trust than a flat image ever did. The longer version of that argument is in selling units from a floor plan.
Way 1: a free plugin from wordpress.org
Interactive Real Estate – Floor Plan & Building Visualizer is the closest free match for a development. As of October 2026 it is at version 2.5.6 with 20+ active installs. You upload a building render or floor plan, draw SVG polygons over it, and connect each one to a flat with its price, area, rooms and status; the plan goes on a page with the [irep_project] shortcode or a block. Projects split into blocks, floors and flats, so a buyer can click a building, then a floor, then a unit.
Its limits are in its own FAQ: the free version allows one project and 25 flats. Unlimited projects and flats are Premium; the callback form inside the unit popup, the filterable apartment list and shareable unit links are in the Gold plan.
Floorplans – Lite works differently: you drag elements onto a background image inside the block editor, and visitors get zoom, pan, full screen and a 3D isometric view. It is more general than real estate; its own description mentions booths, parking spaces and seats. To collect what a visitor picked, you put the plan inside a form with the shortcode set to radio or checkbox, and its FAQ says form plugins such as WPForms may need extra code to handle the data. As of October 2026 it is at version 2.0 with 10+ active installs.
General image-map plugins such as Draw Attention (20,000+ active installs) also draw hotspots on any image, but they show text or a link on click; they have no idea of a unit, a status or an enquiry. The free version covers one interactive image.
Way 2: a plain HTML image map
No plugin at all. Measure each unit’s corners in pixels on the original image, then add a Custom HTML block:
<img src="/wp-content/uploads/floor-3.png" usemap="#floor-3"
width="1600" height="1000" alt="Floor 3 plan">
<map name="floor-3">
<area shape="rect" coords="120,80,420,360"
href="/contact/?unit=3A" alt="Flat 3A, 2 bedrooms, available">
<area shape="poly" coords="440,80,760,80,760,300,600,360,440,360"
href="/contact/?unit=3B" alt="Flat 3B, 3 bedrooms, sold">
</map>It works, it costs nothing and it loads instantly. The limits are just as plain. The coordinates are in the image’s original pixels, so when the theme shrinks the image on a phone the areas no longer line up unless you add a script to rescale them. Nothing changes colour on hover or by status; “sold” is only text in the alt attribute, and every sale means editing the HTML. And a click only goes to a link: the contact form has to read the unit from the URL itself, or the enquiry arrives without it.
Way 3: FloorMap, step by step
FloorMap, an interactive floor plan plugin for WordPress, costs $39 one-time for one site and needs no WooCommerce, because nothing is sold at a checkout. The whole setup:
- Install the plugin ZIP under Plugins → Add New → Upload Plugin, activate it and enter the licence key.
- Create a plan and upload the image: PNG, JPG, WebP or SVG.
- In the builder, pick Rectangle or Polygon and draw one shape per unit. A polygon is a series of clicks closed with a double-click or Enter; undo and redo are there, and the builder goes full screen for a dense plan.
- Fill in each unit: label, status (available, reserved, sold, coming soon), price, floor area, bedrooms, floor and a description.
- Save, then place the plan with the FloorMap block or the [floor_map id="…"] shortcode. Visitors get a filter bar for status, price and rooms, plus shortlist and compare.
- Work the enquiries. Each one arrives naming the unit it came from and moves through new, contacted, reserved, sold and closed; the list exports to CSV.
What it does not do: take payments or reservations, draw the plan for you, turn the shapes inside an SVG into units, or switch floors inside one map. Each floor or building is its own plan on the page. It is not a CRM, and it is not free. Open the demo →
Side by side
| Interactive Real Estate (free) | Floorplans – Lite | HTML image map | FloorMap | |
|---|---|---|---|---|
| Price | Free; paid plans add more | Free; Pro version exists | Free | $39 one-time, one site |
| How units are marked | SVG polygons drawn on the image | Elements dragged onto the image | Pixel coordinates typed by hand | Rectangles and polygons drawn on the image |
| Limits in the free version | 1 project, 25 flats | Not stated | None | No limit on plans or units |
| Status per unit | Yes, colour-coded | Not stated | No | Available, reserved, sold, coming soon |
| Resizes on phones | Not stated | Yes | Only with extra script | Yes |
| Visitor enquiry | Callback form in the Gold plan | Through your own form | A link to your contact page | Built in, names the unit |
| Filter by price or rooms | Gold plan | Not stated | No | Yes, plus shortlist and compare |
| Several floors or buildings | Blocks, floors and flats | One floorplan per shortcode | One map per image | One plan per floor, several per page |
Which one should you use
- One small building, under 25 flats, and a phone number is enough as the next step: try Interactive Real Estate’s free version first.
- A plan where visitors pick a spot and submit it with a form you already run: Floorplans – Lite.
- A plan that never changes and only has to link somewhere: the HTML image map, and no plugin to update.
- A development that sells over months, where status has to stay current and every enquiry should arrive naming its flat: FloorMap. The filter bar and the enquiry pipeline are the parts worth trying in the demo.