CSS Conflict Inspector

Detect which CSS rules on a page are breaking or hiding Klaviyo signup forms, review widgets, and customer agent components.

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 inspect it. Clicking a Klaviyo component runs the full CSS conflict scan on that component. Clicking any other element runs a CSS visibility check on it 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, last name, and date of birth, 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. 📡 HAR File Record a live network session as a HAR file directly from the extension, or copy a pre-written customer macro with step-by-step instructions for Chrome, Firefox, and Safari — with screenshots embedded for each browser. Captures are saved automatically to Scan History. 🕒 Scan History Stores the last 5 page scans and last 10 HAR captures. Each entry shows the URL, timestamp, issue count or request count, and full results. Scans are replayed on click; HAR files can be downloaded at any time. 🔵 Identify Per-page identity tracker showing whether a visitor is recognised by Klaviyo on the current tab. Colour-coded status dot: red (no email set), amber (email set but not identified), green (identified). Pulls saved test emails from Settings — no manual typing needed. 📱 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 and HAR captures 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.