Personnaliser le branding de votre Portail Client
Logo, favicon, couleurs, page de connexion, emails et application mobile : personnalisez le Portail Client CrocoClick à votre image.
Écrit par Baptiste Lorreyte
Dernière mise à jour Il y a environ 2 heures
Un client reçoit un email, clique sur un lien, arrive sur une page de connexion. C'est à cet instant précis que tout se joue : soit il reconnaît votre marque et se sent chez bvous, soit il tombe sur une interface générique et se demande où il a atterri. Le branding du Portail Client existe pour que ce doute n'arrive jamais.
Cet article passe en revue chaque réglage disponible : logo, favicon, couleurs de marque, visuel et texte de la page de connexion, emails de connexion, et ce qui se répercute automatiquement sur l'application mobile de vos clients.
Pourquoi soigner le branding de votre portail
Le Portail Client est l'espace unique où vos clients retrouvent leurs formations, leurs communautés, leurs factures, leurs contrats et leur tableau de bord d'affilié. C'est très souvent l'endroit où ils passent le plus de temps avec vous après l'achat. Autant qu'il vous ressemble.
La confiance : un espace à vos couleurs rassure au moment le plus sensible, celui de la saisie d'un mot de passe.
La cohérence : votre site, vos emails et votre portail racontent la même histoire visuelle, sans rupture.
Moins de support : un client qui reconnaît immédiatement l'endroit ne vous écrit pas pour demander s'il est au bon endroit.
La valeur perçue : un portail soigné donne le sentiment d'un accompagnement premium, avant même que le premier contenu ne soit ouvert.
💡 ASTUCE : Le branding donne son plein effet quand il est combiné à un domaine personnalisé. Un portail à vos couleurs sur une adresse en votre nom, et l'illusion est parfaite. Tout est expliqué dans Comment personnaliser l'URL de son portail client et utiliser son propre nom de domaine.
Accéder aux réglages de branding
Depuis le menu de gauche de votre compte, ouvrez Abonnements (Memberships) ou Sites. Les deux chemins mènent au même endroit.
Cliquez sur Portail Client, puis sur Paramètres.
Ouvrez l'onglet Branding.
🟢 Important : Le branding se règle compte par compte. Si vous gérez plusieurs comptes, chacun a son propre portail et son propre habillage, sans aucun risque de mélange entre vos clients.
Les réglages disponibles, en un tableau
Chaque champ porte une petite icône d'information qui vous indique exactement où l'élément apparaîtra dans le portail. Voici la vue d'ensemble.
Une fois vos réglages en place, cliquez sur Enregistrer. Rien n'est appliqué avant cette validation, et le bouton Annuler vous permet de revenir en arrière tant que vous n'avez pas sauvegardé.
Logo, favicon et image du portail : les trois visuels à préparer
Ce sont les trois réglages qui produisent le plus d'effet, et ceux où une image mal dimensionnée se voit immédiatement. Préparez-les avant d'ouvrir l'écran de branding, vous gagnerez du temps.
Le logo
Votre logo suit le client partout : page de connexion, puis en-tête de chaque page du portail. Chargez-le en carré, ratio 1:1, dans une taille qui ne dépasse pas 200x200 pixels. Un fond transparent en PNG ou un SVG donne toujours le meilleur rendu, parce que le logo se posera proprement quelle que soit la couleur derrière.
⚠️ Remarque : Un logo horizontal très allongé sera écrasé ou rogné dans un cadre carré. Si votre logo principal est en format bandeau, préparez une variante carrée, par exemple votre monogramme ou votre symbole seul.
La favicon
C'est le détail que personne ne remarque quand il est là, et que tout le monde remarque quand il manque. Un onglet sans favicon affiche une icône grise par défaut, ce qui casse instantanément l'impression de marque. Ratio 1:1, SVG, PNG ou JPG, et 16x16 pixels maximum.
L'image du portail
C'est le grand visuel qui occupe la partie droite de l'écran de connexion et d'inscription. En pratique, c'est ce qui joue le rôle de fond de votre page de connexion. Ratio 8:9, donc un format portrait, jusqu'à 1920x2160 pixels.
Trois usages qui fonctionnent bien :
Une photo de vous, de votre équipe ou de vos coulisses. C'est l'option la plus humaine, et celle qui rend le portail immédiatement reconnaissable.
Un visuel de marque reprenant vos motifs, votre typographie ou une illustration maison.
Un fond de couleur unie, si vous préférez la sobriété. Il suffit de charger une image aux dimensions demandées, remplie de votre couleur de marque. Vous obtenez alors une page de connexion en deux blocs de couleur, très épurée.
💡 ASTUCE : Si vous avez déjà défini votre Charte Graphique dans CrocoClick, vos codes couleur et vos visuels y sont centralisés : reprenez-les tels quels pour garantir la cohérence entre votre portail, vos pages et vos emails. Voir Créer une Charte Graphique (Brand Board) dans CrocoClick.
Les couleurs de marque : où elles agissent vraiment
Les deux couleurs de marque ne se contentent pas de décorer la page de connexion. Elles se propagent dans tout le portail.
La couleur 1 pilote les éléments d'action et d'attention : boutons, liens, titres, badges, barres de progression de vos formations.
La couleur 2 sert de couleur d'appui pour les états secondaires, les survols et les zones de contraste.
Renseignez-les au code hexadécimal si vous voulez être exact au pixel près, ou passez par le sélecteur de couleur pour tâtonner. Un conseil : vérifiez que votre couleur 1 offre un contraste suffisant avec du texte blanc, puisque c'est majoritairement elle qui portera vos boutons.
🟢 Important : Les couleurs du Portail Client et le thème visuel d'une formation sont deux réglages distincts. Le branding du portail habille l'enveloppe (connexion, navigation, tableau de bord) tandis que le Personnalisateur de Thème habille l'intérieur de chaque formation. Pour un résultat impeccable, alignez les deux sur la même palette.
Titre et texte d'accueil : les deux phrases qui accueillent vos clients
Le Nom du portail et la Description du portail sont deux champs de texte, mais ce sont eux qui donnent le ton. Ils s'affichent en grand sur la page de connexion, à côté de votre logo.
Quelques formulations qui fonctionnent, selon votre activité :
Évitez la formulation générique du type "Portail Client". Elle est correcte, mais elle ne dit rien, et c'est justement ce que vous cherchez à éviter.
💡 ASTUCE : Si vous préférez une page de connexion totalement minimaliste, sans titre ni description ni logo, l'onglet Avancé permet de les masquer en CSS. Le code exact se trouve dans la FAQ en bas de cet article.
Personnaliser les emails envoyés par le portail
Un portail parfaitement brandé qui envoie des emails au design générique, c'est la fissure dans le décor. Les notifications de connexion, d'invitation et d'accès sont modifiables, et cela se passe dans un onglet voisin.
Rendez-vous dans Abonnements (ou Sites) puis Portail Client, Paramètres et enfin Paramètres email.
Repérez les grandes familles de notifications : Portail Client, Communautés, Certificats et Formations.
Sous chaque famille, chaque notification dispose d'une icône en forme d'œil pour prévisualiser le modèle actuel.
Cliquez sur le bouton Modèle par défaut pour créer une copie modifiable du modèle système. Vous pouvez aussi ouvrir la liste Sélectionner un modèle pour réutiliser un modèle d'email que vous avez déjà créé.
Cliquez sur Modifier, lisez l'avertissement affiché, puis validez avec Continuer.
L'éditeur d'email s'ouvre. Ajustez le logo, les couleurs, le texte et ajoutez les champs personnalisés dont vous avez besoin, puis enregistrez.
Le modèle enregistré est automatiquement sélectionné pour cette notification. Cliquez sur Enregistrer pour confirmer.
🟢 Important : Dès qu'un modèle personnalisé est enregistré, il devient actif immédiatement pour cette notification. Envoyez-vous un test avant de laisser partir la prochaine vague d'invitations.
Pour aller plus loin sur les emails que reçoivent vos membres au moment où ils accèdent à une offre, une formation ou une communauté, consultez Comment personnaliser les e-mails de bienvenues et de connexion. Et pour les notifications spécifiques aux espaces communautaires, voir Comment gérer et personnaliser les notifications emails des Communautés CrocoClick.
L'onglet Avancé : CSS, JavaScript et code de suivi
Si les champs standards ne suffisent pas, l'onglet Avancé vous laisse injecter du code dans votre portail :
CSS personnalisé pour ajuster finement des éléments que l'interface n'expose pas, comme masquer un bloc ou changer une typographie.
JavaScript personnalisé pour ajouter un comportement spécifique.
Code d'en-tête et de pied de page pour vos scripts de suivi et vos outils d'analyse.
⚠️ Remarque : Le code que vous ajoutez ici s'exécute sur l'ensemble de votre portail, y compris la page de connexion. Une erreur peut rendre le portail inutilisable pour vos clients. Testez toujours dans une fenêtre de navigation privée juste après l'enregistrement, et gardez une copie du code qui fonctionnait avant votre modification.
Ce qui change dans l'application mobile
Vos clients n'accèdent pas toujours au portail depuis un navigateur. Beaucoup passent par l'application mobile pour suivre leurs formations et participer aux communautés, souvent depuis les transports ou entre deux rendez-vous.
Bonne nouvelle : les réglages que vous venez de faire les suivent. Le logo, le nom du portail et vos couleurs de marque sont reprises dans l'application, si bien que l'expérience reste continue entre le web et le mobile. Vous n'avez rien à reconfigurer.
⚠️ Remarque : L'habillage intérieur de l'application est une chose, l'icône et le nom affichés sur les magasins d'applications en sont une autre. Ces derniers relèvent d'une application mobile en marque blanche, qui fait l'objet d'une démarche distincte. Voir Application mobile brandée (marque blanche) et Les 2 Applications Mobiles CrocoClick pour savoir quelle application vos clients utilisent.
La checklist avant de considérer le travail terminé
Passez cette liste en revue, puis ouvrez votre portail dans une fenêtre de navigation privée et regardez-le avec les yeux d'un client qui arrive pour la première fois.
Le logo s'affiche net, sans déformation ni fond blanc parasite.
La favicon apparaît bien dans l'onglet du navigateur.
L'image du portail n'est pas rognée sur les parties importantes du visuel.
Les boutons sont lisibles : le texte contraste suffisamment avec votre couleur 1.
Le nom et la description du portail disent clairement où le client se trouve.
L'email de support est une adresse que vous relevez réellement.
La mention de copyright affiche la bonne année et la bonne raison sociale.
Le portail répond sur votre domaine personnalisé, pas sur l'adresse par défaut.
La langue du portail est bien réglée sur le français, dans l'onglet dédié aux paramètres de langue.
Au moins un email de notification a été testé de bout en bout.
💡 ASTUCE : Le réglage de la langue par défaut du portail se fait dans les paramètres du Portail Client, section Langue. La procédure complète est détaillée dans Comment mettre son Portail Client en Français.
Questions fréquentes
Pour résumer
Le branding du Portail Client se joue sur trois plans : les visuels (logo, favicon, image de la page de connexion), les couleurs et les textes d'accueil, et enfin les emails que le portail envoie. Traitez les trois, posez un domaine personnalisé par-dessus, et votre client n'aura jamais l'impression d'être ailleurs que chez vous.