Carnet de Vaccination Électronique mobile

Le CVE (Carnet de Vaccination Électronique) est intégrable en marque franche au sein de toute application ou site mobile ayant accès à Internet. Dans un site web client, le CVE webmobile est intégré sous la forme d’une balise iframe dont l’URL est précisée ci-dessous.

Page d'accueil du CVE webmobile

Le CVE webmobile offre les fonctionalités suivantes :

  • inscription
  • connexion
  • gestion des carnets
  • gestion des vaccinations enregistrées
  • bilan des vaccins à faire

URL d’intégration

L’URL varie suivant l’environnement de déploiement. [cle_fournie] désigne une clé unique fournie au client par l’équipe de MesVaccins.net.

En environnement de production
https://cobranding.mesvaccins.net/api/web?co_branding=[cle_fournie]
En environnement de test
http://test-cobranding.mesvaccins.net/api/web?co_branding=[cle_fournie]

La balise à incorporer dans le site web client se présente sous la forme suivante :

<iframe src="[url_d_integration]"></iframe>

Mise en garde

Un bug relevé sur le site de Webkit affecte actuellement les navigateurs Safari et Google Chrome sous iOS 8.
L’utilisation de l’attribut “-webkit-overflow-scrolling: touch” introduit un problème majeur lorsqu’une action est effectuée sur la page après avoir “scrollé” : l’action est enregistrée plus haut, comme si le défilement réalisé n’avait pas eu lieu.

Cela provoque le dysfonctionnement de pages telles que l’index des carnets ou le questionnaire santé, où le contenu de la page est tel qu’il ne peut être affiché intégralement sur la hauteur de l’écran, et où une action peut être requise en dessous de la ligne de flottaison (comme par exemple la validation du questionnaire santé).

Pour garantir une utilisation sans encombre du CVE mobile, il faut modifier le style CSS de l’élément contenant l’iframe de la façon suivante :

  • affecter l’attribut ‘overflow’ à ‘visible’;
  • affecter l’attribut ‘position’ à ‘static’ (ainsi que pour l’ensemble des éléments parents).
<div style="overflow: visible; position: static;">
	<iframe src="[url_d_integration]"></iframe>
</div>

Le bug est alors absent de cette configuration.
Il faut noter qu’il n’est alors plus possible de donner une hauteur limitée à l’iframe ou de “scroller” à l’intérieur.

  • iOS (à partir de la version 6) : Support de Safari et Google Chrome
  • Android (à partir de la version 4) : Support de “Android Browser” (navigateur natif) et Google Chrome

Nous ne supportons pas d’autres navigateurs mobiles ou systèmes d’exploitation.