Identité visuelle

Utilisez la section Identité visuelle pour personnaliser l'apparence de votre plateforme Beekeeper afin qu'elle corresponde à l'image de marque de votre entreprise. Cela inclut la mise à jour de votre logo, de votre favicon et de vos couleurs sur le web et le mobile.

Comment accéder à l'Identité visuelle

Les administrateurs généraux peuvent accéder à la section Identité visuelle de deux manières différentes

1. Sur l'écran d'accueil sur le web, cliquez sur l'icône d'engrenage (⚙️) dans le coin supérieur droit et sélectionnez « Ajuster les couleurs »

2. Dans le tableau de bord, cliquez sur l'icône du tableau de bord (indicateur de vitesse) dans la barre de navigation supérieure et allez dans Paramètres > Identité visuelle.

Comment personnaliser votre plateforme ?

Logo

Téléchargez votre logo pour qu'il apparaisse dans la barre de navigation supérieure sur le web et les mobiles.

• Types de fichiers supportés: .jpeg, .png
• Taille maximale: 110KB
• Hauteur recommandée: Minimum 100px

📌 Utilisez l'Aperçu à droite pour vérifier l'aspect de votre logo. Si nécessaire, ajustez la couleur de la barre de navigation, qui sert d'arrière-plan au fichier du logo.

Favicon

Les favicons sont affichés dans les onglets et les signets du navigateur.

• Types de fichier: .ico
• Taille maximale: 10KB
• Dimensions recommandées: 16 × 16 pixels
• Utilisez un générateur de favicon comme favicon.cc pour créer le format correct à partir d'une image.

✅ Un aperçu est disponible afin que vous puissiez vérifier l'apparence de votre favicon avant de l'enregistrer.

Couleurs

Vous pouvez adapter la palette de couleurs de la plateforme à votre marque. Si vous ne disposez pas encore des codes hex de votre marque, contactez votre équipe marketing.

Ce que vous pouvez personnaliser :

• Couleur d'accentuation – utilisé pour les boutons, les liens, les icônes et autres éléments interactifs
• Couleur de la barre de navigation – affiché dans l'en-tête de l'application (sert également d'arrière-plan à votre logo)
• Couleur de la barre personnalisée – définit la couleur de la barre de marque située sous la barre de navigation supérieure
• Couleur de fond (ordinateur uniquement) – recommandé : #FAFAFAFA ; n'affecte pas l'affichage mobile
• Optionnel : Désactiver le dégradé pour les barres de navigation et de marque (par défaut, le dégradé est activé).

Suggestions et bonnes pratiques :

🔁 Utilisez la même couleur pour la barre de navigation supérieure et la barre de marque pour un aspect cohérent et propre.
✅ Utilisez l'aperçu intégré pour voir comment vos sélections de couleurs se présentent sur les écrans d'ordinateur et de téléphone portable.
⚠️ Veillez au contraste : La couleur de la barre de navigation supérieure sert d'arrière-plan à votre logo. Veillez à ce que le logo soit clairement visible sur cet arrière-plan
👁️ Le vérificateur de contraste vous informera si l'une des couleurs sélectionnées ne répond pas aux normes d'accessibilité ou de visibilité.

Sauvegarde des modifications

Une fois que vous avez terminé, cliquez sur Enregistrer en haut à droite. Actualisez votre application web pour voir les mises à jour appliquées.

Notes complémentaires

• Les options de style ne sont disponibles que pour les administrateurs généraux.

• Utilisez l'aperçu intégré pour tester la visibilité et la mise en page avant de finaliser.

• Internet Explorer n'est plus supporté

• Pour obtenir les meilleurs résultats, assurez-vous que tous les éléments visuels sont suffisamment contrastés et qu'ils s'affichent correctement à la fois sur les ordinateurs de bureau et sur les téléphones portables.
  
  

Voyez à quoi peut ressembler la plateforme avec les paramètres recommandés :

Vue mobile + vue web : Accueil

Vue mobile + vue web : flux

Vue mobile + vue web : chats