Feedchat

A delightful, customizable user feedback widget.

How does it work?

Install feedchat to collect better user feedback.

The runtime bundle is 62.6 KB.

Display the widget on any page with:

<script type="module">
  import 'feedchat'

  const widget = document.querySelector('feedchat-widget')
  widget.addEventListener('feedchat:submit', (event) => {
    const { message, sentiment, images, context, meta } = event.detail
    // Send to your API, analytics, email webhook, etc.
    console.log({ message, sentiment, images, context, meta })
  })
</script>

<feedchat-widget
  label="Send feedback"
  user-id="u_123"
  app-version="1.4.0"
  data-plan="pro"
></feedchat-widget>

Custom events

On submit, the widget dispatches a feedchat:submit browser event.

Listen for it and handle the payload however you like: API, analytics, webhook, etc.

No backend is required.

type FeedchatSentiment = "sad" | "neutral" | "happy";

interface FeedchatSubmitDetail {
  message: string;
  sentiment: FeedchatSentiment;
  images: File[];
  context: {
    url: string;
    title: string;
    userAgent: string;
    timestamp: string;
    viewport: { width: number; height: number };
  };
  meta?: Record<string, string>;
}

message — trimmed text from the composer
sentiment — required; sad / neutral / happy
images — File objects from the attach control
context — page URL, title, user agent, ISO timestamp, viewport
meta — user-id, app-version, and any data-* attributes on the element

Custom themes

Match your product by overriding CSS variables on the feedchat-widget element.

feedchat-widget {
  --feedchat-accent: #0c6e6b;
  --feedchat-surface: #f7fafb;
  --feedchat-panel: #ffffff;
  --feedchat-border: #d5e0e3;
  --feedchat-text: #1a2b2e;
  --feedchat-muted: #5c7277;
  --feedchat-font:
    "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;

  /* Launcher button */
  --feedchat-launcher-bg: #000;
  --feedchat-launcher-bg-hover: #111;
  --feedchat-launcher-color: #fff;
  --feedchat-launcher-radius: 999px;
}

Can my AI Agent use this?

Yes. Run the following command to give your agent all instructions.

Is this free?

Yes. It is 100% free and open source with MIT licence.

Can I read the code?

Yes. You can read the code on Github.

Specification

All details about installation and event types can be located in the README.md in Github.