How to use

Import component style at the top of the page

<link rel="stylesheet" href="https://unpkg.com/@proximahq-dev/floorplans@latest/dist/floorplan-styles.css">

Create a wrapper element to contain the component

<div id="floorplansContainer" />

Add a script at the bottom of the body

<script src="https://unpkg.com/@proximahq-dev/floorplans@latest/dist/proxima-floorplans.umd.js"></script>

<script>
    const floorplans = new ProximaFloorplans({
      projectSlug: "slug (e.g. nikola)",
      cardDisplayInfo: ["type", "totalSize"], // optional
      moreModalDisplayInfo: ["totalSize", "interiorSize", "mezzanineSize", "floors", "type"] // optional
    });
    floorplans.init("floorplansContainer");
</script>

Types

cardDisplayInfo and moreModalDisplayInfo can accept the following values:

type InfoType =
    | "totalSize"
    | "interiorSize"
    | "exteriorSize"
    | "mezzanineSize"
    | "bedrooms"
    | "bathrooms"
    | "type"
    | "floors"
    | "buildings";

cardDisplayInfo can take up to 3 info values

moreModalDisplayInfo can take up to 6 info values