Creating Interactive Floorplans with the API

To get started creating an interactive floorplan with the Plans JavaScript SDK there are three main steps you will need to follow to create and edit an interactive Plan.

1. Download the API Template.html attachment in this guide

2. Open the Account Management Page and Generate an API Key.

3. Use the API documentation and your API Key to Generate an API Viewer token.

You can then edit the API Template, paste in your token and make any changes required.

1. The Default Interactive Floorplan Template

Once you have downloaded the API Template.html attachment in this guide, open it using an Application such as Notepad++ .

This html file references a viewer that is hosted by Locatrix and will be updated from time to time to include new features and options you will be able to add to your Interactive plan by pasting to the bottom of the html file.

You will use this file as a starting off point and once generated, will paste a viewer token for the plans you want to use in the area highlighted below.

2. Generating and API Key & Secret

Open the Account Management Page and use the Hamburger menu in the top left corner to navigate to Applications -> API Keys.

Click   Select a roll and then give the API Key a name and click

This will generate you a unique API Key & Secret, Leave this window open or copy these somewhere safe to use when generating your Viewer Token.

Note: once you have closed this window you will not be able to see these again.

3. Generating a Viewer Token

Open the API documentation and generate an API Viewer Token by navigating to the Online Viewer Token Generator.

Here you can paste your API Key and Secret we generated in the last step from the Account management page.

Next open up PlanStudio, Navigate to the Plans you want to use and right click the in the bottom left corner of the Plan Editor.

Here you can copy the Partner and Campus codes to use in the Viewer token generator.

Note: partner and campus codes can by copied by clicking on them.

Last you will need to Edit the Unix Time Stamp to set when you want the Viewer token to expire, to convert a time and date to Unix head to a website like https://www.unixtimestamp.com/

When complete you can click Generate and you will receive your unique Viewer token, to copy and paste into your HTML file.

You can now paste your Viewer token into the place indicated, being careful to keep the Quotation marks at the beginning and end of the code 

From here you can now customize your interactive Plan experience by changing and of the setting parameters to either True or False to enable or disable and features you require.

This file can now be used locally or uploaded to use through your website, or via a QR Code.