---
title: Personnalisation du parcours
description: Configurez l'identité visuelle du parcours — logo, couleurs, arrière-plan et forme des boutons — directement dans le Portail IDCloud, avec un aperçu en temps réel.
canonical: https://developer.unico.io/fr/dual-api/product-guide/portal-idcloud/settings/journey-customization
locale: fr
generated_by: markdown-export
---

**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.

:::info
**À qui cela s'adresse :** aux clients utilisant le Web Journey 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 **Web Journey 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 du Web Journey**
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 Web Journey v3.0 en
redirect**, et en iFrame le logo n'existe que sur Web Journey v1.0. Les couleurs et la forme des
boutons fonctionnent sur toutes les combinaisons.

:::info
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'icône d'engrenage mise en évidence dans la barre latérale](/img/product-guide/journey-customization/en/01-settings-tab.png)

*É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.

![Écran complet de Personnalisation : sélecteur de modèle, formulaire et aperçu](/img/product-guide/journey-customization/en/02-integration-model.png)

*Sélecteur iFrame / Redirect ou SDK, formulaire et aperçu.*

### Étape 3 — Charger le logo

:::warning
Disponible en **Redirect ou SDK**. En iFrame, uniquement sur Web Journey v1.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](/img/product-guide/journey-customization/en/03-customization-form.png)

*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` | **Web Journey v3.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 de couleur d'arrière-plan, de couleurs des boutons et de couleur du contenu, avec le résultat dans l'aperçu](/img/product-guide/journey-customization/en/04-colors.png)

*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.

![Champ de rayon de bordure, avec le bouton reflété dans l'aperçu](/img/product-guide/journey-customization/en/05-button-border-radius.png)

*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 dans le panneau d'aperçu](/img/product-guide/journey-customization/en/06-live-preview.png)

*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

:::warning
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.

1. Cliquez sur **Configurer les domaines**, en haut à droite.

   ![Bouton Configurer les domaines, mis en évidence](/img/product-guide/journey-customization/en/07-configure-domains-button.png)

2. Le panneau latéral liste les **domaines enregistrés**, chacun avec des actions **modifier**
   (crayon) et **supprimer** (corbeille).

   ![Panneau Configurer les domaines avec la liste des domaines enregistrés](/img/product-guide/journey-customization/en/08-domains-list.png)

3. Pour en ajouter un, cliquez sur **Créer un domaine**, saisissez le domaine et cliquez sur
   **Enregistrer**.

   ![Formulaire de création de domaine](/img/product-guide/journey-customization/en/09-create-domain.png)

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 du Web Journey**
n'expose peut-être pas le champ. La couleur d'arrière-plan n'existe que sur Web Journey v3.0 en
redirect, et le logo en iFrame seulement sur Web Journey v1.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

```text
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
```