feedback-tracker

A universal embeddable feedback widget. Click the button in the bottom-right →

What's running on this page

The <FeedbackTracker /> React component (a thin wrapper around the underlying Web Component) using the pocketbase adapter that POSTs to feedback.api.mpeters.dev.

import { FeedbackTracker } from 'feedback-tracker/react';

<FeedbackTracker
  adapter="pocketbase"
  endpoint="https://feedback.api.mpeters.dev"
  collection="feedback"
  collectEmail
  accent="#6366f1"
  label="Send feedback"
  onSent={(d) => console.log('sent', d)}
/>

Submission log

Listening for the onSent and onError callbacks:

Use the Web Component directly

No React? Drop the script tag and the custom element into any HTML page:

<script type="module"
        src="https://feedback.api.mpeters.dev/feedback-tracker.js"></script>
<feedback-tracker
  adapter="pocketbase"
  endpoint="https://feedback.api.mpeters.dev"
  collection="feedback"
  collect-email
></feedback-tracker>

Try other adapters

<!-- Web3Forms (free, 250/mo, no account, key emailed to you) -->
<FeedbackTracker
  adapter="web3forms"
  accessKey="YOUR_WEB3FORMS_KEY"
/>

<!-- Appwrite Cloud Frankfurt (GDPR-friendly) -->
<FeedbackTracker
  adapter="appwrite"
  endpoint="https://fra.cloud.appwrite.io/v1"
  project="YOUR_PROJECT_ID"
  database="YOUR_DB_ID"
  collection="feedback"
/>

<!-- Discord webhook (instant) -->
<FeedbackTracker
  adapter="webhook"
  endpoint="https://discord.com/api/webhooks/..."
  data-format="discord"
/>