feedinbox

v1.0.4

Published

a month ago

React SDK for Feedinbox - Collect user feedback with a beautiful widget

0High
0Medium
0Low

ashwaniverma

feedback widget react feedinbox user-feedback

Feedinbox React SDK

A beautiful, customizable feedback widget for React applications. Collect user feedback effortlessly with a sleek modal that integrates seamlessly into your app.

Features

🎨 Customizable - Colors, position, and appearance via dashboard
📱 Responsive - Works on all screen sizes
⚡ Lightweight - Minimal bundle size
🔒 TypeScript - Full type support included
🎯 Categories - Bug reports, feature requests, questions, general feedback

Installation

# npm
npm install feedinbox

# yarn
yarn add feedinbox

# pnpm
pnpm add feedinbox

# bun
bun add feedinbox

Quick Start

1. Get Your Project Key

Sign up at feedinbox.com
Create a new project
Copy your Project Key from the project settings

2. Add the Component

import { Feedinbox } from 'feedinbox';

function App() {
  return (
    <div>
      <h1>My App</h1>
      
      {/* Add the Feedinbox component */}
      <Feedinbox projectKey="your-project-key" />
    </div>
  );
}

export default App;

That's it! A feedback button will appear in the bottom-right corner of your app.

Usage Examples

Basic Usage

import { Feedinbox } from 'feedinbox';

function App() {
  return <Feedinbox projectKey="your-project-key" />;
}

With Custom Trigger Button

Use your own button or element to open the feedback modal:

import { Feedinbox } from 'feedinbox';

function App() {
  return (
    <Feedinbox 
      projectKey="your-project-key"
      trigger={
        <button className="my-custom-button">
          Give Feedback
        </button>
      }
    />
  );
}

With Callbacks

Handle submission success and errors:

import { Feedinbox } from 'feedinbox';

function App() {
  return (
    <Feedinbox 
      projectKey="your-project-key"
      onSubmit={(data) => {
        console.log('Feedback submitted:', data);
        // { message: "...", category: "bug", userEmail: "..." }
      }}
      onError={(error) => {
        console.error('Error submitting feedback:', error);
      }}
    />
  );
}

Next.js App Router

For Next.js 13+ with App Router, you can use it in any client component:

'use client';

import { Feedinbox } from 'feedinbox';

export default function FeedbackWidget() {
  return <Feedinbox projectKey="your-project-key" />;
}

Then import it in your layout or page:

// app/layout.tsx
import FeedbackWidget from './FeedbackWidget';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <FeedbackWidget />
      </body>
    </html>
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | projectKey | string | ✅ | Your Feedinbox project key | | apiUrl | string | ❌ | Custom API URL (default: https://feedinbox.com) | | trigger | ReactNode | ❌ | Custom trigger element to open the widget | | onSubmit | (data: FeedbackData) => void | ❌ | Callback when feedback is submitted | | onError | (error: Error) => void | ❌ | Callback when an error occurs |

FeedbackData Type

interface FeedbackData {
  message: string;
  category: 'general' | 'bug' | 'feature' | 'question';
  userEmail?: string;
}

Customization

All widget customization is done via the Feedinbox Dashboard:

Primary Color - Widget accent color
Position - bottom-right, bottom-left, top-right, top-left
Border Radius - Roundness of the widget
Header Text - Custom title for the widget
Show Email Field - Toggle email input visibility
Hide Branding - Remove "Powered by Feedinbox" (Pro feature)

Changes made in the dashboard are automatically reflected in your widget.

Requirements

React 17.0.0 or higher
React DOM 17.0.0 or higher