Roshan Jonnalagadda

Posted on May 26

We Built a Feedback Widget That Ships Submissions Straight to Your Inbox

#ai #webcomponents #opensource #sideprojects

Most feedback widgets are dead ends. A user fills out a form, hits submit, and the data lands in a dashboard no one checks. Two weeks later someone remembers to log in, scrolls through 47 entries, and gives up.

Sendmux Feedback Widget is a drop-in Web Component that turns website and in-app feedback into structured JSON you can route to a webhook or an inbox. It is built for teams who want user input to trigger work instead of sitting in a database.

Here is how it works.

What does the widget do?

It is a single custom element called . Drop it into React, Vue, Svelte, or plain HTML. It renders a floating button and a modal for collecting feedback. The user picks a category, writes a message, and hits send. Your server receives clean JSON with the message, page URL, category, and any user context you pass in.

One line to install:

pnpm add @sendmux/feedback-widget

One line to use:

<sendmux-feedback
  endpoint="/api/feedback"
  position="bottom-right"
></sendmux-feedback>

Zero framework dependencies. Shadow DOM styles so it won't fight your site's CSS. SSR-safe import for Next.js or Nuxt.

Why email-first?

Here is the thing: email is the universal API every team already knows how to read. Support tools, agent frameworks, and automation platforms can all consume an inbox. So instead of building yet another dashboard, we made the widget deliver structured data to a webhook or a secure relay that turns it into email. From there your agents can classify it, group duplicates by URL or user, summarise threads, or open GitHub issues automatically.

The widget itself does not ship the agent. It ships the collection layer and the payload contract. You build the workflow on top.

What about accessibility?

The modal traps focus, supports keyboard navigation, labels every control, and respects prefers-reduced-motion. Dark mode is automatic if your site already sets it. The component uses system fonts by default but accepts a Google Font if your brand requires one.

Too many open-source UI components ship with accessibility as an afterthought. We treated it as a requirement from the first commit.

A quick look at the payload

When a user submits feedback, your endpoint receives this:

{
  "category": "bug",
  "message": "The export button does nothing on mobile",
  "url": "https://mysite.com/dashboard",
  "user": {
    "id": "user_123",
    "email": "customer@example.com"
  },
  "metadata": {
    "plan": "pro",
    "account_id": "acct_456"
  }
}

You can pass user context and metadata from your app without exposing secrets in the DOM. The widget reads from a global config object if you prefer that over HTML attributes.

Who is this for?

If you run a SaaS product and you want user feedback to trigger actual work, this is for you. If you are building agent workflows that consume email as input, this gives you a frontend collection layer that outputs exactly the structured data you need.

If you just want a free alternative to Canny or UserVoice without the overhead, this also works.

Where to get it

The repo is open-source on GitHub: https://github.com/Sendmux/website-feedback-widget

We ship a package install today. A CDN bundle via unpkg is coming after the next release. Documentation and a live demo are in the README.

If you try it, open an issue or start a discussion. We are actively using this as the collection layer for Sendmux itself, so it will keep improving.

What would you hook a feedback widget up to? A support queue? A GitHub Action? Something we have not thought of yet? I would genuinely like to know.

DEV Community