Paramètres d'apparence pour une alliance (en marque blanche)

Guide de personnalisation de l'apparence

Grâce à la fonctionnalité Whitelabel de PAY., vous pouvez adapter entièrement l'environnement à l'identité visuelle de votre organisation. Les merchants et les utilisateurs reconnaîtront ainsi immédiatement votre marque au sein de l'environnement PAY., dans les communications et dans la documentation.

Ce guide décrit l'ensemble des paramètres disponibles, les dimensions recommandées ainsi que l'utilisation des différentes options de couleurs et de branding.

Où trouver ces paramètres ?

Navigation

Connectez-vous à votre compte PAY.
Accédez à Paramètres dans le menu principal.
Cliquez ensuite sur Whitelabel dans le sous-menu.

Depuis cette page, vous pouvez configurer les images, les couleurs, les polices de caractères et les paramètres des réseaux sociaux afin que l'environnement corresponde parfaitement à votre identité visuelle.

Remarque : la fonctionnalité Whitelabel est uniquement disponible pour les comptes pour lesquels cette fonctionnalité a été activée.

Informations générales

Les paramètres Whitelabel sont répartis en trois catégories :

Images et Branding
Couleurs
Réseaux sociaux et Pied de page

Une fois les modifications enregistrées, elles sont appliquées à l'ensemble de l'environnement Whitelabel.

Conseil : assurez-vous que les logos, les couleurs et les polices correspondent à la charte graphique officielle de votre organisation.

1. Images et Branding Image (Logo)

Objectif

Ce logo est utilisé dans les communications destinées à des tiers.

Spécifications

Type de fichier : JPG ou PNG
Dimensions recommandées : 140 × 140 px
Recommandation : utilisez uniquement l'icône du logo sans texte supplémentaire

Utilisation

Ce logo est affiché dans différentes communications telles que les e-mails et autres communications destinées aux clients.

Image d'en-tête de l'application

Objectif

Image d'en-tête utilisée dans l'application PAY.

Spécifications

Type de fichier : JPG ou PNG
Dimensions : 640 × 430 px

Utilisation

Idéale pour appliquer votre identité visuelle dans l'environnement de l'application mobile.

Document d'information

Objectif

Image d'arrière-plan pour les documents d'information.

Spécifications

Type de fichier recommandé : JPG
Format : A4 Portrait
Largeur : 2480 px
Hauteur : 3508 px
Taille maximale du fichier : 500 KB

Utilisation

Utilisée comme arrière-plan pour les documents d'information générés par la plateforme.

Document de données

Objectif

Image d'arrière-plan pour les exportations, rapports et fichiers de données.

Spécifications

Type de fichier recommandé : JPG
Format : A4 Paysage
Largeur : 3508 px
Hauteur : 2480 px
Taille maximale du fichier : 500 KB

Utilisation

Utilisée comme arrière-plan pour les rapports, exportations et fichiers de données.

Grand logo administrateur

Objectif

Grand logo affiché dans le coin supérieur gauche de l'environnement d'administration.

Spécifications

Type de fichier : PNG
Hauteur maximale : 48 px
Largeur maximale : 164 px
Taille maximale du fichier : 10 KB

Recommandation

Utilisez :

Du texte blanc sur fond transparent
Ou un logo avec un fond ou un contour blanc

Ce logo est affiché lorsqu'il y a suffisamment d'espace disponible.

Petit logo administrateur

Objectif

Logo compact destiné aux écrans plus petits ou aux situations où l'espace est insuffisant pour afficher le grand logo.

Spécifications

Type de fichier : PNG
Hauteur maximale : 24 px
Largeur maximale : 125 px
Taille maximale du fichier : 10 KB

Recommandation

Utilisez :

Du texte blanc sur fond transparent
Ou un logo avec un fond ou un contour blanc

Logo du pied de page des e-mails

Objectif

Logo affiché dans le pied de page des e-mails.

Spécifications

Utilisez de préférence un fichier PNG transparent.
Assurez une bonne lisibilité sur les arrière-plans clairs et foncés.

Utilisation

Affiché dans les e-mails envoyés depuis l'environnement PAY.

Favicon

Objectif

Icône affichée dans les onglets du navigateur.

Formats pris en charge

Recommandation

Utilisez un logo carré.
Taille recommandée : 32 × 32 ou 64 × 64 pixels.
Gardez un design simple afin qu'il reste reconnaissable même à petite taille.

Webfont Regular

Objectif

Remplace les polices par défaut utilisées pour les titres H1, H2 et H3 dans my.pay.nl.

Spécifications

Type de fichier : WOFF2
Seules les polices utilisant le jeu de caractères latin sont prises en charge.

Utilisation

Utilisez la police principale de votre identité visuelle.

Webfont Bold

Objectif

Version en gras de la police utilisée pour les titres.

Spécifications

Type de fichier : WOFF2
Seules les polices utilisant le jeu de caractères latin sont prises en charge.

Utilisation

Utilisez la version en gras de votre police d'entreprise.

2. Couleurs

Tous les champs de couleur attendent un code couleur hexadécimal sans le symbole #.

Exemple :

003972

Résultat :

#003972

Couleur primaire

Utilisée pour :

Les boutons
Les éléments de menu sélectionnés
Divers accents visuels
Les éléments interactifs

"Il s'agit de la couleur principale utilisée dans PAY., par exemple pour les boutons, l'affichage des éléments de menu sélectionnés et lors du survol des éléments de menu."

Couleur primaire 2

Couleur utilisée pour le menu principal dans PAY.

Couleur d'accentuation

Utilisée pour mettre en évidence certains éléments visuels de l'interface.

Menu de navigation secondaire

Couleur d'arrière-plan du menu de navigation secondaire.

Couleur de survol

Utilisée lorsque les utilisateurs :

Survolent des boutons
Survolent des lignes de tableau
Survolent des éléments interactifs

Couleur secondaire

Couleur supplémentaire utilisée pour les éléments secondaires de l'interface.

Paramètres du menu principal Couleur de police du menu principal

Couleur du texte du menu principal.

Couleur du menu principal

Couleur d'arrière-plan du menu principal.

Couleur de police de l'élément actif du menu principal

Couleur du texte de l'élément sélectionné du menu principal.

Couleur de l'élément actif du menu principal

Couleur d'arrière-plan de l'élément sélectionné du menu principal.

Couleur de police au survol du menu principal

Couleur du texte lors du survol d'un élément du menu principal.

Couleur de survol du menu principal

Couleur d'arrière-plan lors du survol d'un élément du menu principal.

Paramètres du sous-menu Couleur de police du sous-menu

Couleur du texte des éléments du sous-menu.

Couleur du sous-menu

Couleur d'arrière-plan du sous-menu.

Couleur de l'élément actif du sous-menu

Couleur d'arrière-plan de l'élément actif du sous-menu.

Couleur de police de l'élément actif du sous-menu

Couleur du texte de l'élément actif du sous-menu.

Couleur de police au survol du sous-menu

Couleur du texte lors du survol d'un élément du sous-menu.

Couleur de survol du sous-menu

Couleur de la ligne indicatrice de 2 px affichée lors du survol d'un élément du sous-menu.

Icônes Overlay

Objectif

Couleur utilisée pour :

Les boutons de filtre
Les icônes overlay
Les boutons d'upsell

Valeur

Un filtre CSS doit être saisi à la place d'un code couleur hexadécimal.

Par exemple :

https://isotropic.co/tool/hex-color-to-css-filter/

CSS

invert(24%) sepia(94%) saturate(1317%) hue-rotate(189deg) brightness(93%) contrast(101%)

"Il s'agit de la couleur utilisée dans PAY. pour les boutons de filtre et les icônes des boutons d'upsell."

3. Paramètres des réseaux sociaux

Ces liens sont affichés dans le pied de page de l'environnement Whitelabel.

URL Facebook

Exemple : https://www.facebook.com/votreentreprise

URL LinkedIn

Exemple : https://www.linkedin.com/company/votreentreprise

URL YouTube

Exemple : https://www.youtube.com/@votreentreprise

URL Vimeo

Exemple : https://vimeo.com/votreentreprise

URL Instagram

Exemple : https://www.instagram.com/votreentreprise

Afficher le pied de page Afficher le pied de page

Lorsque cette option est activée, le pied de page Whitelabel est affiché.

Le pied de page peut contenir notamment :

Des liens vers les réseaux sociaux
Des informations de support
Des éléments de branding

Bonnes pratiques

✅ Utilisez des logos avec un arrière-plan transparent.
✅ Testez les combinaisons de couleurs pour garantir un contraste et une lisibilité suffisants.
✅ Utilisez les mêmes couleurs que celles de votre site web et de vos autres supports de communication.
✅ Gardez les favicons et les logos simples et facilement reconnaissables.
✅ Optimisez les images afin de garantir un chargement rapide des pages.
✅ Testez l'environnement aussi bien sur ordinateur que sur appareil mobile.
✅ Vérifiez toujours la lisibilité des menus, boutons et liens après avoir modifié les couleurs.

Configuration graphique recommandée

Arrière-plan du menu principal : couleur foncée de l'identité visuelle
Texte du menu principal : blanc
Couleur primaire : couleur d'accent de la marque
Couleur de survol : 10 % à 15 % plus claire que la couleur primaire
Favicon : icône du logo
Logo administrateur : version blanche du logo
Logo du pied de page des e-mails : PNG transparent

Grâce à ces paramètres, vous pouvez créer une expérience Whitelabel cohérente et professionnelle, parfaitement alignée sur l'identité visuelle de votre organisation et renforçant la reconnaissance de votre marque au sein de l'environnement PAY.