bildflowDocs

Docs › Distribute and automate

Availability map

Draw clickable shapes for units and floors on a picture of the building, and show live availability on your microsite, the agent portal and your own website.

An availability map is a picture of your building with a shape drawn over each unit or floor. Each shape takes the colour of the unit's live status: green for available, amber for reserved, grey for sold. Buyers and agents hover or tap a shape to see the unit, and click it to go to that unit.

Add a view

  1. Open the project and select Units. The Availability map card is under the units list.
  2. Under Add a view, give the view a name (for example "Front" or "Sea side"), choose a JPEG, PNG or WebP picture of up to 16 MB, and select Upload.

A project can have up to 6 views. Rename them, change their order with Move earlier and Move later, or delete one with Delete view, which also deletes its shapes. Pictures count towards your storage.

Draw a shape

Drawing needs a mouse or a touch screen.

  1. Select Draw a shape, or click the picture.
  2. Click (or tap) each corner of the unit or floor in turn. A shape needs at least 3 points and can have at most 40.
  3. Click the first point, or press Enter, to finish. Backspace removes the last point and Escape stops drawing.

To adjust a shape, select it and drag its points or the whole shape. With a point selected, the arrow keys move it in small steps. Delete removes the selected shape. Zoom in with the zoom buttons, the mouse wheel or two fingers for small units.

Assign units and floors

With a shape selected, choose what it is under This shape is: one of the project's units, or a floor. Then select Save shape. A shape marked "not saved" has changes you haven't saved yet.

  • A unit shape shows that unit's status, and its type, bedrooms, area and price on hover. A unit can have one shape per view.
  • A floor shape is green while any unit on that floor is available, amber when no unit is available but at least one is reserved, and grey when all are sold. It shows how many of its units are available.

Where the map appears

The map shows wherever a view has at least one shape:

  • Microsite: above Availability. Clicking a unit scrolls to its card, ready for Enquire about this unit. Clicking a floor filters the list to that floor. See Project microsites.
  • Agent portal: in each project, above the units. Clicking a unit opens its details, and clicking a floor filters the table. Signed-in agents also see which units are on hold; the shared link never does. See Agent portal.

The same settings apply as for the rest of each page. The microsite follows its Show prices and Show sold units settings, and the agent portal follows Agent portal access. A sold unit that a page hides is left off the map too. Status changes show up within five minutes on the microsite and right away in the agent portal.

Embed on your website

When the project's microsite is published, the map can also be framed into your own website. Settings › API & integrations › Embed on your website has a ready-made snippet for each project with a published microsite (owners and admins). It looks like this:

<iframe src="https://<your bildflow address>/embed/availability/<workspace>/<project>?lang=en" title="Availability map" style="width:100%;border:0"></iframe>

Change lang=en to lang=el, lang=ru or lang=he for Greek, Russian or Hebrew (right to left). Clicking a shape opens the microsite at that unit or floor in a new tab. The page tells its frame how tall it is: the one-line script of the embedded forms sizes the frame to fit. The page follows the microsite's settings and disappears when you unpublish it.

WordPress

With the bildflow Inventory plugin (version 1.1 or later), add [bildflow_availability project="<project slug>"] to any page. It shows the embedded map, sized to fit. On a trial, or without API access, enter your workspace slug in the plugin settings; the map itself needs no key. Developers can also read the views, shapes and statuses from GET /api/public/availability?project=<slug>. See Integrations and API.

We use cookies for analytics. Cookie Policy