Connect PostHog, Amplitude, Mixpanel, Google Analytics 4, LogRocket, or FullStory in project settings. Blue Painter maps analytics events to flow nodes and overlays real funnel data (starts, conversion, drop-offs) on the flow graph.
What you see
Each flow node shows funnel counts (e.g. 10,000 starts → 8,200 reached) and conversion rates. High drop-off points are flagged. Blue Painter correlates its design issues with analytics drop-offs—e.g. "Missing error state for address validation" + "1,200 users saw validation errors, 800 abandoned" → prioritize that fix. Correlation analysis lets you prioritize by actual user impact, not just theory. Before/after tracking shows whether fixing an issue improved conversion.
Synthetic usability testing (v3)
Auto-generate AI-driven usability tests for high-risk flows. Simulate user personas attempting tasks (e.g. First-time buyer, Returning customer). Report issues like "Persona 'First-time buyer' failed to find shipping options on mobile view." Ground tests in real flow structure, not generic scenarios.
Setup
Add your analytics provider in the project Config & analytics tab. From a report, the Analytics overlay panel's "Connect analytics (Config & analytics)" button takes you there. OAuth or API key depending on provider. Blue Painter fetches event data and aligns it to your flow structure.
PostHog
For PostHog, set provider to PostHog and enter your API key (project API key from PostHog), Project ID (numeric project ID from PostHog URL or project settings), and Funnel steps as JSON: an array of objects with name (label shown on the overlay) and event (PostHog event name), e.g. one step as { "name": "Login", "event": "login_viewed" }. The overlay uses the last 30 days of event counts and highlights steps with drop-off ≥ 20%.
Flow graph overlay
On the report Flow step, consecutive funnel step name values are matched to flow screen labels (case-insensitive). When an edge exists from the screen matching from to the screen matching to, that edge is styled with the drop-off percentage. If nothing matches, adjust step names to align with your graph or rename frames for clearer handoff.