Configuration
Set Up Content Security Policy (CSP)
Ensure your application’s CSP allows embedding the floorplan iframe:html
<meta name="Content-Security-Policy" content="frame-ancestors 'self' https://floorplan.gospace.app">Initialise the SDK
Create an instance of the FloorplanSDK with required and optional configuration parameters. Below is an example using vanilla JavaScript:html
<!DOCTYPE html>
<html>
<body>
<div id="floorplan-container"></div>
<script src="https://cdn.gospace.app/floorplan.umd.js"></script>
<script>
const sdk = new gospaceFloorplan.FloorplanSDK({
key: 'floorplan-container', // ID of the container element
access_token: 'client-specific-access-token', // Obtained from gospace API
location_id: '12345', // Unique identifier for the location
layer_id: 'abc123', // Optional: Specific layer of the floorplan
zone_id: 'abc1234', // Optional: Specific zone within the location
room_id: 'abc12345', // Optional: Specific room within the zone
spaces: ['space1', 'space2', 'space3'], // Optional: Spaces to highlight
dark_mode: true, // Optional: Enable dark mode
class_name: 'floorplan-iframe', // Optional: Custom CSS class
title: 'gospace Floorplan' // Optional: Accessibility title
});
// Handle space selection events
sdk.on('SPACE_CLICKED', ({ space_id }) => {
console.log('Space clicked:', space_id);
// Add logic to handle space selection (e.g., display details or book a space)
});
// Initialize the floorplan
sdk.init();
</script>
</body>
</html>Configuration Parameters
Parameter
Type
Description
Required
url
string
Iframe URL (default: https://floorplan.gospace.app/iframe)
No
key
string
ID of the HTML element to contain the iframe
Yes
access_token
string
Access token for authentication (JWT)
Yes
location_id
string
Unique identifier for the location
Yes
layer_id
string
Specific layer of the floorplan (e.g., floor)
No
zone_id
string
Specific zone within the location
No
room_id
string
Specific room within the zone
No
spaces
string[]
Array of space IDs to highlight (e.g., desks, rooms)
No
class_name
string
Custom CSS class for the iframe
No
title
string
Accessibility title for the iframe
No
dark_mode
boolean
Enable dark mode for the floorplan UI
No
Last updated
Was this helpful?