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: