<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Roshan Jonnalagadda</title>
    <description>The latest articles on DEV Community by Roshan Jonnalagadda (@roshan_jonnalagadda_ced3c).</description>
    <link>https://dev.to/roshan_jonnalagadda_ced3c</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3951564%2F70ecdbb3-83a8-47d3-bd85-a54db6cf8d47.png</url>
      <title>DEV Community: Roshan Jonnalagadda</title>
      <link>https://dev.to/roshan_jonnalagadda_ced3c</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/roshan_jonnalagadda_ced3c"/>
    <language>en</language>
    <item>
      <title>We Built a Feedback Widget That Ships Submissions Straight to Your Inbox</title>
      <dc:creator>Roshan Jonnalagadda</dc:creator>
      <pubDate>Tue, 26 May 2026 04:14:50 +0000</pubDate>
      <link>https://dev.to/roshan_jonnalagadda_ced3c/we-built-a-feedback-widget-that-ships-submissions-straight-to-your-inbox-44ie</link>
      <guid>https://dev.to/roshan_jonnalagadda_ced3c/we-built-a-feedback-widget-that-ships-submissions-straight-to-your-inbox-44ie</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxz7naplpgkhj96njbyxw.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxz7naplpgkhj96njbyxw.gif" alt="Animated Sendmux Feedback Widget flow showing category selection, compose, and success states" width="800" height="653"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Here is how it works.&lt;/p&gt;

&lt;h2&gt;
  
  
  What does the widget do?
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;One line to install:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pnpm add @sendmux/feedback-widget
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;One line to use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;sendmux-feedback&lt;/span&gt;
  &lt;span class="na"&gt;endpoint=&lt;/span&gt;&lt;span class="s"&gt;"/api/feedback"&lt;/span&gt;
  &lt;span class="na"&gt;position=&lt;/span&gt;&lt;span class="s"&gt;"bottom-right"&lt;/span&gt;
&lt;span class="nt"&gt;&amp;gt;&amp;lt;/sendmux-feedback&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;h2&gt;
  
  
  Why email-first?
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The widget itself does not ship the agent. It ships the collection layer and the payload contract. You build the workflow on top.&lt;/p&gt;

&lt;h2&gt;
  
  
  What about accessibility?
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Too many open-source UI components ship with accessibility as an afterthought. We treated it as a requirement from the first commit.&lt;/p&gt;

&lt;h2&gt;
  
  
  A quick look at the payload
&lt;/h2&gt;

&lt;p&gt;When a user submits feedback, your endpoint receives this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"category"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"bug"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"message"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"The export button does nothing on mobile"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"url"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://mysite.com/dashboard"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"user"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"id"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"user_123"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"email"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"customer@example.com"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"metadata"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"plan"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"pro"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"account_id"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"acct_456"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who is this for?
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;If you just want a free alternative to Canny or UserVoice without the overhead, this also works.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where to get it
&lt;/h2&gt;

&lt;p&gt;The repo is open-source on GitHub: &lt;a href="https://github.com/Sendmux/website-feedback-widget" rel="noopener noreferrer"&gt;https://github.com/Sendmux/website-feedback-widget&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webcomponents</category>
      <category>opensource</category>
      <category>sideprojects</category>
    </item>
  </channel>
</rss>
