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 en 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 systeme de Design de l'État. Celui-ci intègre directement un bouton FranceConnect+. Vous pouvez consulter directement dans la documentation du composant Bouton FranceConnect.
Intégration hors du systeme 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 pour la connexion des usagers.
Téléchargements :
Règles d'intégration du bouton FranceConnect+ #
Les règles suivantes doivent être respectées. Vous pouvez également les retrouver dans les Guideline FranceConnect+
Couleurs, Design du bouton #
Le bouton FranceConnect+ est déclinable pour un affichage sur fond clair ou sombre. Veillez à utiliser celle adaptée au contraste.
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 245 px 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 renforcer la sécurité de vos services en ligne les plus sensibles.
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/france-connect-plus. 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 vous êtres 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.
