dev-feedback-banner

Simple feedback widget in the form of a banner. Let's testers and limited users annotate screenshots of issues and submit via simple email or API. The intention is lightweight alpha/beta testing feature branch testing.

Features

• Sticky ribbon with customizable location
• Built in optional screenshot captures
• Some canvas annotation tools (drawing, text, highlight)
• Customizable form fields
• Email integration
• API integration
• Customizable keyboard shortcuts to trigger

Getting started

npm i @skorm11x/dev-feedback-banner

import { FeedbackProvider, type FeedbackConfig } from '@skorm11x/dev-feedback-banner';

const emailConfig: FeedbackConfig = {
    position: 'top-left',
    primaryColor: '#10b981',
    submissionEndpoint: 'mailto:[email protected]',
    fields: [
      { id: 'type', label: 'Issue Type', type: 'select', options: ['Bug', 'UI', 'Feature'], required: true },
      { id: 'msg', label: 'Message', type: 'textarea', required: true }
    ],
    onSubmit: async (payload: FeedbackPayload) => {
      const subject = encodeURIComponent(`[Feedback] ${payload.formData.type}`);
      const body = encodeURIComponent([
        `Type: ${payload.formData.type}`,
        `Message: ${payload.formData.msg}`,
      ].join('\n'));
      
      window.location.href = `mailto:[email protected]?subject=${subject}&body=${body}`;
      return new Promise(res => setTimeout(res, 500));
    }
  };

function App() {
  return (
    <FeedbackProvider config={emailConfig}>
      <div>Your app content</div>
    </FeedbackProvider>
  );
}

Check out the example under /example.

Credits

• MUI
• html2canvas
• tsup