CSS Conflict Inspector

CSS Conflict Inspector is an internal support tool for Klaviyo Support agents. It scans any merchant website and instantly identifies CSS rules that are preventing Klaviyo signup forms, review widgets, or Customer Agent components from displaying correctly.

──────────────────────────────────────
WHAT IT DOES
──────────────────────────────────────

🔍 Scan Page
Inspects the active tab for CSS conflicts affecting Klaviyo components. Detects display:none, visibility:hidden, opacity:0, overflow:hidden, max-height:0, transform:scale(0), pointer-events:none, z-index stacking issues, and zero-dimension problems. Traces every issue back to the exact stylesheet, selector, and line number. Shows a confidence score (1–5) so agents know which conflict to fix first.

🖱️ Pick Element
Hover over any element on the page to highlight it, then click to run a targeted CSS conflict check on just that element and its ancestors.

📋 Manual Check
Enter a Klaviyo Form ID (and optional Variation ID) to inspect any specific form directly, whether or not it is currently visible on the page.

👁️ Preview Fix
Temporarily overrides the conflicting CSS property on the live page so the agent can visually confirm the fix resolves the issue before sending instructions to the merchant. A Restore button puts it back.

🚀 Force Open
Signals Klaviyo to open a form on demand, bypassing geo rules, frequency caps, cookie suppression, and targeting conditions. Two modes: quick (no reload) and Ignore Rules (full reload + localStorage clear).

🧪 Test Submit
Fills the visible form with the agent's saved test email, phone number, first name, and last name, clicks Submit, and intercepts the Klaviyo subscription API response. Reports whether the submission succeeded or failed, and why.

🌐 Site Scanner
Fetches all active Klaviyo forms for the merchant account using the company ID detected on the page. Shows each form's name, ID, type, and page targeting. Flags snippet-placed forms (embedded directly in HTML). Force Open and Test Submit are available per form.

📱 Mobile Preview
Emulates a real iOS or Android device using Chrome's DevTools Protocol — overriding screen dimensions, device pixel ratio, and User-Agent — so agents can see exactly how Klaviyo forms render on mobile.

🚩 Report
Lets agents submit feedback about new CSS conflict patterns or false positives directly from the tool, with scan context attached automatically.

📦 Theme Detection
Recognises 54+ themes and CSS frameworks (Shopify Dawn, Elementor, Divi, Bootstrap, Tailwind, Squarespace, Webflow, and more) and names the specific theme with a targeted fix suggestion.

──────────────────────────────────────
WHO IT'S FOR
──────────────────────────────────────

This extension is intended exclusively for Klaviyo Support agents troubleshooting CSS conflicts on merchant websites. It is not a general-purpose consumer tool.

──────────────────────────────────────
PERMISSIONS SUMMARY
──────────────────────────────────────

This extension uses only the permissions strictly necessary for its diagnostic features. No user data is sent to third parties. Scan results, test profiles, and preferences are stored locally on the agent's device only.