API : intégration web et personnalisation

API : intégration web et personnalisation

Introduction

Par le terme “WebAPI”, nous parlons de différents modules à intégrer au code dans une page web pour permettre d’afficher sous forme de widget web :

  • L’affluence en temps réel de l’établissement (taux d'occupation ou temps d'attente)
  • Les horaires de l’établissement
Exemple d'une API intégrée présentant l'occupation en temps réel
et les horaires d'ouverture de la bibliothèque (source: CHUV - BiUM)
Info
Les WebAPI ont toutes pour fonctionnement un rafraîchissement automatique du module toutes les 5 minutes.
Chaque WebApi a un design dit responsive   : elle s’adapte aux éléments qui la contiennent et propose donc une consultation confortable même pour des supports différents.
Idea
Pour retrouver les WebAPI de votre établissement, rendez-vous sur le portail d'administration dans la partie " Diffuser l'affluence ". Si vous avez plusieurs espaces, vous devez les sélectionner dans le menu déroulant pour accéder à l'API de chacun d'entre eux.

Intégration

Balises HTML

Ces WebAPIs sont composées de balises HTML intégrables de manière simple et rapide sur une page web :

  • Une balise <script> qui permet de charger le code JavaScript nécessaire au bon fonctionnement du module.
    • Cette balise est à intégrer dans le code de la page entre les balises <head>.
    • Il existe une balise <script> par type de module à afficher (temps d’attente, taux d’occupation ou horaires de l’établissement).
  • Une balise d’affichage de la WebAPI qui est différente en fonction de l’information à afficher (temps d’attente, taux d’occupation ou horaires
    • Cette balise doit être intégrée dans le code de la page à l’endroit ou la WebAPI doit être affichée.

Le code à intégrer dans la page HTML peut être récupéré pour chaque établissement dans le portail Affluences dans l’onglet Administration, sous l’onglet Diffuser l’Affluence (WebAPI).

Info
Il est possible d’intégrer ces webAPIs à une application mobile à partir du moment où l’application est en mesure d’afficher une webview (cf. documentations iOS ou Android )

Exemple de code

Voici à quoi un exemple de code HTML donnant lieu à l'affichage d'une webAPI de taux d'occupation pourrait ressembler.
  1. <html>
  2.     <head>
  3.         <script charset="UTF-8" src="https://webapi.affluences.com/js/webapi_latest.min.js%22></script>
  4.     </head>
  5.     <body>
  6.         <div class="affluences-counter" data-token="TST0T0t0TT0TTT"></div>
  7.     </body>
  8.  </html>

Personnalisation

Les WebAPI peuvent être personnalisées par l’ajout d’attributs dans la balise <div>.
Le tableau ci-dessous reprend les attributs disponibles et les différentes valeurs possibles. 

WebAPI

Attribut

Valeurs possibles

Description

Horaires

data-hide-navigation

true/false

Permet de masquer les boutons (à gauche et à droite des jours) de changement de semaine

days-number

nombre entier de 1 à 7

Permet de n’afficher qu’un certain nombre de jours de la semaine

lang

fre, eng, ita, spa, ger

Permet de changer la langue d’affichage (par défaut la langue du navigateur ou l'anglais si la langue du navigateur n'est pas supportée)

  1. fre : français
  2. eng : anglais
  3. ita : italien
  4. spa : espagnol
  5. ger : allemand

Affluence en temps réel (attente ou occupation)

forecasts-count

nombre entier de 1 à 5

Permet d’afficher les prévisions des créneaux suivants (1 à 5 créneaux possibles) (cf.ci-dessous)

greyscale ou grayscale

true/false

Permet de basculer l’affichage en mode nuances de gris

lang

fre, eng, ita, spa, ger

Permet de changer la langue d’affichage en anglais, allemand ou italien (par défaut la langue du navigateur ou l'anglais si la langue du navigateur n'est pas supportée)

  1. fre : français
  2. eng : anglais
  3. ita : italien
  4. spa : espagnol
  5. ger : allemand

data-title-override

chaine de caractère

Permet de modifier le nom de l’établissement sur la WebAPI. Par défaut, nom principal dans le portail Affluences




Exemple d’une personnalisation d’une WebAPI de temps d’attente
avec forecast-count et grayscale

Communication

Quelques conseils pour bien utiliser les webAPIs :

  • Présenter les webAPI (ou widgets web) à votre webmaster
  • Préciser au public que les données diffusées sont en temps réel
  • Ajouter un titre clair et une légende, par exemple : “Temps d’attente actuel à la billetterie / Taux d’occupation actuel de la salle”