@metricshift/react

The intelligent feedback SDK for React applications. Collect, store, and analyze user feedback with built-in AI insights — in minutes, not weeks.

✨ Features

• 🚀 2-Minute Setup - Add powerful feedback collection to your React app instantly
• 🎨 Fully Customizable - Match your brand with custom colors, sizes, and styles
• 🤖 AI-Powered Insights - Automatic sentiment analysis and theme detection with GPT-4
• 📊 Beautiful Dashboard - View trends, export data, and discover insights
• ♿ Accessible - WCAG compliant with keyboard navigation and ARIA labels
• 📱 Mobile-Ready - Perfect experience on any device
• 🔒 Privacy-First - GDPR compliant, you control your data
• 🎯 TypeScript - Full type safety included

📦 Installation

npm install @metricshift/react

or

yarn add @metricshift/react

🚀 Quick Start

1. Sign up for MetricShift

Create your free account at metricshift.co to get your credentials.

2. Add the Feedback Button

import { FeedbackButton } from '@metricshift/react';

function App() {
  return (
    <div>
      <h1>My Awesome App</h1>
      
      {/* Feedback button in bottom-right corner */}
      <FeedbackButton
        projectId="your-project-id"
        apiKey="your-api-key"
      />
    </div>
  );
}

3. View Feedback & Insights

Log in to your [MetricShift dashboard] to:

• View all feedback in real-time
• See AI-generated sentiment analysis
• Discover common themes automatically
• Export data to CSV
• Track trends over time

That's it! 🎉

📚 Usage Examples

Default Floating Button

<FeedbackButton
  projectId="your-project-id"
  apiKey="your-api-key"
/>

Perfect for most apps - floats in the bottom-right corner.

Custom Styled Button

<FeedbackButton
  projectId="your-project-id"
  apiKey="your-api-key"
  buttonText="Share Feedback"
  buttonColor="#10b981"
  buttonHoverColor="#059669"
  size="large"
  position="bottom-left"
/>

Match your brand colors and position.

Inline Button

<FeedbackButton
  projectId="your-project-id"
  apiKey="your-api-key"
  position="inline"
  buttonText="Help us improve"
  showIcon={false}
/>

Perfect for embedding in your UI, forms, or settings pages.

With Event Callbacks

<FeedbackButton
  projectId="your-project-id"
  apiKey="your-api-key"
  onSuccess={(feedbackId) => {
    // Track in your analytics
    analytics.track('Feedback Submitted', { feedbackId });
    // Show thank you message
    toast.success('Thanks for your feedback!');
  }}
  onError={(error) => {
    // Handle errors gracefully
    console.error('Feedback error:', error);
  }}
/>

Integrate with your existing analytics and notification systems.

Multiple Feedback Buttons

function App() {
  return (
    <div>
      {/* Bug report button in header */}
      <header>
        <FeedbackButton
          projectId="your-project-id"
          apiKey="your-api-key"
          position="inline"
          buttonText="Report Bug"
          buttonColor="#ef4444"
          size="small"
        />
      </header>
      
      {/* General feedback floating button */}
      <FeedbackButton
        projectId="your-project-id"
        apiKey="your-api-key"
        position="bottom-right"
      />
    </div>
  );
}

🎛️ Props Reference

| Prop | Type | Default | Description | |------|------|---------|-------------| | projectId | string | required | Your MetricShift project ID | | apiKey | string | required | Your MetricShift API key | | apiUrl | string | 'https://api.metricshift.co' | API endpoint (rarely needs changing) | | buttonText | string | 'Feedback' | Text displayed on the button | | showIcon | boolean | true | Show/hide the 💬 icon | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'inline' | 'bottom-right' | Button position | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | buttonColor | string | '#3b82f6' | Button background color | | buttonHoverColor | string | '#2563eb' | Hover state color | | buttonTextColor | string | '#ffffff' | Text color | | customStyles | CSSProperties | {} | Additional CSS styles | | customClassName | string | '' | Custom CSS class | | disabled | boolean | false | Disable the button | | autoOpen | boolean | false | Auto-open modal on mount | | onOpen | () => void | - | Callback when modal opens | | onClose | () => void | - | Callback when modal closes | | onSuccess | (feedbackId: string) => void | - | Callback on successful submission | | onError | (error: Error) => void | - | Callback on error |

🎨 Styling Examples

Match Your Brand

<FeedbackButton
  projectId="your-project-id"
  apiKey="your-api-key"
  buttonColor="#FF6B6B"  // Your primary color
  buttonHoverColor="#EE5A52"  // Slightly darker
  buttonTextColor="#FFFFFF"
  customStyles={{
    fontFamily: 'YourCustomFont, sans-serif',
    borderRadius: '12px',
    boxShadow: '0 4px 12px rgba(255, 107, 107, 0.3)'
  }}
/>

Minimal Style

<FeedbackButton
  projectId="your-project-id"
  apiKey="your-api-key"
  showIcon={false}
  buttonColor="transparent"
  buttonHoverColor="#f3f4f6"
  buttonTextColor="#111827"
  customStyles={{
    border: '1px solid #e5e7eb',
    fontWeight: '400'
  }}
/>

Pill Shape

<FeedbackButton
  projectId="your-project-id"
  apiKey="your-api-key"
  customStyles={{
    borderRadius: '999px',
    padding: '12px 24px'
  }}
/>

📊 Dashboard Features

Your MetricShift dashboard includes:

• Real-time Feedback Stream - See submissions as they happen
• AI Sentiment Analysis - Automatic positive/neutral/negative classification
• Theme Detection - GPT-4 identifies common topics and patterns
• Advanced Filters - Filter by type, sentiment, date, rating
• Export to CSV - Download your data anytime
• Analytics & Trends - Visualize feedback over time
• Search - Find specific feedback instantly

View Dashboard →

💼 Pricing

• Free - 100 feedback submissions/month
• Pro - Starting at €19/month for growing teams
• Enterprise - Custom solutions, self-hosted options available

View pricing →

🔧 TypeScript Support

Full TypeScript definitions included! Get autocomplete and type safety:

import { FeedbackButton, FeedbackButtonProps } from '@metricshift/react';

const props: FeedbackButtonProps = {
  projectId: 'abc123',
  apiKey: 'xyz789',
  onSuccess: (id: string) => console.log(id)
};

<FeedbackButton {...props} />

🌍 Framework Support

Works with any React framework:

• ✅ Create React App
• ✅ Next.js (App Router & Pages Router)
• ✅ Vite
• ✅ Remix
• ✅ Gatsby

❓ FAQ

Can I customize the feedback form?

The form fields are standardized to ensure quality data collection and AI analysis. However, you can customize:

• Button appearance and position
• Colors and styling
• Form behavior via callbacks

Where is my data stored?

Data is securely stored on MetricShift's cloud infrastructure with regular backups. Enterprise customers can request self-hosted deployments.

Is this GDPR compliant?

Yes! MetricShift is GDPR compliant. Email collection is optional, and users can request data deletion at any time.

Can I use this with multiple projects?

Yes! Each project gets its own projectId and apiKey. Install the SDK in each project and use different credentials.

What's included in the free tier?

• 100 feedback submissions per month
• AI sentiment analysis
• Theme detection
• Full dashboard access
• CSV export

🤝 Support & Resources

• 📧 Email: [email protected]
• 📖 Documentation: docs.metricshift.co
• 🐛 Issues: Report bugs via email
• 🌐 Website: metricshift.co

🚀 What's Next?

After installing the SDK:

1. Customize the button to match your brand
2. Test it out by submitting feedback
3. Explore your dashboard to see AI insights
4. Set up notifications to get alerts for new feedback
5. Export data and integrate with your workflow

📝 License

MIT © MetricShift

Built with ❤️ for product teams who care about their users

Get Started Free