I built a website feedback widget, here's why and how

#webdev #laravel #sass #showdev

Every developer who builds websites for clients has the same problem: the feedback process is chaos.

You deploy to staging, send the link, and then spend the next week collecting feedback from emails, Slack messages, WhatsApp screenshots, and the occasional phone call where someone says "the thing at the top doesn't look right."

I've been dealing with this for years. I finally built a tool to fix it.

The problem in detail

Client feedback on websites has two issues:

1. It's scattered across channels. Email, Slack, WhatsApp, text messages, verbal conversations. By the time you've collected everything, you've lost half of it.

2. It lacks context. "The button on the contact page doesn't work" — okay, which browser? Which screen size? Is it the submit button or the back button? Did they fill in the form first? You end up spending 15 minutes reproducing something that would have taken 2 minutes to fix if you had the right information.

What I built

Lairo is a feedback widget that you add to any website with a single script tag:

<script src="https://cdn.lairo.io/widget.js" data-project="YOUR_PROJECT_ID" async></script>

When a visitor (typically your client) clicks the widget, they can:

Click on any element on the page
Add a text comment
The tool automatically captures an annotated screenshot of the element they clicked, browser, OS, viewport size, and page URL

No account creation required for the reviewer. No browser extension. They just click and comment.

Technical decisions

A few things I thought about while building this:

Framework-agnostic widget. The widget is a standalone build — completely separate from the main app. I use a dedicated Vite config to bundle it independently, so it ships with zero framework dependencies. It needs to work on any site regardless of stack — SPAs, static sites, WordPress, Laravel, Next.js, whatever. No conflicts, no style leakage.

Screenshot capture. The widget captures the current DOM state client-side using canvas rendering, so the screenshot reflects exactly what the user sees — including dynamic content, scroll position, and SPA state. What you see is what gets reported.

Session replay. This was a recent addition. The widget records DOM mutations and user interactions as a stream of events, compresses them, and sends them to the server. The result is a full session replay attached to each piece of feedback — so you don't just see a screenshot of what went wrong, you can watch what the client did leading up to it.

Metadata collection. Every feedback submission automatically includes:

navigator.userAgent parsed into readable browser + OS
Viewport dimensions
Current URL (including SPA route)
Pinned screenshot of the clicked element
Console/Network errors (if any were present)
Session replay recording

This is the stuff that turns "it doesn't work" into an actionable bug report.

No-login feedback. This was a deliberate choice. The person leaving feedback is usually a non-technical client. Every extra step — creating an account, installing an extension, learning a new tool — is friction that means they'll just default back to sending you an email. The widget needs to be invisible until they need it, and then dead simple when they do.

The stack

Backend: Laravel 12 (PHP 8.4)
Frontend dashboard: Vue 3 + Inertia.js v2 + Tailwind CSS v4
Widget: Standalone Vite build, zero dependencies on the main app
Payments: Stripe
Testing: Pest 4 + Playwright for browser tests
Hosting: Laravel Forge

What's next

Session replay just shipped — every feedback item now includes a full recording of what the client did, not just a screenshot. Next up is deploy-aware feedback so submissions are tagged to specific staging deployments, public API and a bunch more integrations on-top of the already integrated Slack, GitHub & Linear.