ExpoFP JavaScript SDK

Appearance

Map integration ​

Embed the interactive floor plan on your website by importing load from the @expofp/floorplan package and pointing it at your event’s manifest URL (see also load() in the API reference).

💡 Make sure the container has a set width and height

Method 1: Initialize with JavaScript ​

  • Add a container element to hold the floor plan.
  • Load the SDK with a module script from a CDN, for example import { load } from 'https://unpkg.com/@expofp/floorplan'.
  • Call load with a manifest reference ($ref to your event’s manifest.json) and options (for example element).

This method gives you direct control over initialization in your application’s JavaScript.

📝 Other options are available — see the API reference.

Add a container with id="floorplan" (or pass another element in options), then use a module script or bundle entry point:

js
import { load } from 'https://unpkg.com/@expofp/floorplan';
load(
  { $ref: 'https://demo.expofp.com/manifest.json' },
  { element: document.querySelector('#floorplan') },
);

Open live example

Method 2: Using an iframe ​

To embed the floor plan, insert an iframe with your event URL.

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body
    style="margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center"
  >
    <iframe
      style="width: 90%; height: 90%; border: 0"
      src="https://demo.expofp.com?allowConsent=false"
      allow="clipboard-read; clipboard-write"
    ></iframe>
  </body>
</html>

Open live example