Design and Appearance Documentation - WooCommerce
Skip to navigation
Skip to content
Develop on Woo
Hire an expert
Get support
Sell
Extensions
Resources
Enterprise ecommerce
Extensions
Extensions
Pre-Sales Support
Stripe
WooCommerce Square
PayPal Braintree
AutomateWooExpand
Product CSV Import Suite
Order/Customer CSV Export
Facebook for WooCommerce
WooCommerce SubscriptionsExpand
All Products for WooCommerce SubscriptionsExpand
WooCommerce MembershipsExpand
WooCommerce BookingsExpand
Product BundlesExpand
Product RecommendationsExpand
Composite ProductsExpand
Smart Coupons
Cashier for WooCommerce
Affiliate For WooCommerce
Mix and Match Products
Google Product Feed
Groups WooCommerce
Gift Cards
API Manager
Table Rate Shipping
Advanced Shipping Packages
Name Your Price
Order Delivery
WooCommerce Zapier IntegrationExpand
KlarnaExpand
Product Vendors
WooCommerce PhotographyExpand
WooCommerce Product SearchExpand
PDF Invoice
Pre-orders
Force Sells
Google for WooCommerceExpand
Import Export Suite for WooCommerce
WooCommerce BrandsExpand
Bulk Updater for WooCommerce SubscriptionsExpand
Enhancer for WooCommerce SubscriptionsExpand
Product Add-onsExpand
XeroExpand
Buy One Get One Free
WooCommerce Sales Analysis
Conditional Shipping and Payments
WooCommerce Shipping & Tax
Email Customizer Pro
Back In Stock Notifications
WooCommerce Smart Refunder
Saved Addresses For WooCommerce
Chained Products
Volume Discount Coupons
SenseiExpand
Retired Extensions
WooSidebars
Follow-UpsExpand
Opayo
Pixel Manager Pro for WooCommerce
Advanced Bulk Edit
Smart Stock & Inventory Manager
Flexi BOGO
Flexi Custom Order Status
Product Input Fields
Product Feed Manager
Payment Gateway Based Fees and Discounts
Abandoned Cart Pro
Order Delivery Date
Currency per product
Call for Price Pro
Product Prices by User Role
Flexi Custom Order Numbers
Flexi Product Delivery Date
Flexi Booking and Appointment
Delivery and Pickup Scheduler
SensAI
All-in-one PDF Invoice and Packing Slips SuiteExpand
Easy Subscriptions
Smart Product Designer
WooCommerce Anti-Fraud
Shipment TrackingExpand
Documentation / Products / Extensions / SensAI / Design and Appearance			Design and Appearance
Location: SensAI > Design & Appearance
Customize the chat interface to match your brand and provide a consistent user experience.
Enable Chatbox ↑ Back to top
Purpose:
Show or hide the chat bubble on your website.
Options:
ON (purple): Chat bubble appears on the frontend
OFF (gray): Chat bubble is hidden (useful for testing)
Display Chat Only to Logged-In Users ↑ Back to top
Purpose:
Restrict chatbot visibility to logged-in WordPress users.
Default: OFF – Everyone can see and use the chatbot
ON: Only logged-in users see the chatbot
When to Use:
Membership sites with restricted content
Private communities or internal sites
Customer support portals
Sites where AI support should be limited to members only
How it Works:
Non-logged-in visitors: Chatbot is completely hidden (no button, no assets)
Logged-in users (any role): Chatbot is visible and functional
Support Agent Name ↑ Back to top
Purpose:
The name displayed at the top of the chat window.
Default: “Support Agent”
Examples:
“Alex”
“Customer Support”
“Help Assistant”
Your brand name
Select Avatar ↑ Back to top
Purpose:
Choose the profile picture displayed in the chat header.
Options:
Robot Blue: Friendly robot avatar
Friendly Green: Welcoming bot
Tech Purple: Modern tech assistant
Custom: Upload your own image
Custom Avatar Instructions:
Select Custom
Click Add Your Own Avatar
Choose an image from your media library or upload a new one
Image is automatically resized to 64×64 pixels
Works best with square images
Custom Greeting ↑ Back to top
Purpose:
Set the first message visitors see when they open the chat.
Default:
“Hello! I’m your AI assistant. How can I help you today?”
Tips:
Keep it friendly and welcoming
Mention what you can help with
Use your brand voice
Keep it under 2–3 sentences
Examples:
“Hi! I’m here to help you find the perfect product. What are you looking for?”
“Welcome! Ask me anything about our services and I’ll point you in the right direction.”
“¡Hola! Estoy aquí para ayudarte. ¿En qué puedo asistirte?”
Color Scheme Selection ↑ Back to top
Purpose:
Choose between light or dark mode for the chat interface.
Options:
Light Mode:
White background
Bright, traditional look
Better readability in sunlight
Dark Mode:
Dark background
Modern, trendy aesthetic
Easier on eyes in low-light environments
Preview:
Mini previews show how each mode looks before saving.
Main Chatbox Color ↑ Back to top
Purpose:
Set the primary color used throughout the chat.
Default: #667eea (purple)
Used For:
Chat header background
Chat bubble button
Active states and accents
Tips:
Use your brand’s primary color
Ensure good contrast with white/black text
Test in both light and dark modes
Titles Colors ↑ Back to top
Purpose:
Text color for chat title and bubble icon.
Default: #ffffff (white)
Used For:
Chat header name (“Support Agent”)
Icon inside chat bubble
Tips:
Use white for dark main colors
Use dark colors for light main colors
Test readability on different screens
Select Chat Icon ↑ Back to top
Purpose:
Choose the icon inside the chat bubble button.
Options:
Chat Right: Speech bubble facing right
Chat Left: Speech bubble facing left
Tip: Both options work well; choose based on preference.
Chat Link Color ↑ Back to top
Purpose:
Set the color of clickable link buttons in AI responses.
Default: #667eea (matches main color)
Used For:
Buttons like “View Product” or “Read More” in AI responses.
Tip:
Match your Main Chatbox Color for consistency.
On this page
Enable Chatbox
Display Chat Only to Logged-In Users
Support Agent Name
Select Avatar
Custom Greeting
Color Scheme Selection
Main Chatbox Color
Titles Colors
Select Chat Icon
Chat Link Color
30-day money-back guarantee
Support
teams across the world
Safe and secure
online payments
Sell
WooCommerce
WooCommerce pricing
Payments
No-code customization
Marketing
Checkout
Shipping
Mobile app
Enterprise ecommerce
Marketplace
WooCommerce extensions
WooCommerce themes
New
Essentials
Collections
Developed by Woo
Build
Woo for developers
Developer resources
Become a Woo agency
Become a Marketplace partner
Become an affiliate
Resources
Blog
Documentation
WooCommerce site examples
Product updates
Email newsletter
Support
Feature requests
WooCommerce hosting
Hire an agency
Participate in customer research
Accessibility
Support forums
Shoptalk Europe 2026
woo
About
Press
Download WooCommerce free
Join the Woo community
Woo trademark guidelines
Brand and logo guidelines
Do not sell or share my personal information
WooCommerce Support Policy
Refund Policy
Contact us
Follow us on Facebook
Follow us on X
Follow us on Instagram
Follow us on LinkedIn
Terms and Conditions
Privacy policy
Privacy Notice for California Users
Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.
Customize
Accept all