How-To Guide

How to embed an interactive floor plan on your website

Q: Do I need an iframe to embed the floor plan?

No. The shortcode renders the interactive floor plan directly inside your WordPress page, so it inherits your page width, loads from your own domain, and is indexed as part of your site.

Q: Can I embed a floor plan on a website that isn't built with WordPress?

Not directly — Interactive Real Estate is a WordPress plugin and needs a WordPress site to run. If your main site uses a different platform, you would need a WordPress install to host the floor plan page.

Q: Interactive vs static floor plan — what's the difference for visitors?

A static floor plan only shows the layout. An interactive floor plan lets visitors click each room or unit to see its size, price, and availability, and can link straight to an enquiry form. That removes the 'is this one still available?' email.

Q: Can I embed more than one floor plan on the same page?

Yes. Each project has its own shortcode, so you can place several embedded floor plans on one page — for example one per floor or one per building.

Most sites embed a floor plan as a flat image or a PDF download, which tells visitors nothing about price or availability. An embedded interactive floor plan lets them click each room or unit right on the page. Here's how to embed one on a WordPress website with a single shortcode — no iframe, no external hosting, and no code.

Get Started Free Live Demos

Step by step

Follow these steps

Install Interactive Real Estate on your WordPress site

Go to Plugins → Add New, search for 'Interactive Real Estate', and install the free version from WordPress.org. The plugin runs inside your own WordPress install, so the embedded floor plan is part of your page rather than a third-party widget.

Upload the floor plan you want to embed

Create a new project and upload your floor plan image — JPEG, PNG, or WebP. A static floor plan export from your architect or a scanned plan both work.

Make it interactive

Draw a clickable zone over each room, apartment, or office with the built-in polygon editor, then add the details visitors should see — name, size, price, and status. This is what turns a static floor plan into an interactive one.

Copy the embed shortcode

The shortcode appears in the lower-left of the editor, for example [irep_project id="8"]. This is the only embed code you need — there is no iframe or script tag to copy.

Paste it where the floor plan should appear

Add the shortcode to any page, post, or template — a Shortcode block in Gutenberg, or the shortcode/text module in Elementor, Divi, WPBakery, Beaver Builder, or Brizy. Publish the page and the embedded floor plan is live.

Check it on mobile

The embedded floor plan scales with the page width and the clickable zones stay aligned at every size. Open the page on a phone to confirm the layout fits your theme.

Live preview

See how an interactive building works on your website

Buyers explore your development the way they actually want to — click any unit for its price, area, floor and availability. They find the flat that fits before they ever pick up the phone, and your sales team spends its time on people who are ready to buy.

Explore a live demo See pricing

Free plan on WordPress.org — no credit card required

yourproject.com / apartments

The Interactive Real Estate editor, linking a drawn polygon to a specific flat on a building render

Click · Filter · Reserve

One shortcode

FAQ

Frequently asked questions

Do I need an iframe to embed the floor plan?

Can I embed a floor plan on a website that isn't built with WordPress?

Interactive vs static floor plan — what's the difference for visitors?

Can I embed more than one floor plan on the same page?

Ready to make your images interactive?

Install the free version from WordPress.org and create your first interactive floor plan in minutes — no coding required.

Get Started Free All guides