--- title: Creating Interactive Floorplans with the API description: PUBLISHED --- [Skip to content](https://support.locatrix.com/en-au/creating-interactive-floorplans-with-the-api#main-content) English - Australia Show submenu for translations [![Locatrix](https://support.locatrix.com/hs-fs/hubfs/locatrix-boxed-logo.png?width=100&height=33&name=locatrix-boxed-logo.png)](https://info.locatrix.com/?hsLang=en-au) - [PlanStudio®](https://info.locatrix.com/planstudio) - [PlanSafe®](https://info.locatrix.com/plansafe) - [Partner Support](https://info.locatrix.com/plansafe-partner-support) Open main navigation Close main navigation - [PlanStudio®](https://info.locatrix.com/planstudio) - [PlanSafe®](https://info.locatrix.com/plansafe) - [Partner Support](https://info.locatrix.com/plansafe-partner-support) - English - Australia Show submenu for translations - [Contact us](https://www.locatrix.com/contact) [Contact us](https://www.locatrix.com/contact) How can we help you? - There are no suggestions because the search field is empty. 1. [Locatrix Support](https://support.locatrix.com/en-au?hsLang=en-au) 2. [PlanSafe Partner Support](https://support.locatrix.com/en-au/plansafe-partner-support?hsLang=en-au) 3. [PlanStudio Resources](https://support.locatrix.com/en-au/plansafe-partner-support?hsLang=en-au#planstudio-resources) # 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*](https://support.locatrix.com/hc/article_attachments/33267593387673?hsLang=en-au)attachment in this guide 2\. Open the *[Account Management Page](https://account.locatrix.com/)* and Generate an API Key. 3\. Use the *[API documentation](https://api.locatrix.com/docs/plans-javascript-sdk/)* 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*](https://support.locatrix.com/hc/article_attachments/33267593387673?hsLang=en-au)attachment in this guide, open it using an Application such as [Notepad++ .](https://notepad-plus-plus.org/) 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. ![](https://support.locatrix.com/hubfs/Knowledge%20Base%20Import/33308555499673.png)   **2. Generating and API Key & Secret** Open the *[Account Management Page](https://account.locatrix.com/)* and use the Hamburger menu in the top left corner to navigate to *Applications -\> API Keys.* ![](https://support.locatrix.com/hubfs/Knowledge%20Base%20Import/44041088678553.png) Click ![](https://support.locatrix.com/hs-fs/hubfs/Knowledge%20Base%20Import/33308555509785.png?width=96&height=26&name=33308555509785.png)  Select a roll and then give the API Key a name and click ![](https://support.locatrix.com/hs-fs/hubfs/Knowledge%20Base%20Import/33308555519257.png?width=75&height=26&name=33308555519257.png) 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. ![](https://support.locatrix.com/hubfs/Knowledge%20Base%20Import/33308555525273.png) *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](https://api.locatrix.com/docs/plans-javascript-sdk/)* 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. ![](https://support.locatrix.com/hubfs/Knowledge%20Base%20Import/33308555529369.png) Next open up PlanStudio, Navigate to the Plans you want to use and right click the ![](https://support.locatrix.com/hs-fs/hubfs/Knowledge%20Base%20Import/33308530903065.png?width=21&height=19&name=33308530903065.png) 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.   ![](https://support.locatrix.com/hubfs/Knowledge%20Base%20Import/33308555559961.png) *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/](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. *![](https://support.locatrix.com/hs-fs/hubfs/Knowledge%20Base%20Import/33308530930201.png?width=390&height=301&name=33308530930201.png)*   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  *![](https://support.locatrix.com/hubfs/Knowledge%20Base%20Import/33308530933529.png)* 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. - [PlanStudio](https://support.locatrix.com/en-au/planstudio?hsLang=en-au#main-content) - [Getting Started](https://support.locatrix.com/en-au/planstudio?hsLang=en-au#getting-started) - [Plan Editor Tools](https://support.locatrix.com/en-au/planstudio?hsLang=en-au#plan-editor-tools) - [Configuring Diagrams & Exporting](https://support.locatrix.com/en-au/planstudio?hsLang=en-au#configuring-diagrams-exporting) - [Tips, Menus & Settings](https://support.locatrix.com/en-au/planstudio?hsLang=en-au#tips-menus-settings) - [Pre-Incident Action Plans (Fire pre-plans)](https://support.locatrix.com/en-au/planstudio?hsLang=en-au#pre-incident-action-plans-fire-pre-plans) - [PlanSafe](https://support.locatrix.com/en-au/plansafe?hsLang=en-au#main-content) - [Admin Dashboard](https://support.locatrix.com/en-au/plansafe?hsLang=en-au#admin-dashboard) - [Managing Content](https://support.locatrix.com/en-au/plansafe?hsLang=en-au#managing-content) - [LMS Integration & Troubleshooting](https://support.locatrix.com/en-au/plansafe?hsLang=en-au#lms-integration-troubleshooting) - [PlanSafe Learners](https://support.locatrix.com/en-au/plansafe?hsLang=en-au#plansafe-learners) - [PlanSafe Partner Support](https://support.locatrix.com/en-au/plansafe-partner-support?hsLang=en-au#main-content) - [PlanStudio Resources](https://support.locatrix.com/en-au/plansafe-partner-support?hsLang=en-au#planstudio-resources) - [Marketing](https://support.locatrix.com/en-au/plansafe-partner-support?hsLang=en-au#marketing) [![Locatrix](https://support.locatrix.com/hs-fs/hubfs/locatrix-boxed-logo.png?width=100&height=33&name=locatrix-boxed-logo.png "Locatrix")](https://locatrix.com/) # Protecting lives through preparedness. Copyright © 2026, Locatrix