WebFeedback

A drop-in feedback widget for any website. Users can report bugs, request features, and share feedback, complete with automatic screenshots, star ratings, categories, and user metadata.

Install

npm install @surfkitchen/webfeedback

Import it once in your application. The import registers the <feedback-widget> custom element as a side effect:

import "@surfkitchen/webfeedback";

For React/JSX TypeScript support, also import the type augmentation:

import "@surfkitchen/webfeedback/react";

Then render the element:

<feedback-widget
  site-key="YOUR_SITE_KEY"
  api-url="https://YOUR_API_URL"
></feedback-widget>

Attributes

| Attribute | Required | Description | | --- | --- | --- | | site-key | Yes | Your site's API key | | api-url | Yes | WebFeedback backend URL | | position | No | Button position. Default: bottom-right | | user-id | No | Logged-in user's ID, attached to submissions | | user-name | No | Logged-in user's display name | | page-title | No | Override page title, otherwise falls back to document.title | | page-id | No | Custom page identifier for your own tracking | | metadata | No | JSON string of arbitrary data, e.g. '{"plan":"pro"}' | | theme-color | No | Hex colour for the button and accents. Default: #6366f1 | | hide-trigger | No | Hide the floating button and open it programmatically |

Programmatic Control

const widget = document.querySelector("feedback-widget");
widget?.open();
widget?.close();

React / Next.js Example

"use client";

import "@surfkitchen/webfeedback";
import "@surfkitchen/webfeedback/react";

interface FeedbackWidgetProps {
  siteKey: string;
  apiUrl: string;
  userId?: string;
  userName?: string;
}

export default function FeedbackWidget({
  siteKey,
  apiUrl,
  userId,
  userName,
}: FeedbackWidgetProps) {
  return (
    <feedback-widget
      site-key={siteKey}
      api-url={apiUrl}
      {...(userId && { "user-id": userId })}
      {...(userName && { "user-name": userName })}
    />
  );
}

Script Tag Alternative

If you do not use npm, load the hosted widget script from your WebFeedback backend:

<script src="https://YOUR_API_URL/widget.js"></script>
<feedback-widget
  site-key="YOUR_SITE_KEY"
  api-url="https://YOUR_API_URL"
></feedback-widget>

License

MIT