Personnalisation du parcours
Personnalisation du parcours vous permet d'appliquer l'identité visuelle de votre marque au parcours de vérification d'identité Unico — sans ticket de support, sans dépendance envers l'équipe de support, et avec un résultat visible immédiatement.
Vous définissez le logo, la couleur d'arrière-plan, les couleurs et la forme des boutons, et la couleur du contenu. Une fois publiée, la configuration prend effet immédiatement pour les prochains parcours démarrés sur votre branche.
À qui cela s'adresse : aux clients utilisant le Parcours Web (CbU) avec les modèles d'intégration iFrame, Redirect ou SDK.
Ce qui change pour l'utilisateur final : l'écran qu'il voit pendant la vérification d'identité ressemble désormais à votre marque.
Où le trouver : Portail IDCloud → barre latérale Paramètres → onglet Personnalisation.
Avant de commencer
Permission d'accès
Votre utilisateur a besoin d'accéder à la zone Paramètres du Portail IDCloud. Si l'icône d'engrenage n'apparaît pas dans la barre latérale, demandez à l'administrateur de votre compte de vous accorder l'accès.
Comment la configuration est appliquée
| Portée | La personnalisation s'applique par branche et par modèle d'intégration. iFrame et Redirect/SDK ont des configurations indépendantes — publier l'une n'affecte pas l'autre. |
| Quand cela prend effet | Immédiatement après la publication, pour les parcours démarrés à partir de ce moment. Les parcours déjà en cours conservent l'apparence précédente. |
| Si vous ne personnalisez pas | Le parcours charge le thème Unico par défaut. |
| Version du parcours | L'aperçu est basé sur le design du Parcours Web v3.0. Sur d'autres versions, l'aperçu peut ne pas refléter fidèlement le résultat — dans ce cas, contactez Unico pour envisager une mise à jour de votre version. |
Ce qu'il faut avoir sous la main
- Logo au format PNG, idéalement avec un arrière-plan transparent, jusqu'à 60 px de hauteur et 100 Ko.
- Les codes hexadécimaux des couleurs de votre marque (par ex.
#1B3FA0).
Ce qui est configurable dans votre intégration
Outre le modèle d'intégration, ce qui apparaît à l'écran dépend de la version CbU de votre intégration. C'est la cause la plus fréquente du « je ne vois pas ce champ » :
| Fonctionnalité | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 redirect | 2.0 redirect | 3.0 redirect |
|---|---|---|---|---|---|---|
| Logo | ✅ | n'existe pas | n'existe pas | ✅ | ✅ | ✅ |
| Couleur d'arrière-plan | — | — | — | — | — | ✅ |
| Couleur d'arrière-plan du bouton | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Couleur du texte du bouton | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Rayon de bordure du bouton | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Couleur du contenu | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
En résumé : la couleur d'arrière-plan n'est configurable que sur CbU 3.0 en redirect, et en iFrame le logo n'existe que sur CbU 1.0. Les couleurs et la forme des boutons fonctionnent sur toutes les combinaisons.
Si vous ne savez pas sur quelle version vous êtes, vérifiez avec votre contact Onboarding ou le support Unico.
Étape par étape
Étape 1 — Ouvrir l'onglet Personnalisation
Dans le Portail IDCloud, cliquez sur l'icône d'engrenage (Paramètres) dans la barre latérale. L'écran s'ouvre directement sur l'onglet Personnalisation.
L'écran Paramètres comporte trois onglets — Personnalisation, Webhook et QR Code. Ce guide couvre le premier.
Écran Paramètres avec l'onglet Personnalisation sélectionné.
Étape 2 — Choisir le modèle d'intégration
Dans la colonne de gauche, sélectionnez iFrame ou Redirect ou SDK — les champs du formulaire changent selon le modèle.
Vous reconnaîtrez l'écran en trois zones : le sélecteur de modèle à gauche, le formulaire au centre et l'aperçu en direct à droite, qui réagit à chaque changement avant la publication.
Si vous utilisez les deux modèles, vous devez configurer les deux. Ce sont des configurations indépendantes — ajustez et publiez l'une, puis répétez pour l'autre.
Sélecteur iFrame / Redirect ou SDK, formulaire et aperçu.
Étape 3 — Charger le logo
Disponible en Redirect ou SDK. En iFrame, uniquement sur CbU 1.0.
Cliquez sur Ajouter un logo et sélectionnez le fichier. Exigences : format PNG, hauteur maximale 60 px, taille maximale 100 Ko.
Utilisez un PNG avec un arrière-plan transparent. Ainsi, le logo fonctionne sur n'importe quelle couleur d'arrière-plan — un PNG avec un arrière-plan blanc devient un rectangle visible une fois l'arrière-plan coloré. Préférez également la version horizontale du logo : l'espace disponible est large et court.
Champ « Ajouter un logo » avec les exigences de format, de hauteur et de taille.
Étape 4 — Définir les couleurs
Il y a quatre champs de couleur, regroupés dans le formulaire sous Arrière-plan, Boutons et Contenu :
| Champ | Où cela apparaît dans le parcours | Par défaut | Disponibilité |
|---|---|---|---|
| Couleur d'arrière-plan | Arrière-plan de l'écran du parcours | #F2F2F7 | CbU 3.0 en redirect uniquement |
| Boutons → Couleur d'arrière-plan | Remplissage du bouton d'action (par ex. « Prendre un selfie ») | — | Toutes les versions |
| Boutons → Couleur du texte | Texte à l'intérieur du bouton | — | Toutes les versions |
| Couleur du contenu | Titres et descriptions (par ex. « Vérification d'identité ») | #000000 | Toutes les versions |
Pour chacun d'eux, vous pouvez saisir la valeur hexadécimale (par ex. #1B3FA0) ou cliquer
sur la pastille de couleur à gauche du champ pour ouvrir le sélecteur visuel. Dans les champs
d'arrière-plan et de contenu, tant que vous les laissez vides, le parcours utilise la valeur par
défaut affichée en texte d'exemple dans le champ lui-même.
La couleur d'arrière-plan est appliquée en dégradé, pas en couleur unie. La teinte que vous définissez est le haut du dégradé, et le parcours s'assombrit progressivement vers le bas de l'écran. Les teintes très sombres produisent une base presque noire — choisissez une teinte moyenne à claire si vous voulez un résultat uniforme.
Utilisez la couleur principale de votre marque pour l'arrière-plan du bouton. C'est l'élément que l'utilisateur doit trouver en premier ; s'il ne se démarque pas, le parcours perd en conversion.
Choisissez les quatre couleurs comme un ensemble, pas une à la fois. Elles s'influencent mutuellement : un arrière-plan sombre avec une couleur de contenu noire rend le parcours illisible, et un bouton clair sur une carte blanche peut simplement disparaître. Définissez les quatre, puis seulement vérifiez le résultat dans l'aperçu (Étape 6).
Champs Couleur d'arrière-plan, Couleur d'arrière-plan/Texte du bouton et Couleur du contenu, avec le résultat dans l'aperçu.
Étape 5 — Configurer les boutons
Trois champs contrôlent le bouton d'action du parcours (par ex. « Prendre un selfie ») :
| Champ | Ce qu'il fait |
|---|---|
| Couleur d'arrière-plan | Couleur de remplissage du bouton |
| Couleur du texte | Couleur du texte à l'intérieur du bouton |
| Rayon de bordure | Arrondi des coins, en pixels |
Valeurs de référence pour le rayon de bordure :
- 0 → bouton rectangulaire, coins nets
- 8 à 16 → coins légèrement arrondis
- 24 ou plus → forme de pilule (entièrement arrondie)
Des valeurs supérieures à la moitié de la hauteur du bouton ne changent plus le résultat — la forme de pilule est la limite.
Utilisez la couleur principale de votre marque pour l'arrière-plan du bouton. C'est l'élément que l'utilisateur doit trouver en premier — s'il ne se démarque pas, le parcours perd en conversion. Et gardez le rayon de bordure cohérent avec le reste de votre produit, afin que le parcours donne l'impression d'être une continuation de votre application plutôt qu'un site tiers.
Couleur d'arrière-plan, Couleur du texte et Rayon de bordure, avec le bouton reflété dans l'aperçu.
Étape 6 — Vérifier l'aperçu, sur mobile et sur ordinateur
L'aperçu à droite se met à jour à chaque changement. Utilisez le sélecteur Mobile / Bureau en haut pour vérifier les deux formats.
Si vous saisissez une valeur de couleur invalide — un nom de couleur, un code hexadécimal incomplet — le champ obtient une bordure rouge et la valeur n'est pas appliquée à l'aperçu. Corrigez-la avant de continuer.
Validez toujours en mode Mobile. La plupart des utilisateurs finaux effectuent la vérification depuis leur téléphone ; c'est le format le plus important. Et vérifiez trois contrastes : le texte du bouton par rapport à l'arrière-plan du bouton, le bouton par rapport à la carte du parcours, et la couleur du contenu par rapport à la couleur d'arrière-plan. Il est fréquent de configurer un bouton blanc sur une carte blanche et de le voir simplement disparaître — l'aperçu existe pour révéler cela avant la publication.
Sélecteur Mobile / Bureau et un champ de couleur avec une valeur invalide mise en évidence.
Étape 7 — Publier
Le bouton Publier devient actif dès qu'il y a un changement en attente.
- Publier enregistre la configuration et l'applique au parcours.
- Annuler annule tout ce que vous avez modifié et rétablit les champs au dernier état publié.
- Pour revenir à la valeur par défaut d'Unico, videz les champs de couleur (en laissant le texte d'exemple réapparaître), supprimez le logo, puis publiez.
Il n'y a pas d'historique des versions. Si vous publiez une configuration incorrecte, la solution consiste à ajuster les valeurs et à publier à nouveau — il n'y a pas de moyen en un clic de restaurer la version précédente. C'est pourquoi vérifier l'aperçu à l'étape précédente est important. Tant que vous n'avez pas encore publié, Annuler résout le problème.
Étape 8 — Enregistrer les domaines autorisés
Disponible uniquement dans le modèle iFrame.
En iFrame, le parcours s'exécute intégré dans votre propre page. Pour des raisons de sécurité, seuls les domaines enregistrés ici peuvent le charger.
-
Cliquez sur Configurer les domaines, en haut à droite.
-
Le panneau latéral liste les domaines enregistrés, chacun avec des actions modifier (crayon) et supprimer (corbeille).
-
Pour en ajouter un, cliquez sur Créer un domaine, saisissez le domaine et cliquez sur Enregistrer.
Saisissez le domaine avec son protocole (https://votresite.com).
Cette liste est un paramètre de sécurité, et elle est enregistrée séparément. Elle est appliquée par l'Enregistrer propre du panneau, et non par le Publier de l'écran principal. Enregistrez également vos domaines de test et de staging, et supprimez ceux qui ne sont plus utilisés — c'est la liste de ceux qui peuvent intégrer votre parcours.
FAQ
Les changements s'appliquent-ils aux parcours déjà en cours ? Non. La configuration publiée s'applique aux parcours démarrés après la publication.
Pourquoi ne vois-je pas les champs Logo et Arrière-plan ? Deux causes possibles. D'abord : vous avez peut-être sélectionné iFrame — en iFrame, le parcours est intégré dans votre propre page, qui fournit déjà l'arrière-plan et l'identité. Ensuite : votre version CbU n'expose peut- être pas le champ. La couleur d'arrière-plan n'existe que sur CbU 3.0 en redirect, et le logo en iFrame seulement sur CbU 1.0. Vérifiez le tableau dans « Avant de commencer ».
Mon logo a été rejeté lors du chargement. Pourquoi ? Vérifiez les trois exigences : format PNG, hauteur jusqu'à 60 px, et taille jusqu'à 100 Ko.
L'arrière-plan semble trop sombre en bas de l'écran. C'est normal — l'arrière-plan s'affiche en dégradé qui s'assombrit de haut en bas. Choisissez une teinte de base plus claire.
L'aperçu ne correspond pas à mon parcours réel. L'aperçu est basé sur le design du Parcours Web v3.0. Si votre intégration est sur une autre version, le résultat peut différer — contactez Unico pour évaluer une mise à jour de version.
J'ai publié une mauvaise configuration. Comment revenir en arrière ? Rouvrez l'écran, ajustez les valeurs (ou videz-les pour revenir à la valeur par défaut), puis publiez à nouveau. Il n'y a pas d'historique des versions. Si vous n'avez pas encore publié, cliquez simplement sur Annuler.
Qui a modifié la personnalisation sur mon compte ? L'écran n'affiche pas cet historique. Pour savoir quel utilisateur a effectué la dernière modification et quand, contactez le support Unico.
Référence rapide
Portail IDCloud
└─ Paramètres (icône d'engrenage dans la barre latérale)
└─ Onglet Personnalisation
├─ iFrame ............... Boutons (arrière-plan, couleur du texte, rayon de bordure)
│ Contenu (couleur du contenu)
│ + Configurer les domaines
└─ Redirect ou SDK ...... Logo (PNG, 60 px, 100 Ko)
Arrière-plan (couleur, appliquée en dégradé)
Boutons (arrière-plan, couleur du texte, rayon de bordure)
Contenu (couleur du contenu)
Aperçu en direct · Mobile / Bureau · Annuler · Publier