Documentation

Everything you need to install, configure, and master the Flavor AI visual editor for WordPress.

Installation

From WordPress.org (Recommended)

In your WordPress admin, go to Plugins → Add New
Search for "Flavor AI Editor"
Click Install Now, then Activate
Go to Settings → Flavor AI Editor to configure

Manual Upload

Download the plugin .zip file from this site or WordPress.org
In WordPress admin, go to Plugins → Add New → Upload Plugin
Choose the .zip file and click Install Now
Click Activate

API Key Setup

The free version requires an xAI API key to power the AI chat. Pro users will get this handled automatically in a future update.

Visit console.x.ai and create a free account
Generate an API key from the dashboard
In WordPress, go to Settings → Flavor AI Editor
Paste your API key in the xAI API Key field and click Save

💡 xAI offers free credits when you sign up — enough for hundreds of conversations. The AI costs fractions of a cent per message.

First Steps

After activation, you'll see a purple floating button (🪄) in the bottom-right corner of every page when you're logged in as admin. This is the Flavor AI editor.

Click the purple button to open the editor panel
Type a request in the chat box — like "Make the header background navy blue" — and press Enter
The AI will generate CSS and apply it instantly. You'll see the change in real-time.
Not happy? Tell the AI to adjust, or use the History tab to roll back.

✅ All changes are saved to your database — they survive theme updates, are visible to all visitors, and work across all browsers.

Try these starter prompts to see what's possible:

"Make all headings a darker blue" — CSS color change
"Add a subtle shadow to all cards" — CSS styling
"Increase the font size across the whole site" — Global change
"Make the navigation bar sticky" — Layout change

Activating Pro

Pro unlocks inline text editing, element hiding, reordering, and unlimited AI messages.

Visit https://getflavorai.com and click Subscribe Now
Complete payment through Stripe (secure checkout)
You'll receive a license key by email (format: FAI-XXXX-XXXX-XXXX)
In WordPress, go to Settings → Flavor AI Editor
Paste your license key in the License Key field
Click Activate — Pro features unlock immediately! 🎉

📧 Can't find your email? Check your spam/junk folder. The email comes from hello@logicwebmedia.com. If you still can't find it, contact support with your payment email.

AI Chat Editor

The AI chat is the main way to interact with Flavor AI. Type what you want in plain English, and the AI generates CSS code, text changes, or element modifications.

The AI understands your site's context — it knows your theme name, WordPress version, and can see the current CSS. When you select an element with the picker, the AI knows its exact CSS selector.

🎨

CSS Styling

Colors, fonts, spacing, shadows, borders, gradients, animations — anything CSS can do.

📐

Layout Changes

Sticky headers, flexbox adjustments, grid layouts, responsive tweaks.

✏️

Text Changes PRO

AI can change text content directly via commands.

🗑️

Hide Elements PRO

AI can hide unwanted elements from the page.

Element Picker

The element picker lets you visually select any element on the page instead of writing CSS selectors manually.

Click the crosshair button (⊕) in the editor titlebar
Hover over any element — it highlights purple with a selector tooltip
Right-click the element you want to change
A context menu appears with available actions

Context menu actions:

Ask AI About This — sends the selector to chat so you can describe what to change
Edit Text — click to edit inline (Pro)
Hide Element — instantly hide it (Pro)
Move Up / Move Down — reorder within its parent (Pro)
Copy Selector — copies the CSS selector to clipboard

Press Esc at any time to cancel the picker.

Inline Text Editing PRO

Edit any text on the page by clicking it directly.

Use the element picker and right-click a text element
Choose Edit Text from the context menu
The text becomes editable — type your new content
Press Enter to save, or Esc to cancel

💾 Text changes are saved to the database instantly. They're visible to all visitors and persist through theme updates, page refreshes, and across browsers.

Hiding Elements PRO

Remove any element from your page — sidebars, banners, widgets, footers, or anything else.

Use the element picker and right-click the element
Choose Hide Element
The element disappears instantly (hidden from all visitors)
To restore it, go to the Edits tab and click Undo

Reordering Elements PRO

Move sections up or down on the page.

Use the element picker and right-click the element
Choose Move Up or Move Down
The element swaps with its sibling in the DOM

💡 Reordering works best with direct sibling elements — like sections within a main container. It won't work on nested child elements in complex layouts.

CSS Editing

The CSS tab shows all the custom CSS that Flavor AI has applied to your site. This CSS is injected via <style> tags and applies to all visitors.

You can:

View the current CSS in the CSS tab
Copy it to your clipboard
The AI always includes the complete CSS in each response — it doesn't just add to it

Revision History

Every CSS change creates a revision. You can:

Roll back to any previous state — undoes all changes after that point
Delete individual revisions
See which prompt triggered each change

DOM edits (text changes, hidden elements, reorders) are tracked separately in the Edits tab with individual undo buttons.

Free vs Pro

Feature	Free	Pro
AI CSS editing	✅	✅
Element picker & selector	✅	✅
CSS revision history	✅	✅
Copy CSS selector	✅	✅
AI messages per day	3	♾️ Unlimited
Inline text editing	❌	✅
Hide/delete elements	❌	✅
Move & reorder elements	❌	✅
Edits panel with undo	❌	✅
Priority support	❌	✅
Price	$0	$19.99/mo*

*First month $19.99, then $39.99/month. Cancel anytime.

Troubleshooting

Editor not appearing

Make sure you're logged in as an admin (role: Administrator)
The editor only shows for users with manage_options capability
Check that the plugin is activated in Plugins
Try clearing your browser cache or opening in an incognito window
Check for JavaScript errors in the browser console (F12 → Console tab)

AI not responding

Verify your xAI API key is correct in Settings → Flavor AI Editor
Check your xAI account has available credits at console.x.ai
If you're on the Free plan, you may have used your 3 daily messages
Check your server's outbound connections — some hosts block external API calls

Changes not visible to visitors

CSS changes and DOM edits apply to all visitors automatically
If a caching plugin is active (WP Super Cache, W3 Total Cache, LiteSpeed, etc.), clear the cache
Check that your theme calls wp_head() and wp_footer() — custom themes sometimes omit these

License key not working

Make sure you're copying the full key including the FAI- prefix
Check for extra spaces before or after the key
Your server needs to be able to reach https://getflavorai.com — some hosts block outgoing HTTP requests
If your subscription is cancelled or payment failed, the key will be deactivated

🔥 Still stuck? Contact support with your WordPress version, theme name, and a screenshot of any errors. We'll get you sorted.

Keyboard Shortcuts

Action	Shortcut
Cancel element picker	`Esc`
Send chat message	`Enter`
New line in chat	`Shift` + `Enter`
Save inline text edit	`Enter`
Cancel inline text edit	`Esc`

Frequently Asked Questions

Does it work with page builders like Elementor or Divi?

Yes. Flavor AI works alongside any page builder. The element picker generates framework-aware CSS selectors that target Elementor widgets, Divi modules, Beaver Builder modules, etc. CSS changes layer on top of your existing design.

Will my changes break after a theme update?

No. All changes are stored in your WordPress database (in custom tables), not in theme files. Theme updates don't touch your database, so your edits are safe. The only case where something might shift is if a theme update dramatically changes its HTML structure, which could make some CSS selectors no longer match.

Can multiple admins use it?

Yes. Any user with the Administrator role will see the editor widget. All changes are shared across admins since they're stored in the database. One license covers the entire site.

How do I cancel my Pro subscription?

Email hello@logicwebmedia.com and we'll cancel it immediately, or manage your subscription directly through the Stripe billing portal (link in your original confirmation email). You keep Pro features until the end of your current billing period.

Is there a limit to how many changes I can make?

Free plan: 3 AI messages per day. Pro: unlimited AI messages and unlimited edits. There's no limit on how many CSS changes, text edits, or hidden elements you can have.

Does it slow down my site?

No. The editor widget only loads for logged-in admins. For regular visitors, the only thing added is a small <style> tag and a lightweight <script> that applies DOM edits. There's no external API calls for visitors.

Can I use it on multiple sites?

Each license key works on one WordPress site. If you need Pro on multiple sites, you'll need a license for each one. Contact us for volume discounts.

What data does the AI see?

The AI sees your theme name, WordPress version, current custom CSS, and the CSS selector of any element you select. It does not see your page content, user data, or any private information. API calls go directly from your server to xAI.

Can I export my CSS changes?

Yes. Open the CSS tab in the editor and click Copy. You can paste the CSS into your theme's custom CSS section or a child theme if you ever want to remove the plugin.

I lost my license key. How do I get it back?

Email hello@logicwebmedia.com with the email address you used to pay. We'll resend your key within 24 hours (usually much faster).

Contact & Support

📧

Email Support

hello@logicwebmedia.com
We respond within 24 hours.

🐛

Bug Reports

Found a bug? Email us with your WP version, theme name, and a screenshot.

💡

Feature Requests

Have an idea? We'd love to hear it. Email us or reach out on social media.

🔑

Lost License Key

Email us with your payment email and we'll resend your key.