CSS Conflict Inspector

Tracking since May 5, 2026.

Changelog

• May 16, 2026
  description

  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.

  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.

• May 10, 2026
  host_permissions

  https://a.klaviyo.com/*

  https://a.klaviyo.com/*, <all_urls>

Permissions & access

Permissions

activeTabscriptingstoragesidePaneldebuggertabs

Host access

https://a.klaviyo.com/*, <all_urls>

Screenshots