MxChat Chatbot Themes

Design your MxChat chatbot from a sentence. Describe the look you want in plain English and an AI generates production-ready CSS, then fine-tune anything with color pickers and a live preview.

Overview

MxChat Chatbot Themes is a Pro-only add-on that turns natural-language descriptions into fully styled chatbot themes. Tell it "dark purple with gold accents" or "minimal Apple-style white with rounded corners" and it generates the CSS, validates it through a multi-layer sanitizer, and applies it instantly. Prefer to tune things by hand? Every color, gradient, icon, and position is also exposed as a manual control, with a live preview so you see every change before saving. Built for site owners who want a branded chatbot, and agencies who need to ship distinct looks across many client sites fast.

Setup

Install MxChat Chatbot Themes via WordPress admin (Plugins → Add New → Upload Plugin) or upload the ZIP.
Activate via Plugins → Installed Plugins. The add-on requires MxChat (mxchat-basic) plus an active MxChat Pro license — without Pro, you'll see a notice prompting you to activate.
Open the editor at MxChat → Theme Settings in the WP admin sidebar. (On multisite, the network-level version lives under Network Settings.)
No additional API keys to configure — the AI generator reuses your existing MxChat Pro model credentials.

Settings

The theme editor uses a sidebar layout with sections for AI generation, manual colors, position, icons, and saved themes. Every change auto-saves over AJAX — no Save button.

AI Theme Generator

Type a natural-language description ("ocean blue with soft gradients") and pick which AI model should generate the CSS. Returns a sanitized CSS block plus an AI-generated theme name, applies it live, and saves it to your library.

Manual Color Controls

A WP color picker for every chatbot surface: close button + title, chatbot background, top bar, user message bg/font, bot message bg/font, send button, chat input font, input container bg/border, floating widget background, chatbot icon, live-agent messages, mode indicator, toolbar icons, quick-questions toggle, and link color. Each picker writes to its own dedicated option (e.g. mxchat_theme_color_settings, mxchat_message_color_settings, mxchat_link_color_settings, mxchat_input_container_settings) so the add-on never collides with the core plugin's options.

Position Controls

Range sliders for the floating widget's bottom offset and the pre-chat popup offset, separately for desktop and mobile (mobile kicks in below 550px). Defaults: desktop widget 30px / pre-chat 85px, mobile widget 15px / pre-chat 70px. Range 0-1000px.

Saved Themes Library

Save any theme by name, switch between saved themes with one click, rename, delete, or apply a saved theme to specific multi-bots (if the Multi-Bot add-on is installed). Per-bot themes are auto-scoped with [data-bot-id="..."] so each bot renders its own look on the same page.

CSS Code Editor

View, copy, and hand-edit the generated CSS at any time. Useful for surgical tweaks after the AI gets you 95% of the way. Edits go back through the same sanitizer before saving.

Custom Icon Upload

Two URL fields for PNGs: the floating chatbot button icon and the title-bar icon. Recommended 48x48px. URLs are sanitized with esc_url_raw and rendered via a WordPress filter into the core plugin's options.

Features

AI Theme Generator: Describe your ideal look in plain English and the AI returns a complete, scoped CSS block. Pick any model your MxChat Pro setup has configured — Claude Opus/Sonnet 4.6, GPT-5, Gemini 3 Pro/Flash, Grok 4, DeepSeek, and more.
Live preview: A real chatbot renders inside the editor and reflects every change instantly — color picks, AI generations, CSS edits — with no page refresh.
Manual color pickers: 20+ individual color controls covering every chatbot surface, each backed by a dedicated WP option so manual changes never trample the core plugin's settings.
Save and organize multiple themes: Build a library of named themes and switch between them instantly. Each saved theme can be renamed, deleted, or assigned per-bot.
CSS code viewer + editor: Inspect the generated CSS, copy it, or hand-edit it. Every edit is re-sanitized before it's saved.
Custom icon upload: Swap the floating button icon and the title-bar icon for branded PNGs, with built-in preview and URL validation.
Per-bot theme assignment: If you run multiple chatbots via the Multi-Bot add-on, assign different themes per bot — the CSS is automatically scoped to [data-bot-id="..."] so each bot renders its own look on the same page.
Position controls: Independent desktop and mobile sliders for the floating widget and pre-chat popup, so the chat sits exactly where you want it on every screen size.

API & Integration

Multi-layer CSS sanitizer: All AI-generated and hand-edited CSS passes through MxChat_Theme_CSS_Builder::validate_and_sanitize_css() before storage. The sanitizer rejects unsafe properties (e.g. behavior, javascript: URLs, expression(), imports) and strips anything outside the supported selector/property allowlist. If validation fails, the CSS is rejected with a descriptive error.
Per-bot CSS scoping: For multi-bot installs, per-bot themes are programmatically rewritten so every selector is prefixed with [data-bot-id="..."] — keeping each bot's styles isolated on a shared page.
AI model compatibility: Works with any model your MxChat Pro setup can call — Claude (Opus/Sonnet/Haiku 4.x), GPT-5 family, Gemini 3 Pro/Flash, Gemini 2.5 Pro/Flash, Grok 4 / 4.1 Fast, DeepSeek-V3, and others. Model selection is saved per-user and reused on next visit.
WordPress filter integration: Custom icon URLs are injected into the core plugin's mxchat_options via an option_mxchat_options filter, so the core renders them in chatbot HTML without any direct option write.
Frontend CSS output: Theme CSS is enqueued via wp_footer so it loads after chat-style.css and overrides cleanly. When an AI theme is active, all manual color CSS output is automatically skipped to avoid double-styling.

Requirements

MxChat (mxchat-basic): Required and active. The add-on shows a blocking admin notice and exits if mxchat-basic isn't installed or active.
MxChat Pro License: Required. Without an active Pro license, the editor menu and AJAX handlers won't load — only a warning notice is shown. See pricing.
WordPress: 5.8 or newer.
PHP: 7.4 or newer.
Multisite: Supported. Network-activated MxChat Pro licenses are honored; the editor lives under Network Settings on multisite.

Troubleshooting

Theme not applying on the frontend

Hard-refresh the page (Ctrl+F5 / Cmd+Shift+R) — the CSS may be cached by your browser or page cache. If that doesn't help, check MxChat → Theme Settings and confirm the theme is marked "Applied" or assigned to the default bot. If you recently switched from manual colors to an AI theme, make sure no stale manual settings are overriding it — version 2.0.6 clears these automatically on upgrade, but a fresh save in the editor forces the cleanup.

CSS validation rejection on AI generation

The sanitizer rejected the generated CSS because it contained disallowed properties or selectors. This usually means the AI tried to inject position: fixed on body, @import rules, JavaScript URLs, or behaviors. Try regenerating with a more specific prompt, or pick a different model — Claude Sonnet 4.6 and GPT-5 tend to stay closest to the allowlist. You can also view the raw CSS in the code editor and remove the offending rule manually.

Custom icon URL not saving

Confirm the URL is publicly reachable and returns a real image (test in an incognito tab). The URL is validated with esc_url_raw, so non-HTTP(S) schemes or malformed URLs will silently fail. PNG is recommended at 48x48px; refresh the editor page after save to confirm the preview shows.

Per-bot theme not applying to a specific bot

The bot needs to render with a data-bot-id attribute matching the assignment — this happens automatically when the Multi-Bot add-on is active. If you assigned a theme to a bot but it shows the default look, confirm Multi-Bot is active and the bot's ID in the assignment matches the bot's bot_id in the multi-bots table.

Position changes not visible

The position CSS only loads on the frontend and on the theme settings page itself. If you adjusted positions on a different admin page (via custom code), they won't apply there — that's expected. On the frontend, hard-refresh and check that no page-builder CSS is overriding .floating-chatbot-button { bottom: ... }.

Last reviewed by Sage on 2026-05-21. Spotted an issue? Open a ticket and we'll patch the doc.