Documentation: How to Use the IsoFloor Plugin

1. Installation and activation

Step 1.1: Check that the plugin is installed

Go to WordPress Admin → Plugins. Search for "IsoFloor" or "Clickable Floor Plans". If it is not installed, add it via Plugins → Add New.

Step 1.2: Activate the plugin

Click Activate on "IsoFloor – Clickable Floor Plans & Unit Picker". After activation, IsoFloor appears in the left menu with submenus: Dashboard, Buildings, Apartments, Manage All, Settings, License.

You can add a screenshot of the IsoFloor menu in the admin here.

2. License (optional)

If you have purchased a license (Starter, Professional or Enterprise):

• Go to IsoFloor → License.
• Enter your License Key and click Activate License.

Without a license, the plugin runs in Free mode (1 building, 10 apartments per building).

3. Creating your first building

1. Add a building: IsoFloor → Buildings → Add New.
2. Enter the building name in the Title field.
3. Upload SVG: In the "Building SVG" box click Upload and select your SVG file.
4. Parse SVG: Click Parse SVG & Create Apartments – the plugin creates apartments automatically from the SVG.
5. Publish the building and note the ID (see URL: post=123 → ID is 123).

You can add a screenshot: Add New Building with the SVG field and Parse SVG button.

4. Uploading and SVG structure

The plugin expects specific IDs in the SVG:

Example SVG structure:

<svg viewBox="0 0 800 1200">
   <g id="floor_0">
      <g id="apt_0_01"><!-- path for apartment 01 --></g>
      <g id="apt_0_02"></g>
      <g id="slab_floor_0"></g>
   </g>
   <g id="floor_1">
      <g id="apt_1_01"></g>
      <g id="slab_floor_1"></g>
   </g>
   <g id="roof_1"></g>
</svg>

Demo import: On IsoFloor → Dashboard click Import Demo Building. The demo creates 23 apartments, but your license plan limits how many you get per building: Free = 10 apartments, Starter = 20, Professional = 100, Enterprise = unlimited. If you are on Free you will only receive 10 apartments; on Starter, 20.

5. Managing apartments

1. Go to IsoFloor → Manage All.
2. Select the building from the dropdown.
3. Edit Status (Free/Reserved/Sold), Size (m²), Price, Rooms, Description, Floor Plan Image, Tour URL, Video URL.
4. Click Save All Changes.

You can add a screenshot of the Manage All table.

6. Adding the plan to a page

1. Create or open a Page.
2. Add the shortcode (replace 123 with your building ID):

[isofloor id="123"]

Publish the page – the interactive plan appears on the frontend. With Gutenberg use the Shortcode block; with Elementor use the Shortcode widget.

7. Settings

Go to IsoFloor → Settings. You can change colours for Free (green), Reserved (orange), Sold (red), and other frontend options. Click Save Settings.

8. Shortcode and attributes

Basic shortcode: [isofloor id="BUILDING_ID"]. Optional attributes:

Full example:

[isofloor id="123" show_filters="true" show_stats="true" show_legend="true" show_sidebar="true"]

9. Troubleshooting

• SVG does not display: Check IDs in the SVG (floor_X, apt_X_XX). Clear cache.
• Apartments are not created: Click "Parse SVG & Create Apartments" again. Check the SVG structure.
• Shortcode says "Building not found": Use the building post ID, not the page ID. The building must be Published.
• Changes do not appear: Click "Save All Changes" on Manage All and clear cache.