@goforindu/feedback-widget

A floating feedback widget for React/Next.js projects with emoji rating support. Fully customizable and easy to integrate.

Features

• Floating button opens a feedback modal
• Emoji rating selection
• Customizable button text, colors, modal title, and textarea placeholder
• Callback on submit to get feedback and rating
• Lightweight, responsive, and beginner-friendly

Installation

Using NPM:

npm install @goforindu/feedback-widget

Using Yarn:

yarn add @goforindu/feedback-widget

Usage

import React from "react";
import FeedbackWidget from "@goforindu/feedback-widget";

function App() {
  const handleFeedback = (data) => {
    console.log("User feedback:", data);
  };

  return (
    <div>
      <h1>Demo App</h1>
      <FeedbackWidget
        buttonText="📝"
        buttonColor="#ff6347" // Tomato
        buttonHoverColor="#e5533d" // Darker tomato
        textColor="#fff"
        title="Share your thoughts!"
        placeholder="Type something..."
        cancelText="No Thanks"
        cancelColor="#999"
        cancelHoverColor="#777"
        submitText="Send"
        modalBackground="#f0f8ff" // AliceBlue
        modalTextColor="#333"
        onSubmit={(data) => console.log(data)}
      />
    </div>
  );
}

export default App;

| Prop Name | Type | Default | Description | | ------------- | -------- | ------------------------------- | --------------------------------------------- | | buttonText | string | "💬" | Text or emoji on the floating button | | buttonColor | string | "purple" | Background color of the floating button | | textColor | string | "white" | Text color of the button | | title | string | "We value your feedback" | Title displayed in the feedback modal | | placeholder | string | "Write your feedback here..." | Placeholder for the textarea | | onSubmit | function | undefined | Callback triggered when feedback is submitted |

Output Example

{
  feedback: "Great app! Really easy to use.",
  rating: 4
}