💠 Hub de Tarification

Pricelist Hub est le centre de contrôle esthétique et fonctionnel du chatbot AI intégré dans l’écosystème Pricelist. À travers ce panneau, l’administrateur peut personnaliser :
• couleurs, textes et messages ;
• boutons et barre d’outils ;
• comportement visuel de la fenêtre de chat et des modes vocaux.

🧩 SECTIONS DU PANNEAU

1️⃣ GÉNÉRAL
Gère les dimensions et le positionnement du chatbot.
• Largeur desktop / Hauteur desktop → dimensions du chatbot en version desktop. Ex. 600px – 400px
• Largeur tablette / Hauteur tablette → dimensions du chatbot en version tablette. Ex. 100% – 100%
• Position du chatbot → position du chatbot sur la page.

2️⃣ BOUTON CHATBOT
Gère les dimensions, la couleur, l’image et l’arrondi du bouton d’ouverture du chatbot.
• Largeur / Hauteur → dimensions du bouton pour ouvrir le chatbot. Ex. 60px – 60px
• Couleur de fond → couleur de fond du bouton
• URL de l’image → URL de l’image à utiliser comme fond du bouton
• Couleur du bord → couleur du bord du bouton
• Épaisseur du bord → épaisseur du bord du bouton
• Arrondi des angles → arrondi à appliquer au bord du bouton. Ex. 10px

3️⃣ En-tête
Contrôlez la partie supérieure de la fenêtre du chatbot (barre de titre et bouton de fermeture).
Champs configurables :
• Couleur de fond de l‘en-tête → couleur principale de la barre supérieure.
• Couleur du texte de l’en-tête → couleur du titre.
• Texte de l’en-tête → texte affiché dans le titre (ex. “Devcore AI”).
• Couleur de fond de la connexion / texte de connexion → palette de l’écran d’authentification utilisateur.
• Couleur du bouton de fermeture → couleur de l’icône “X”.

4️⃣ Barre d’outils Hub
Gère les boutons rapides dans la barre supérieure du chatbot, hub d’accès aux modules secondaires.
Boutons configurables :
• Fond de la barre d’outils → couleur de fond globale de la barre.
• 📖 Bouton Pricelist → ouvre la liste de prix en ligne.
• 📝 Bouton Prev → ouvre la section Devis.
• 👁️ Bouton Vision → active le mode Vision pour la génération d’images (Leonardo AI).
• 📦 Bouton DeepSpace → accède au configurateur 3D paramétrique.
Chaque bouton peut avoir une couleur personnalisée pour distinguer les fonctions.

5️⃣ Fenêtre de chat
Gère les messages et les couleurs de la zone de conversation.
Champs configurables :
• Message de bienvenue → texte initial affiché à l’utilisateur.
• Fond de la réponse AI → couleur de fond des messages du bot.
• Fond du message utilisateur → couleur des messages envoyés par l’utilisateur.
• Couleur du texte AI / Couleur du texte utilisateur → couleur des textes dans le chat.

6️⃣ Entrée du Pied de Page
Configurez la barre inférieure pour l’envoi des messages.
Champs configurables :
• Couleur texte entrée → couleur du texte saisi.
• Couleur fond entrée → couleur du champ de saisie.
• Bouton envoi → couleur du bouton “Envoyer”.
• Bouton micro → couleur du bouton d’activation du mode vocal.

7️⃣ Mode Voix (Superposition)
Contrôlez l’apparence du mode vocal pendant l’écoute et la réponse.
Champs configurables :
• Diamètre cercle → taille du cercle vocal (px).
• Couleur cercle en écoute / en réponse → couleurs animées pendant l’enregistrement et la réponse.
• Couleur texte transcrit → couleur du texte dicté affiché en temps réel.
• Couleur instructions mobile → couleur du message guide.
• Texte instruction mobile → message personnalisé (ex. “Touchez le cercle pour parler”).