Introduction

The editor app is the app where people can create their floor plans and interior designs. The scope of the editor is limited to one floor plan project. Think of a project as a house for a family with the possibility of multiple floor levels, bigger than a room and smaller than an apartment building. You can see a demo of the editor on the Floorplanner website.

This page explains how you can embed the editor app into your own HTML page.

Table of contents

Floorplanner Enterprise subscription

Before you start, make sure you have a Floorplanner Enterprise subscription and an API key. You need an API key to be able to log in as a certain user so you can load and save his/her floor plan projects. Have a look at the Floorplanner pricing page for more info about the Enterprise subscription.

Setup HTML & CSS

Let’s start with a minimal HTML page to embed the editor app. There are some placeholders present within square brackets, e.g. [AUTH_TOKEN], these must be replaced with actual values. You can scroll down to find more info about these placeholders. The scripts will take care or loading the latest version of the editor, including its stylesheets.

The editor app nests itself inside a target HTML node. In the HTML example below, this is done using a <div> with id="fp-editor-container". In this sample the editor will take up 1024px width and 880px height of the target div (#fp-editor-container). The height must be set explicitly, using min-height is not sufficient since a height: 100% within such element is not respected. The dimensions used in the example are the recommended minimum width and height attributes, you can go below this but in some cases, the editor needs at least this minimum amount of space.

    <!DOCTYPE html>
    <html>
        <head>
          <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
          <script src="https://cdnjs.cloudflare.com/ajax/libs/script.js/2.5.8/script.min.js"></script>
        </head>
        <body>
            <div id="fp-editor-container" style="width: 1024px; height: 880px;"></div>
            <script src="https://fp-editor-cdn.floorplanner.com/latest.js" crossorigin="anonymous"></script>
            <script>
                $script.ready('editor', function() {
                    // set up minimal settings object
                    var settings = {
                        user: {
                            id: "[USER_ID]",
                            permissions: ['save'],
                            auth_token: '[AUTH_TOKEN]',
                        }
                    };
                    // the entryPoint function returns a Promise, which is resolved with the 'editor API' object
                    entryPoint(document.querySelector('#fp-editor-container'), [PROJECT_ID], settings)
                    .then(function(api) {window.fpEditor = api});
                });
            </script>
        </body>
    </html>

Placeholders

Within the HTML, the placeholders [USER_ID], [AUTH_TOKEN] and [PROJECT_ID] must be replaced with real values. Below this section, you can find out how to retrieve each individual component.

Replacing AUTH_TOKEN and USER_ID

User ID and Authentication tokens can be retrieved by making an API request with your API key (scroll to bottom to find it). The following is an example cURL request. Do not forget to replace [YOUR_API_KEY] with your actual API key:

curl --user [YOUR_API_KEY]:x https://floorplanner.com/api/v2/users/token.json

This will return json in the following format:

{
   "token" : "eyJ0eXAiOiJKV1QiLQL1bGciOiJIUzI1NiJ9.eyJhY3Rpb24abaJsb2dpbiIsIm1vZGVsIjoiVXNlciIsImlkIjoxMDMsImlhdCI6MTUyMTczMTIwMH0.juutj2LGAVDUAV103Cz_viPvIfcPcs6weIPl3eFtsdM",
   "user_id" : 1337
}

Within the HTML template, replace [AUTH_TOKEN] with the value of the token key inside the result JSON. Also replace [USER_ID] with the value of user_id inside the result JSON.

Replacing project_id

See the following API call to fetch all the projects you can access, their ID will be part of the JSON output: Projects#index. Replace the [PROJECT_ID] in the HTML template with any of these ID’s.

IMPORTANT: [PROJECT_ID] must be of type number, thus 123 and not "123".

Editor settings

The settings object can be used to customize certain parts of the editor, see the sample below:

var settings = {
    // Set the domain used for requests from the editor.
    // You can remove this setting when using the production environment.
    apiDomain: 'sandbox.floorplanner.com',

    // Toggles between metric and imperial measurement systems [true, false]
    useMetric: true,

    // A template offers a way to add consistent branding to floorplans and interior renders.
    // It's a collection of style and export settings which can be modified in the website.
    templateId: 160,

    // For branding, see below for more info

    // User info
    user: {
        // The Floorplanner user id
        id: 1337,

        // Optional, this will set the default email address for the 2D & 3D exports
        email: 'support@floorplanner.com',

        // An array of permissions:
        //    'save' shows the save button in the top bar
        //    'no-export' hides the 2D & 3D export buttons in the top bar
        //    'hide-email' hides the email field at the bottom of the export popup
        //    'no-back-to-dashboard' hides the Back to dashboard button in the sidebar
        //    'ntl' turns off the cooldown period for renders
        permissions: ['save', 'no-export'],

        // Authentication token to log in as a certain user
        auth_token: 'eyJ0eXAiOiJKV1QiLQL1bGciOiJIUzI1NiJ9.eyJhY3Rpb24abaJsb2dpbiIsIm1vZGVsIjoiVXNlciIsImlkIjoxMDMsImlhdCI6MTUyMTczMTIwMH0.juutj2LGAVDUAV103Cz_viPvIfcPcs6weIPl3eFtsdM'
    }
};

Branding

The look of the editor app can be changed to match the colors and logo of your brand. To make this happen you have to add a few lines to CSS and to the settings object.

In CSS add:

<style type="text/css">
   .fp___root {
     --light: rgb(247, 247, 247);
     --sidebar-color: rgb(247, 247, 247);
     --dark: rgb(0,0,0);
     --dark-darkened: rgb(0,0,0);
     --dark-lightened: rgb(20,20,20);
     --logo-image-url: url(https://floorplanner.com/static/img/ethan-allen-logo.png);
   }
 </style>

And add a new parameter called customStyle to the settings object when initializing the editor app:

var settings: {
  // ... other parameters
  "customStyle": {
    "light": "rgb(247, 247, 247)",
    "dark": "rgb(0,0,0)",
    "logoImage": "https://floorplanner.com/static/img/ethan-allen-logo.png"
  }
}

Unmounting the editor with React

If you are embedding the editor in a single-page webapp, you need to make sure you unmount the editor before you initialize it again.

ReactDOM.unmountComponentAtNode(document.getElementById('fp-editor-container'));

This will ensure that references to the editor are released and there will be just one instance after you intialize it again.

API methods

It possible to trigger certain actions inside the editor by calling methods on the editor API object. For example, this will trigger a save action:

fpEditor.save();

Methods and properties available on the editor API object are:

Method/Property Description
save() Saves the current floor plan.
isDirty Returns true if there are unsaved changes.
state Returns the state of the Floorplan object (walls, items, areas..) displayed in the editor.
meta Returns metadata about areas and outer walls of the Floorplan object.
zoomIn() Zooms in.
zoomOut() Zooms out.
zoomAll() Zooms to fit the view.
dropItem(id, pos) Drops an item onto the plan. id is 40-character item id, pos is {x,y} where x and y are viewport coordinates. You can use MouseEvent.clientX and clientY there
view Write-only. Should be either ‘2D’ or ‘3D’. Switches to the corresponding view.
designId Write-only. Given an id of the design of current project, loads that design into the view.
project Read-only. Data about project, including floors and designs. Meant to be used to list project’s floors and designs and to switch betwen them (setting the /designId/ property).

You can also subscribe to following events:

Property Description
onSave The function assigned to this property will be called whenever the plan was saved.
onUpdated Will be called whenever internal state of the floorplan is updated. NB! The first update happens when the design is loaded
onQuit Will be called whenever the editor is going to quit. NB! This handler replaces the default one, which sets window.location to ‘/dashboard’. So if your goal is to navigate the user to some other page, you have to do it in the body of the handler
onExport Will be called whenever an export was requested. The assigned function will get a single input parameter, either “interior” or “floorplan”, indicating the type of the export

How to assign an event handler:

fpEditor.onUpdated = function(data) { console.log("floorplan updated", data); };