Feedchat

Feedchat

A delightful, customizable user feedback widget.

npm install feedchatFor AI agents: Read https://feedchat.io/llm and install feedchat with 'npm install feedchat'. Then set the widget up on my project.

Your browser does not support the video tag.

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

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.

For AI agents: Read https://feedchat.io/llm and install feedchat with 'npm install feedchat'. Then set the widget up on my project.

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.

npm install feedchatFor AI agents: Read https://feedchat.io/llm and install feedchat with 'npm install feedchat'. Then set the widget up on my project.

2026 © Visual Binary