Apparence et Position

La page Apparence et Position vous permet de personnaliser l’apparence visuelle et l’emplacement du chatbot AAIA sur votre site WordPress.

🎨 Apparence Visuelle

Couleur Principale

La couleur principale définit la palette de couleurs de votre chatbot et de ses éléments d’interface.

Configuration

1. Champ Couleur : Cliquez sur le champ couleur pour ouvrir le sélecteur de couleurs WordPress
2. Code Hexadécimal : Vous pouvez aussi directement saisir un code couleur hexadécimal (ex : #f40bc9)
3. Aperçu en Temps Réel : La couleur est appliquée instantanément dans l’aperçu

Impact de la Couleur

Cette couleur principale influence :

• ✨ L’icône du chatbot flottant
• 💬 Les bulles de chat de l’assistant
• 🔘 Les boutons d’interface
• 🎯 Les éléments interactifs (liens, actions)
• 📱 L’en-tête de la fenêtre de chat

Bonnes Pratiques

• Contraste : Assurez-vous que la couleur offre un bon contraste avec l’arrière-plan de votre site
• Cohérence : Choisissez une couleur qui s’harmonise avec votre charte graphique
• Accessibilité : Évitez les couleurs trop claires qui pourraient nuire à la lisibilité

📍 Position du Chatbot

Cette section vous permet de contrôler précisément où le chatbot apparaît sur votre site.

Options de Position

Sélection de Position

Le menu déroulant offre deux options :

• En Bas à Droite (par défaut) : Position classique, non intrusive, recommandée pour la plupart des sites
• En Bas à Gauche : Alternative pour les sites ayant des éléments fixes à droite (chat client, boutons sociaux, etc.)

Distance du Bas (en pixels)

• Valeur par défaut : 20 pixels
• Usage : Distance entre le chatbot et le bord inférieur de l’écran
• Astuce : Augmentez cette valeur (ex : 80px) si vous avez une bannière de cookies ou d’autres éléments fixes en bas

Distance du Côté (en pixels)

• Valeur par défaut : 20 pixels
• Usage : Distance entre le chatbot et le bord gauche ou droit selon la position choisie
• Astuce : Ajustez selon la largeur de votre contenu et la présence d’autres éléments flottants

🖼️ Aperçu de Position

L’aperçu visuel vous montre :

• 📱 La position relative du chatbot sur l’écran (zone turquoise)
• 🎯 L’emplacement exact du bouton de chat (icône rose)
• 📐 Une représentation simplifiée (pas à l’échelle)

Note Importante : L’aperçu est informatif et simplifié. Pour voir le résultat final, vérifiez toujours votre site en front-end, surtout sur mobile.

⚙️ Configurations Recommandées

Pour la plupart des sites web

Position : En Bas à Droite
Distance du bas : 20px
Distance du côté : 20px

Cette configuration standard évite les conflits avec les éléments d’interface courants.

Si vous avez une bannière de cookies

Position : En Bas à Droite
Distance du bas : 80px
Distance du côté : 20px

Augmenter la distance du bas évite que le chatbot soit masqué par la bannière de cookies.

Pour les sites avec barre latérale fixe à droite

Position : En Bas à Gauche
Distance du bas : 20px
Distance du côté : 20px

Le positionnement à gauche évite les conflits avec les barres latérales fixes ou widgets.

Pour les sites e-commerce avec panier flottant

Position : En Bas à Gauche
Distance du bas : 20px
Distance du côté : 80px

Cette configuration évite les conflits avec les icônes de panier typiquement placées en bas à droite.

🔧 Problèmes Courants et Solutions

Le chatbot se superpose avec d’autres éléments

Diagnostic : D’autres éléments flottants (live chat, boutons sociaux, panier) occupent la même zone.

Solutions :

1. Changer la position (droite → gauche ou vice versa)
2. Augmenter les distances pour créer plus d’espace
3. Modifier l’ordre d’affichage des autres éléments dans votre thème

Le chatbot n’est pas visible sur mobile

Diagnostic : Les distances configurées dépassent la taille de l’écran mobile.

Solutions :

1. Réduire les distances (surtout la distance du côté)
2. Tester sur plusieurs tailles d’écrans
3. Vérifier qu’aucun élément CSS ne masque le chatbot

La couleur ne correspond pas à mon thème

Solutions :

1. Inspectez votre thème : Utilisez les outils développeur de votre navigateur (F12) pour identifier les couleurs principales de votre site
2. Outils couleur : Utilisez des services comme Coolors.co ou Adobe Color pour trouver des couleurs harmonieuses
3. Test de contraste : Vérifiez l’accessibilité avec des outils comme WebAIM Contrast Checker

L’aperçu ne correspond pas au résultat final

Explication : L’aperçu est une représentation simplifiée qui ne tient pas compte de :

• Votre taille d’écran réelle
• Les éléments CSS spécifiques de votre thème
• Les modifications responsive

Solution : Utilisez l’aperçu comme guide général, mais testez toujours le résultat sur votre site réel.

💡 Conseils d’Optimisation

Sélection de Couleur

Psychologie des Couleurs

• Bleu : Confiance, professionnalisme (idéal pour B2B)
• Vert : Nature, santé, croissance (parfait pour écologie, bien-être)
• Orange : Énergie, créativité (excellent pour conversions)
• Violet : Luxe, innovation (adapté aux produits premium)

Tests Techniques

• Utilisez un vérificateur de contraste pour la conformité accessibilité WCAG
• Testez la couleur sur fonds clairs ET sombres
• Vérifiez l’affichage sur différents écrans (calibrages différents)

Optimisation de Position

Analyse Comportementale

• Observez les heatmaps de votre site pour identifier les zones d’attention
• Évitez de placer le chatbot dans les zones de forte interaction
• Considérez les parcours utilisateur typiques de votre site

Tests A/B

• Testez différentes positions pendant plusieurs semaines
• Mesurez l’engagement (ouvertures de chat, messages envoyés)
• Analysez les retours utilisateur sur l’accessibilité

Design Responsive

Adaptation Automatique

Le chatbot AAIA s’adapte automatiquement :

• Desktop : Position fixe selon vos paramètres
• Tablette : Ajustement automatique des marges et tailles
• Mobile : Optimisation tactile et repositionnement si nécessaire

Tests Multi-appareils

• Vérifiez sur iPhone et Android
• Testez en mode portrait et paysage
• Assurez-vous que le chatbot reste accessible avec les claviers virtuels

🎯 Configuration et Tests

Étapes de Configuration

1. Définir votre couleur principale

   • Récupérez le code couleur de votre thème
   • Testez le contraste avec l’arrière-plan de votre site

2. Choisir la position optimale

   • Analysez les éléments existants sur votre site
   • Sélectionnez la position la moins intrusive

3. Ajuster les distances

   • Commencez avec les valeurs par défaut (20px)
   • Adaptez selon vos éléments fixes

4. Tester sur votre site

   • Vérifiez l’affichage desktop et mobile
   • Testez l’interaction (clic, ouverture)

5. Optimiser selon les retours

   • Recueillez les avis des visiteurs
   • Ajustez si nécessaire

Liste de Vérification de Validation

• La couleur s’harmonise avec votre charte graphique
• Le chatbot est visible sur toutes les pages
• Aucun conflit avec d’autres éléments flottants
• Bon affichage sur mobile et tablette
• Accessibilité respectée (contraste suffisant)
• Position non intrusive pour l’expérience utilisateur

🔗 Prochaines Étapes

Une fois l’apparence et la position configurées :

1. Configurer votre assistant : Personnaliser le comportement et les réponses
2. Configurer votre clé API : Connecter le chatbot aux services IA
3. Explorer les fonctionnalités avancées : Questions personnalisées, intégrations, etc.