API: web integration and customisation

Introduction

The term web API refers to several modules which can be integrated to a webpage to display web widgets featuring:

The library's real-time occupancy (occupancy rate or waiting time)
The establishment's opening hours

Example of an integrated API displaying the library's real-time occupancy
and opening hours (source: CHUV - BiUM)

These web APIs are automatically refreshed every 5 minutes.
Their design is responsive: they are adapted to the elements which integrate them for a comfortable display on any device.

Integration

HTML Tags

These web APIs are composed of two main HTML tags which can be simply and quickly integrated on a webpage :

A <script> tag enabling to load the JavaScript code able to run the module.
- This tag has to be integrated in the website code between the <head> tags.
- There is a specific <script> tag for each module displayed (occupancy rate, opening hours, waiting time).

A display tag which will vary according to the information displayed: occupancy rate, opening hours or waiting time.
- This tag has to be integrated in the webpage code where the WebAPI will be displayed.

These snippets of HTML code can be retrieved from the API menu in the Affluences admin dashboard, under Administration.

It is possible to integrate these web APIs into a mobile application as soon as the application is able to display a WebView (see existing iOS or Android documentation).

Sample code

Here is how a sample code to display the occupancy rate widget would look like.

  
   <html>

       <head>

           <script charset="UTF-8" src="https://webapi.affluences.com/js/webapi_latest.min.js%22></script>

       </head>

       <body>

           <div class="affluences-counter" data-token="TST0T0t0TT0TTT"></div>

       </body>

    </html>

Customisation

WebAPIs can be customised by adding attributes in the <div> tag.
The table below summarises the different available attributes and their possible values.

WebAPI	Attribute	Possible values	Description
Opening hours	`data-hide-navigation`	true, false	Enables to hide the lateral buttons which would help the user to go from one week to another
	`days-number`	whole numbers ranging from 1 to 7	Enables to display only a certain number of days in the week
	`lang`	eng, deu	Enables to change the language displayed (which is French by default)
Real time occupancy or waiting time	`forecasts-count`	whole numbers ranging from 1 to 5	Enables to display the forecasts of the following time slots (1 to 5 slots possible) (see below)
	`greyscale ou grayscale`	true, false	Enables to switch to a grayscale display
	`lang`	de, en, es, fr, it	Enables to switch from French (by default) to another language
	`data-title-override`	character string	Enables to change the mention displayed over the widget (by default, the name of the institution in the Affluences Admin dashboard).

Example of a customised waiting time WebAPI
with the forecast-count and data-title-override attributes.