SightMap

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 API for gathering metric 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.unitMatches.impression

Fired when the SightMap application is first rendered.

{
    name: "metrics.unitMatches.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.unitMatches.impression', function (event) {
    console.log(event);
});

metrics.unitMatches.change

Fired when the units in the application change.

{
    name: "metrics.unitMatches.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.unitMatches.change', function (event) {
    console.log(event);
});

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);
});

Examples

Updated about 9 hours ago

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.