Skip to main content

API Guide: Display Space Availability on a Floorplan

Use this guide to quickly build a visual floorplan that shows real-time booking availability using the Kadence Public API.

Liza avatar
Written by Liza
Updated yesterday

🛠️ Prerequisites

Before getting started:

  • You must have a Kadence account

  • A Global Admin must generate an API key

Need help? Follow the API Getting Started Guide.


📚 API Documentation & Sample Code

Explore the API

Visit our full API specification: https://api.kadence.co/

You'll find:

  • Full list of available endpoints

  • Request/response examples

  • Supported query parameters

Sample Applications

View example code and starter projects on GitHub: https://github.com/wearekadence/kadence-public-api-examples


🔑 Step 1: Get an Access Token

Use your API key to obtain a bearer token via OAuth 2.0 client credentials grant.

See our Authentication section for example request and response bodies.


🏢 Step 2: Fetch Buildings

Use the following endpoint to list all buildings in your Kadence instance:

GET <https://api.onkadence.co/v1/public/buildings

Example response:

{ "@context": "/v1/contexts/Building", "@id": "/v1/public/buildings", "@type": "hydra:Collection", "hydra:totalItems": 1, "hydra:member": [ { "@id": "/v1/public/buildings/01EMPPAER4FWYN1MSBW0NAZSBK", "@type": "Building", "id": "01EMPPAER4FWYN1MSBW0NAZSBK", "name": "Bell Yard Coffee - Bell Yard",

🧭 Step 3: Fetch Floors for a Building

For each building, fetch its floors:

GET <https://api.onkadence.co/v1/public/floors?buildingId={buildingId}

Each floor includes a floorplanUrl:

{ "@context": "/v1/contexts/Floor", "@id": "/v1/public/floors", "@type": "hydra:Collection", "hydra:totalItems": 2, "hydra:member": [ { "@id": "/v1/public/floors/01F01JHXDZCKNP4J9N9PA878Q1", "@type": "Floor", "id": "01F01JHXDZCKNP4J9N9PA878Q1", "name": "Floor 1", "floorplanUrl": "<https://static.onkadence.co/a/floorplan.svg>" },

Load the SVG floorplan in your frontend application.


🧩 Step 4: Understand Space IDs in SVG

Within the SVG, each bookable space has a unique element ID in the format:

space::{space_type}::{spaceId}

Example:

space::desk::01K33VXBJ8GSNRAGJMRCKBATM6

These IDs will be used to apply styling based on live booking data.


📅 Step 5: Fetch Bookings by Floor and Date

Use the bookings endpoint to retrieve all bookings for a specific floor and date:

GET <https://api.onkadence.co/v1/public/bookings?floorId=01F01JHXDZCKNP4J9N9PA878Q1&order[startDateTime]=asc&startDateTime[local_after]=2023-01-01T00:00:00Z&startDateTime[local_before]=2023-01-01T23:59:59Z

Example:

{ "hydra:member": [ { ... "id": "01GTBV1CT3BM8A42SEJ2J5F4EG", "startDate": "2023-01-01T09:00:00+00:00", "endDate": "2023-01-01T17:00:00+00:00", "status": "booked", "type": "desk", "building": "/v1/public/buildings/01EMPPAER4FWYN1MSBW0NAZSBK" } ], "hydra:totalItems": 1 }

🎨 Step 6: Style the Floorplan

Use the spaceId from the bookings response to target the corresponding SVG element by its ID.

Apply a fill color based on booking status:

  • ✅ Available: fill: #60D27B (green)

  • 🔒 Booked: fill: #FF9B53 (orange)


🔁 Step 7: Keep It Updated

Poll the /bookings endpoint periodically (e.g. every 5 minutes) to reflect availability changes in near real-time.


💬 Need Help?

For support, reach out to:
📩 [email protected]

Check our service status at:

For more helpful articles see:
📚 Kadence Help Center

Did this answer your question?