Order
...
Logo Aaia
Appearance and Position

Appearance and Position

The Appearance and Position page allows you to customize the visual appearance and location of the AAIA chatbot on your WordPress site.

🎨 Visual Appearance

Primary Color

The primary color defines the color palette of your chatbot and its interface elements.

Configuration

  1. Color Field: Click on the color field to open the WordPress color picker
  2. Hexadecimal Code: You can also directly enter a hexadecimal color code (e.g., #f40bc9)
  3. Real-time Preview: The color is applied instantly in the preview

Color Impact

This primary color influences:

  • ✨ The floating chatbot icon
  • 💬 Assistant chat bubbles
  • 🔘 Interface buttons
  • 🎯 Interactive elements (links, actions)
  • 📱 Chat window header

Best Practices

  • Contrast: Ensure the color provides good contrast with your site’s background
  • Consistency: Choose a color that harmonizes with your brand guidelines
  • Accessibility: Avoid colors that are too light and might impair readability

📍 Chatbot Position

This section allows you to precisely control where the chatbot appears on your site.

Position Options

Position Selection

The dropdown menu offers two options:

  • Bottom Right (default): Classic position, non-intrusive, recommended for most sites
  • Bottom Left: Alternative for sites with fixed elements on the right (client chat, social buttons, etc.)

Bottom Distance (in pixels)

  • Default value: 20 pixels
  • Usage: Distance between the chatbot and the bottom edge of the screen
  • Tip: Increase this value (e.g., to 80px) if you have a cookie banner or other fixed elements at the bottom

Side Distance (in pixels)

  • Default value: 20 pixels
  • Usage: Distance between the chatbot and the left or right edge depending on the chosen position
  • Tip: Adjust according to your content width and presence of other floating elements

🖼️ Position Preview

The visual preview shows you:

  • 📱 The relative position of the chatbot on the screen (turquoise area)
  • 🎯 The exact location of the chat button (pink icon)
  • 📐 A simplified representation (not to scale)

Important Note: The preview is informative and simplified. To see the final result, always check your site on the frontend, especially on mobile.

For most websites

Position: Bottom Right
Bottom distance: 20px
Side distance: 20px

This standard configuration avoids conflicts with common interface elements.

Position: Bottom Right
Bottom distance: 80px
Side distance: 20px

Increasing the bottom distance prevents the chatbot from being hidden by the cookie banner.

For sites with fixed right sidebar

Position: Bottom Left
Bottom distance: 20px
Side distance: 20px

Left positioning avoids conflicts with fixed sidebars or widgets.

For e-commerce sites with floating cart

Position: Bottom Left
Bottom distance: 20px
Side distance: 80px

This configuration avoids conflicts with cart icons typically placed at the bottom right.

🔧 Common Issues and Solutions

The chatbot overlaps with other elements

Diagnosis: Other floating elements (live chat, social buttons, cart) occupy the same area.

Solutions:

  1. Change position (right → left or vice versa)
  2. Increase distances to create more space
  3. Modify the display order of other elements in your theme

The chatbot is not visible on mobile

Diagnosis: The configured distances exceed the mobile screen size.

Solutions:

  1. Reduce distances (especially side distance)
  2. Test on multiple screen sizes
  3. Check that no CSS elements are hiding the chatbot

The color doesn’t match my theme

Solutions:

  1. Inspect your theme: Use your browser’s developer tools (F12) to identify your site’s primary colors
  2. Color tools: Use services like Coolors.co or Adobe Color to find harmonious colors
  3. Contrast testing: Check accessibility with tools like WebAIM Contrast Checker

The preview doesn’t match the final result

Explanation: The preview is a simplified representation that doesn’t account for:

  • Your actual screen size
  • Your theme’s specific CSS elements
  • Responsive modifications

Solution: Use the preview as a general guide, but always test the result on your actual site.

💡 Optimization Tips

Color Selection

Color Psychology

  • Blue: Trust, professionalism (ideal for B2B)
  • Green: Nature, health, growth (perfect for ecology, wellness)
  • Orange: Energy, creativity (excellent for conversions)
  • Purple: Luxury, innovation (suitable for premium products)

Technical Testing

  • Use a contrast checker for WCAG accessibility compliance
  • Test the color on both light AND dark backgrounds
  • Check display on different screens (different calibrations)

Position Optimization

Behavioral Analysis

  • Observe your site’s heatmaps to identify attention zones
  • Avoid placing the chatbot in high-interaction areas
  • Consider your site’s typical user journeys

A/B Testing

  • Test different positions for several weeks
  • Measure engagement (chat openings, messages sent)
  • Analyze user feedback on accessibility

Responsive Design

Automatic Adaptation

The AAIA chatbot automatically adapts:

  • Desktop: Fixed position according to your settings
  • Tablet: Automatic margin and size adjustment
  • Mobile: Touch optimization and repositioning if necessary

Multi-device Testing

  • Check on iPhone and Android
  • Test in portrait and landscape modes
  • Ensure the chatbot remains accessible with virtual keyboards

🎯 Setup and Testing

Configuration Steps

  1. Define your primary color

    • Get the color code from your theme
    • Test contrast with your site background

  2. Choose the optimal position

    • Analyze existing elements on your site
    • Select the least intrusive position

  3. Adjust distances

    • Start with default values (20px)
    • Adapt according to your fixed elements

  4. Test on your site

    • Check desktop and mobile display
    • Test interaction (click, opening)

  5. Optimize based on feedback

    • Gather visitor opinions
    • Adjust if necessary

Validation Checklist

  • Color harmonizes with your brand guidelines
  • Chatbot is visible on all pages
  • No conflicts with other floating elements
  • Good display on mobile and tablet
  • Accessibility respected (sufficient contrast)
  • Non-intrusive position for user experience

🔗 Next Steps

Once appearance and position are configured:

  1. Configure your assistant: Customize behavior and responses
  2. Configure your API key: Connect the chatbot to AI services
  3. Explore advanced features: Custom questions, integrations, etc.