Intégration du bouton FranceConnect
Comment intégrer le bouton FranceConnect à mon service ? #
En fonction du type de service, il existe deux intégrations possibles du bouton FranceConnect :
- intégration se basant sur le Système de Design de l'État;
- intégration ne se basant pas sur le Système de Design de l'État.
Intégration du Système de Design de l'État #
Votre service doit utiliser le Système de Design de l'État. Celui-ci intègre directement un bouton FranceConnect. Vous pouvez consulter la documentation du composant Bouton FranceConnect pour plus d'informations.
Intégration hors du Système de Design de l'Etat #
Les boutons d’action FranceConnect sont primordiaux dans l’usage du service. Il est obligatoire d’utiliser l’un des boutons proposés et aucun autre visuel ne sera accepté pour la connexion des usagers.
Téléchargements :
Règles d'intégration du bouton FranceConnect #
Les règles suivantes doivent être respectées.
Couleurs et design du bouton #
Le bouton FranceConnect est déclinable pour un affichage sur fond clair ou sombre. Veillez à utiliser celle adaptée au contraste de votre site.
Le design, les couleurs et le label du bouton FranceConnect ne peuvent pas être modifiés. L'état au survol doit être implémenté.
Dimensions #
La taille recommandée pour une utilisation optimale est de 56 pixels de haut par 209 pixels de large. Le bouton peut être plus grand, mais l'homothétie doit être respectée.
Textes d'accompagnement #
Au dessus du bouton FranceConnect, il vous sera demandé d'ajouter systématiquement la phrase explicative FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion à vos services en ligne.
Sous le bouton FranceConnect, il vous sera demandé d'ajouter systématiquement un lien avec le texte "Qu'est-ce que FranceConnect" qui pointera vers le site https://franceconnect.gouv.fr/. La phrase doit avoir la couleur et le comportement d'un lien et doit être positionnée sous le bouton FranceConnect avec un écart de 12 pixels.
Positionnement du bouton FranceConnect par rapport aux autres modes d'authentification #
Le bouton FranceConnect doit être distinct de vos moyens de connexion natifs et en première position si le fournisseur de service est un service public. Il est important de dissocier visuellement les différents moyens d’authentification :
- une séparation visible doit être mise en place entre eux ;
- la mention "OU" doit également y figurer afin de faire comprendre à l'utilisateur qu'il peut choisir entre FranceConnect ou un autre mode de connexion/d'inscription.
Intégration dans votre service #
Le bouton FranceConnect doit être présent dans la section de votre service permettant aux utilisateurs de s'y connecter.
Si votre service propose à vos utilisateurs de s'inscrire, le bouton FranceConnect doit être proposé également sur la page d'inscription.
À ne pas faire #
Lors de l'intégration du bouton FranceConnect, il n'est pas autorisé de :
- déformer le bouton;
- changer sa couleur;
- modifier son label.
