MxChat AI Theme Customizer Docs

MxChat AI Theme Customizer

Transform your chatbot’s appearance with AI-powered theme generation. Describe your ideal design in plain English and watch AI create professional CSS instantly—no coding required.

Requirements

MxChat Core Plugin (installed and activated)
MxChat Pro License (active)
At least one AI API key configured (OpenAI, Claude, Gemini, DeepSeek, or xAI)

Quick Setup

Install the Plugin: Upload and activate MxChat Theme Customizer through your WordPress plugins page
Verify License: Ensure your MxChat Pro license is active in MxChat → License Activation
Configure API Keys: Make sure at least one AI provider API key is set up in MxChat settings
Navigate to Theme Settings: Go to MxChat → Theme Settings
Generate Your First Theme: Describe your ideal theme and let AI create it instantly

Key Features

AI Theme Generator

Create stunning themes using natural language descriptions. Simply tell the AI what you want, and it generates professional CSS code automatically.

Multiple AI model support (GPT-5, Claude 4.5, Gemini 2.0, DeepSeek, Grok)
Intelligent CSS generation with security validation
Automatic color scheme suggestions
One-click apply and save functionality

Manual Color Controls

Fine-tune every aspect of your chatbot’s appearance with professional color pickers:

Close button and title colors
Message background and text colors (bot, user, and agent)
Top bar and input area styling
Toolbar icons and mode indicators
Quick questions toggle colors

Live Preview

See changes instantly as you customize. No page refreshes needed—every color change updates the preview in real-time.

Theme Management

Save unlimited custom themes
Apply saved themes with one click
View and edit generated CSS code
Copy CSS for use elsewhere
Delete themes you no longer need

Custom Icons

Upload custom PNG icons for the chatbot button and title bar. Perfect for brand consistency.

Using AI Theme Generator

Navigate to Theme Settings: Go to MxChat → Theme Settings
Scroll to AI Generator: Find the AI Theme Generator section
Describe Your Theme: Enter a detailed description like “Dark purple background with gold accents and rounded corners”
Select AI Model: Click the model selector and choose your preferred AI (GPT-4o, Claude, etc.)
Generate: Click “Generate Theme” and wait 10-30 seconds
Preview: Check the generated theme in the live preview
Apply & Save: Click “Apply & Save” to make it permanent

Pro Tip: Be specific in your descriptions. Instead of “blue theme,” try “Navy blue background with sky blue messages and white text for high contrast.”

Effective Theme Descriptions

Good Descriptions Include:

Primary Colors: Main background and accent colors
Message Styles: How bot and user messages should look
Mood: Professional, playful, modern, minimalist, etc.
Specific Elements: Top bar, buttons, icons, input field

Example Descriptions:

“Modern dark theme with deep purple background, light purple messages, and white text”
“Professional blue and white theme with navy top bar and light blue user messages”
“Warm orange and cream theme for a friendly, welcoming feel”
“Minimalist grayscale with sharp contrast between bot and user messages”
“Vibrant gradient theme with pink to purple transition and rounded corners”

What AI Understands:

The AI can generate CSS for colors, backgrounds, borders, text styling, and visual effects. It automatically:

Ensures proper contrast for readability
Styles thinking dots to match bot messages
Coordinates all UI elements harmoniously
Adds mobile-friendly adjustments
Uses !important declarations for reliability

Manual Customization

Using Color Pickers

Below the AI generator, you’ll find manual color controls for every chatbot element. Changes save automatically and update the preview instantly.

Available Color Controls:

Close Button & Title Color: Text color in the top bar
Chatbot Background Color: Main chatbot window background
User Message Colors: Background and text for user messages
Bot Message Colors: Background and text for bot responses
Top Bar Background: Header area color
Send Button Color: Send icon color
Chat Input Font Color: Text color in input field
Floating Widget Background: Background for the entire floating widget
Icon Color: Chatbot button icon color
Live Agent Colors: Background and text when live agent joins
Mode Indicator Colors: “AI Agent” badge styling
Toolbar Icon Color: PDF upload and other toolbar icons
Quick Questions Toggle: Expand/collapse button color

Custom Icons

Upload PNG images for custom branding:

Upload your icon to WordPress Media Library
Copy the image URL
Paste into “Custom Chatbot Icon” or “Title Bar Icon” field
Save changes (automatic)
Refresh page to see your custom icon

Recommended size: 48×48 pixels, PNG format with transparent background

Managing Saved Themes

Viewing Saved Themes

All saved AI-generated themes appear in the “Saved AI Themes” section with theme name, creation date, and description.

Theme Actions

Preview: See the theme applied to the live preview without saving
Apply: Make the theme active permanently
Edit: Modify the CSS code directly in a built-in editor
Delete: Remove themes you no longer need

Editing Theme CSS

Click “Edit” on any saved theme or the active theme to open the CSS editor:

CSS editor modal opens with syntax highlighting
Make your changes directly in the code
Use Ctrl+S (or Cmd+S on Mac) to save quickly
Tab key adds proper indentation
Validation ensures CSS is safe and properly formatted

Pro Tip: Use the CSS editor to make small tweaks to AI-generated themes, like adjusting specific color values or adding custom styling.

Available AI Models

GPT-5 Series

Latest OpenAI models – Exceptional performance for complex design requests

GPT-5: Flagship model for sophisticated themes
GPT-5 Mini: Faster, cost-efficient for straightforward designs
GPT-5 Nano: Quickest option for simple color schemes

Claude 4.5 Series

Advanced Anthropic models – Excellent for nuanced design understanding

Claude Sonnet 4.5: Best for complex styling with multiple elements
Claude Opus 4.1: Exceptional for specialized design requirements
Claude Haiku 4.5: Fastest Claude option for quick themes

Gemini 2.0 Series

Google’s latest models – Great balance of speed and quality

Gemini 2.0 Flash: Next-gen features with multimodal understanding
Gemini 2.0 Flash-Lite: Cost-efficient with low latency
Gemini 1.5 Pro: Complex reasoning for intricate designs

Other Models

Grok 4: xAI’s flagship with exceptional performance
DeepSeek-V3: Advanced open-source option

Troubleshooting

Theme generator not working

Verify MxChat Pro license is active
Ensure you have an AI API key configured in MxChat settings
Check that you’ve selected a model before generating
Try a different AI model if one fails
Confirm your API key has sufficient credits/quota

Colors not changing in preview

Clear browser cache and refresh the page
Check browser console for JavaScript errors
Try a different browser to rule out extension conflicts
Ensure you’re on the Theme Settings page when making changes

Generated theme looks wrong

Be more specific in your theme description
Try the “Regenerate” button for a new variation
Use the CSS editor to manually adjust specific elements
Try a different AI model—each has unique styling approaches

CSS editor shows validation errors

Check for missing closing braces }
Ensure all string quotes are properly closed
Remove any @import statements or external URLs
Avoid using JavaScript or expression() in CSS
Error messages show line numbers to help locate issues

Custom icons not appearing

Ensure icon is uploaded to WordPress Media Library
Verify URL starts with https:// and ends with .png
Check that image file is under 1MB
Refresh the page after saving icon URL
Try uploading image again if broken

Theme not applying to frontend

Verify you clicked “Apply & Save” not just “Preview”
Clear WordPress cache (if using caching plugin)
Clear browser cache and hard refresh (Ctrl+F5)
Check that MxChat is active on the frontend page

Frequently Asked Questions

Do I need coding knowledge to use this?

No! The AI generator creates all the CSS for you. Just describe what you want in plain English. Manual color pickers require zero coding knowledge either.

How many themes can I save?

Unlimited! Create and save as many custom themes as you need. Switch between them instantly.

Which AI model should I use?

For most users, GPT-4o or Claude Sonnet 4.5 offer the best balance of quality and speed. GPT-5 and Claude Opus 4.1 are best for complex, detailed designs. Gemini Flash and GPT-4o Mini are great for quick, simple themes.

Can I edit AI-generated themes?

Yes! Use the CSS editor to modify any theme. You can also use manual color pickers to fine-tune specific elements after AI generation.

Will themes work with all MxChat features?

Yes, themes are designed to work with all MxChat features including live agent mode, quick questions, file uploads, and all message types.

Can I export/import themes?

You can copy the CSS code from the viewer and save it externally. To reuse it, create a new AI theme and paste the CSS into the editor.

Do changes affect mobile devices?

Yes, all themes are responsive. The AI automatically includes mobile optimizations, and manual changes apply across all devices.

What happens if I deactivate the plugin?

Your chatbot reverts to default MxChat styling. Saved themes are preserved in the database, so you can reactivate and reapply them anytime.

Can I use the same theme for multiple bots?

Yes! If you’re using the Multi-Bot Manager add-on, you can apply the same theme across different bots by using the CSS code.

Are there any limitations on styling?

For security, the plugin filters out dangerous CSS like JavaScript URLs, expressions, and external imports. Standard styling properties (colors, backgrounds, borders, text) work perfectly.

Best Practices

Theme Description Tips

Use specific color names or hex codes when possible
Mention contrast requirements (e.g., “high contrast for accessibility”)
Specify if you want gradients or solid colors
Include mood words (professional, playful, elegant, modern)
Reference popular design styles (material design, flat, neumorphism)

Color Combination Guidelines

Ensure text has at least 4.5:1 contrast ratio with backgrounds
Use lighter colors for user messages, darker for bot messages (or vice versa)
Keep top bar distinct from main chatbot background
Make sure icons are visible against their backgrounds
Test themes with actual message content in the preview

Performance Optimization

Stick to color and basic styling changes for best performance
Avoid excessive animations or complex effects
Use hex colors when possible (faster than rgba)
Test on mobile devices to ensure responsiveness

Branding Consistency

Upload custom icons that match your logo
Use your brand’s color palette in descriptions
Save brand-specific themes for reuse across sites
Include brand guidelines in AI descriptions (e.g., “using our brand blue #1a73e8”)

Advanced Customization

CSS Editor Features

The built-in CSS editor includes:

Syntax highlighting for easy reading
Keyboard shortcuts (Ctrl+S to save, Tab for indentation)
Real-time validation with error messages
Line and column error indicators
Copy button for quick CSS export

Understanding Generated CSS

AI-generated CSS includes:

All properties use !important for reliability
Selectors target specific MxChat elements
Mobile-friendly media queries
Thinking dots styled to match bot messages
Proper color inheritance for nested elements

Combining AI and Manual

Best workflow for precise customization:

Generate base theme with AI using broad description
Preview and apply the generated theme
Fine-tune specific colors with manual pickers
Edit CSS directly for advanced tweaks
Save as a new named theme for future use

Creating Theme Variations

Quickly create light/dark variations:

Generate your main theme
Save it with a descriptive name (e.g., “Brand Them