Customize Chatbot Appearance: Colors, Avatar, Position & Layout
Your chatbot works — now make it look like it belongs on your site. This guide covers every visual setting in the AIWU chatbot appearance editor: colors, fonts, position, avatar, welcome message, and mobile behavior. No CSS knowledge needed.
Before You Start
You’ll need:
- A working chatbot (Set Up First Chatbot guide)
- Your brand colors (hex codes) handy
- Time needed: ~10 minutes
- Plan required: Free
Open the Appearance Settings
Go to WordPress Admin → AI Copilot → AI ChatBots. Click your chatbot, then go to the Appearance tab.
You’ll see a live preview panel on the right that updates as you change settings — so you can see exactly what visitors will see before saving.
Colors and Theme
Primary Color
This is the main accent color — used for the chat button, message bubbles, and header. Set it to your brand color for instant on-brand appearance.
Enter your hex code directly (e.g. #1a73e8) or use the color picker.
Chat Button Color
The floating button that visitors click to open the chat. Defaults to the primary color, but can be set independently. If your primary color is dark, consider a lighter or contrasting button color for better visibility.
Background Color
The background of the chat window. White (#ffffff) works for most sites. For dark-themed sites, try a dark background with light text.
Text Colors
Set the color of user messages and bot messages independently. High contrast between text and background improves readability and accessibility.
Chat Button and Position
Position
Choose where the chat button appears:
- Bottom Right — industry standard, highest click rate
- Bottom Left — if bottom-right conflicts with other elements (cookie banners, live chat from other tools)
Button Icon
Options typically include a chat bubble icon, a message icon, or a custom image. You can also upload your own icon (logo, avatar, etc.) as the button image.
Button Size
Small (40px), Medium (56px — default), or Large (72px). Medium works for most sites. Use Large if you want the chatbot to be a primary conversion element.
Bottom Offset
Distance from the bottom of the screen. Increase this if other fixed elements (cookie banner, sticky footer) overlap the chat button.
Chat Window Size and Layout
Window Width / Height
Default (380×600px) suits most desktop layouts. Wider windows (440px+) work well for complex chatbots with tables or product cards. Taller windows reduce scrolling in longer conversations.
Border Radius
Controls the roundness of the chat window corners. 0 = square corners, 12–16px = slightly rounded, 24px+ = pill-shaped. Match your site’s design language.
Header Settings
Chatbot Name
The name shown in the chat header. Options: your company name (“Acme Support”), a friendly persona name (“Luna”), or a functional name (“Product Assistant”). Avoid generic names like “Chatbot” — a named assistant feels more credible.
Chatbot Avatar
Upload a custom avatar image (recommended: 100×100px circle, PNG with transparent background). Options:
- Your company logo
- A cartoon/illustrated character that represents your brand
- A generic assistant icon (built-in options)
Header Subtitle
Small text under the chatbot name. Good options: “Usually replies instantly”, “Ask me anything about our products”, “Online 24/7”.
Welcome Message and Behavior
Welcome Message
The first message visitors see when they open the chat. Make it specific and action-oriented:
| ❌ Generic | ✅ Specific |
|---|---|
| “Hello! How can I help you today?” | “Hi! I can help you find the right running shoe, check sizes, or answer questions about our returns policy. What are you looking for?” |
Auto-Open Delay
Automatically open the chat window after X seconds on the page. Use with caution — auto-opening can be annoying on pages where visitors are reading. Consider enabling only on high-intent pages (pricing, checkout).
Show on Mobile
Toggle chatbot visibility on mobile devices. Enabled by default. If your chatbot is not mobile-optimized, consider disabling until you test the mobile experience.
Save and Preview
Click Save Changes. Then open your site in an incognito window to see the final result — the live preview in the admin panel is accurate but the real site may render slightly differently depending on your theme.
Common Issues
Problem: “Colors I set aren’t showing on the live site.”
Fix: Clear your site cache (caching plugin → Purge All) and try in incognito. Your theme or a CSS plugin may also be overriding AIWU’s styles — check with browser DevTools (F12 → Inspector) for conflicting rules.
Problem: “Chat button overlaps with cookie consent banner.”
Fix: Increase the Bottom Offset in the position settings. Alternatively, adjust your cookie banner’s z-index or position to avoid the conflict.
Problem: “Avatar image appears blurry.”
Fix: Upload a larger source image (200×200px minimum) — the system scales it down. Make sure the image is a perfect square to avoid stretching.
What’s Next
- 📊 See how visitors use your chatbot: Chatbot Analytics: Track Conversations and Performance
- 🔄 Optimize for conversions: Chatbot Conversion Optimization
- 💬 Build a full support chatbot: Customer Support Chatbot: Handle 80% of Tickets
- 🌍 Serve visitors in their language: Multi-Language Chatbot: Automatic Language Detection
- 🧠 Make it smarter: Train Your Chatbot with Embeddings
Last verified: AIWU v.4.9.2 · Updated: 2026-02-25