Home Back

JavaScript Library

JavaScript Library

Overview

The Placesign JavaScript library enables your web site to display real-time Place Status with copy and paste integration.

Start: HTML Page

Start with a basic HTML Page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo - JavaScript Library - Placesign</title>
</head>
<body>
</body>
</html>

Step 1: Include

Include our library core and our standard style sheet.

<head>
    <script src="https://assets.placesign.com/scripts/PlaceStatus.js" type="text/javascript" ></script>
    <link href="https://assets.placesign.com/styles/PlaceStatus.css" rel="stylesheet" type="text/css" />
</head>

Step 2: Configure

Configure the RESTful Web API with a valid Placesign assigned APIKey

<script type="text/javascript">
    Placesign.Configuration.APIKey = '013qUl1QZw95n7fkXrW7DkTdeWV926Q9ic5yL-TiEAvD2dwOEysxsmVOSkw9tWLnJN';
</script>

Step 3: Listen

Tag a div element of your choice with the class name "PlaceStatusInstance" and add the data-placetoken attribute with your PlaceToken to start receiving our broadcast. Add the "PlacePanel" class name to apply Placesign's default styling.

<body>
    <div class="PlacePanel PlaceStatusInstance" data-placetoken="01011" />
</body>

Done:

That's it, here is the complete sample code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://assets.placesign.com/scripts/PlaceStatus.js" type="text/javascript" ></script>
    <link href="https://assets.placesign.com/styles/PlaceStatus.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        Placesign.Configuration.APIKey = '013qUl1QZw95n7fkXrW7DkTdeWV926Q9ic5yL-TiEAvD2dwOEysxsmVOSkw9tWLnJN';
    </script>
</head>
<body>
    <div class="PlacePanel PlaceStatusInstance" data-placetoken="01011" />
</body>
</html>

Running Sample: