FeedBot

A plug-and-play feedback widget for React apps — floating chat bubble, step-based feedback flow, screenshot capture, and severity tagging for bug reports.

Get an API key

API key registration is coming soon. Stay tuned for the self-serve registration flow.

Install

npm install @stl-ai-org/feedbot

Peer dependencies: React ≥ 17 and ReactDOM ≥ 17 must already be installed in your project.

Usage

import { FeedBot } from "@stl-ai-org/feedbot";
import "@stl-ai-org/feedbot/dist/feedbot.css";

function App() {
  return <FeedBot apiKey="your-api-key" />;
}

That's all you need. The widget connects to the FeedBot backend automatically.

Props

| Prop | Type | Required | Default | Description | |------------|----------|----------|------------------|---------------------------------------------| | apiKey | string | Yes | — | Your FeedBot API key | | position | string | No | 'bottom-right' | Initial widget position on screen |

Feedback flow

The widget walks users through a 4-step flow:

1. Welcome — choose between Report a Bug or Give Feedback
2. Message — write a description; bug reports also include an optional severity selector (low / medium / high / critical)
3. Screenshot — capture the current screen via html2canvas
4. Review — confirm all details before submitting

On success the widget displays a confirmation screen with the returned feedbackId.

Programmatic API

The typed submit client is also exported so you can call it directly without the UI:

import { submitFeedback } from "@stl-ai-org/feedbot";
import type { FeedbackRequest, FeedbackResponse } from "@stl-ai-org/feedbot";

const response: FeedbackResponse = await submitFeedback({
  apiKey: "your-api-key",
  type: "bug",
  severity: "high",
  message: "Button is broken on mobile",
  pageUrl: window.location.href,
  browser: "Chrome",
  userAgent: navigator.userAgent,
});

console.log(response.feedbackId); // e.g. "3f2a1b4c-..."

Retry behaviour: network failures are retried once automatically; HTTP 4xx/5xx errors are not retried.

Exported types

import type {
  FeedbackRequest,       // payload sent to the backend
  FeedbackResponse,      // { success: true; feedbackId: string; message: string }
  FeedbackErrorResponse, // error shape returned by the API
} from "@stl-ai-org/feedbot";

Features

• Floating chat bubble, draggable anywhere on screen
• Step-based flow: choose type → write message → screenshot → review → submit
• Severity selector (low / medium / high / critical) for bug reports
• Screenshot capture via html2canvas
• Auto-fills pageUrl, userAgent, and browser (parsed from UA string)
• Returns a feedbackId UUID on success
• Readable API error messages surfaced in the UI
• TypeScript — fully typed props, request/response interfaces exported
• Zero dependencies beyond html2canvas and React peer deps

Links

• npm: https://www.npmjs.com/package/@stl-ai-org/feedbot
• GitHub: https://github.com/Sayyam-Tamboli/feed-bot-ui
• Issues: https://github.com/Sayyam-Tamboli/feed-bot-ui/issues