SightMap

The SightMap® Developer Hub

Welcome to the SightMap Developer Hub. You'll find code snippets and example integrations to get you started. Let's jump right in!

SightMap® Metrics API

Introduction

The SightMap® Metrics API provides third-party developers a consistent metric API for gathering data from a SightMap® IFrame which can be tightly integrated into Google Analytics or similar platforms. This functions on a similar platform to the SightMap® JavaScript API.

Quick Start

A working example integrating the API with an example SightMap instance is below. You may insert following usage examples within this HTML document in order to explore the API.

Setting the origin value

Set the origin query parameter to the origin serving the document. The example uses http://localhost:3000, however please update the value accordingly.

If you need to start a local server, the following gist provides instructions for doing so quickly on either Mac or PC: https://gist.github.com/jgravois/5e73b56fa7756fd00b89.

For security reasons, the example must be served from an origin and will not function correctly when directly opened in a Browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SightMap JavaScript IFrame API Example</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!-- The API script must be included on the page -->
    <script src="https://sightmap.com/embed/api.js"></script>

    <!--
    Include the IFrame embed code. The embed URL must include `enable_api=1` and 
    provide the pages origin, the example uses `http://localhost:3000`, however
    update this accordingly. Additionally, the iframe must declare an id
    attribute, in this case it is set to `sightmap`.
    -->
    <iframe id="sightmap" src="https://sightmap.com/embed/dgow3krqp2m?enable_api=1&origin=http://localhost:3000" frameborder="0" width="100%" height="100%"></iframe>

    <script type="text/javascript">
        // Create a new embed instance, providing the IFrame id value:
        var embed = new SightMap.Embed('sightmap');

        embed.on('ready', function () {
            // Usage example code goes here...
        });
    </script>
</body>
</html>

Usage Requirements

In order to use the SightMap JavaScript IFrame API, the page must include the following script tag prior to the embed code.

<!-- The API script must be included on the page -->
<script src="https://sightmap.com/embed/api.js"></script>

metrics.unitList.impression

Fired when the unit list is first rendered.

{
    name: "metrics.unitList.impression",
    data: {
        units: [
            {
                id: "374030",
                mapId: "374030",
                unitNumber: "2-101",
                area: 1887,
                areaDisplay: "1,877 Sq. Ft.",
                price: 2315, // nullable
                priceDisplay: "$2,315", // nullable
                availableOn: "2018-09-14", // nullable
                availableOnDisplay: "Available Now", // nullable
                floor: {
                    id: "7961",
                    filterLabel: "Floor 1",
                    filterShortLabel: "1"
                },
                floorPlan: {
                    id: "25575",
                    name: "A2",
                    bedroomCount: 1,
                    bathroomCount: 1
                }
            },
            {
                id: "374030",
                mapId: "374030",
                unitNumber: "2-101",
                area: 1887,
                areaDisplay: "1,877 Sq. Ft.",
                price: 2315, // nullable
                priceDisplay: "$2,315", // nullable
                availableOn: "2018-09-14", // nullable
                availableOnDisplay: "Available Now", // nullable
                floor: {
                    id: "7961",
                    filterLabel: "Floor 1",
                    filterShortLabel: "1"
                },
                floorPlan: {
                    id: "25575",
                    name: "A2",
                    bedroomCount: 1,
                    bathroomCount: 1
                }
            }
        ]
    }
}
embed.on('metrics.unitList.impression', function (event) {
    console.log(event);
});

metrics.unitList.change

Fired when the units in the unit list change.

{
    name: "metrics.unitList.change",
    data: {
        units: [
            {
                id: "374030",
                mapId: "374030",
                unitNumber: "2-101",
                area: 1887,
                areaDisplay: "1,877 Sq. Ft.",
                price: 2315, // nullable
                priceDisplay: "$2,315", // nullable
                availableOn: "2018-09-14", // nullable
                availableOnDisplay: "Available Now", // nullable
                floor: {
                    id: "7961",
                    filterLabel: "Floor 1",
                    filterShortLabel: "1"
                },
                floorPlan: {
                    id: "25575",
                    name: "A2",
                    bedroomCount: 1,
                    bathroomCount: 1
                }
            },
            {
                id: "374030",
                mapId: "374030",
                unitNumber: "2-101",
                area: 1887,
                areaDisplay: "1,877 Sq. Ft.",
                price: 2315, // nullable
                priceDisplay: "$2,315", // nullable
                availableOn: "2018-09-14", // nullable
                availableOnDisplay: "Available Now", // nullable
                floor: {
                    id: "7961",
                    filterLabel: "Floor 1",
                    filterShortLabel: "1"
                },
                floorPlan: {
                    id: "25575",
                    name: "A2",
                    bedroomCount: 1,
                    bathroomCount: 1
                }
            }
        ]
    }
}
embed.on('metrics.unitList.change', function (event) {
    console.log(event);
});

metrics.unitList.unit.click

Fired when a user selects a unit from the unit list.

{
    name: "metrics.unitList.unit.click",
    data: {
        unit: {
            id: "374030",
            mapId: "374030",
            unitNumber: "2-101",
            area: 1887,
            areaDisplay: "1,877 Sq. Ft.",
            price: 2315, // nullable
            priceDisplay: "$2,315", // nullable
            availableOn: "2018-09-14", // nullable
            availableOnDisplay: "Available Now", // nullable
            floor: {
                id: "7961",
                filterLabel: "Floor 1",
                filterShortLabel: "1"
            },
            floorPlan: {
                id: "25575",
                name: "A2",
                bedroomCount: 1,
                bathroomCount: 1
            }
        }
    }
}
embed.on('metrics.unitList.unit.click', function (event) {
    console.log(event);
});

metrics.unitMap.unit.click

Fired when a user selects a unit from the unit map.

{
    name: "metrics.unitMap.unit.click",
    data: {
        unit: {
            id: "374030",
            mapId: "374030",
            unitNumber: "2-101",
            area: 1887,
            areaDisplay: "1,877 Sq. Ft.",
            price: 2315, // nullable
            priceDisplay: "$2,315", // nullable
            availableOn: "2018-09-14", // nullable
            availableOnDisplay: "Available Now", // nullable
            floor: {
                id: "7961",
                filterLabel: "Floor 1",
                filterShortLabel: "1"
            },
            floorPlan: {
                id: "25575",
                name: "A2",
                bedroomCount: 1,
                bathroomCount: 1
            }
        }
    }
}
embed.on('metrics.unitMap.unit.click', function (event) {
    console.log(event);
});

metrics.unitDetails.apply.click

Fired when a user selects the apply call-to-action within the unit details modal.

{
    name: "metrics.unitDetails.apply.click",
    data: {
        unit: {
            id: "374030",
            mapId: "374030",
            unitNumber: "2-101",
            area: 1887,
            areaDisplay: "1,877 Sq. Ft.",
            price: 2315, // nullable
            priceDisplay: "$2,315", // nullable
            availableOn: "2018-09-14", // nullable
            availableOnDisplay: "Available Now", // nullable
            floor: {
                id: "7961",
                filterLabel: "Floor 1",
                filterShortLabel: "1"
            },
            floorPlan: {
                id: "25575",
                name: "A2",
                bedroomCount: 1,
                bathroomCount: 1
            }
        },
        leaseTerm: 1, // nullable
        moveInDate: "2019-04-09",
        applyUrl: "https://livemarisol.com/apply/?SearchUrl=https%3A%2F%2Flivemarisol.com%2Fapply%2F&MoveInDate=2019-04-09&UnitId=278"
    }
}
embed.on('metrics.unitDetails.apply.click', function (event) {
    console.log(event);
});

SightMap® Metrics API


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.