@metricshift/react

The intelligent feedback widget for React applications. Collect, analyze, and act on user feedback with AI-powered insights — in minutes, not weeks.

MetricShift gives you a drop-in feedback experience that feels native to your product, while quietly powering a structured analytics pipeline behind the scenes.

You can fully customize the widget — including rich media like avatars and images — so it feels truly brand-specific, not like a generic feedback tool.

✨ Features

🚀 2-Minute Setup — Drop-in widget with modal + backend wired automatically

🎨 Deep Customization — Colors, variants, avatars, images, inline placement

🖼️ Rich Media Support — Add personal avatars or branded visuals to the widget

🤖 AI-Powered Analysis — Sentiment detection, themes, summaries

📊 Analytics-Ready — Widget events can be streamed into your analytics stack

🔒 Safe by Design — Domain restrictions + rate limiting built in

♿ Accessible — WCAG-friendly, keyboard & screen-reader support

📱 Mobile-First — Works beautifully on all screen sizes

🧩 TypeScript Ready — Full types & IntelliSense

📦 Installation npm install @metricshift/react

or

yarn add @metricshift/react

🚀 Quick Start

1. Create a MetricShift project

Get your Project ID and API key from 👉 https://metricshift.co

2. Add the feedback widget import { FeedbackButton } from '@metricshift/react';

function App() { return ( My App

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

); }

3. View feedback & AI insights

Open your MetricShift dashboard to explore:

Real-time feedback

AI sentiment & themes

Filters, exports, trends

Project-level analytics

That’s it 🎉

🧠 Security note (important)

It is safe to use projectId and apiKey in the frontend.

MetricShift protects your widget with:

Domain allow-listing (fully configurable in the dashboard)

Rate limiting to prevent abuse or hijacking

Project-scoped keys (no cross-project access)

If you prefer, you can still proxy keys via your backend — but for most use cases, frontend usage is perfectly fine.

📚 Usage Examples ⭐ Default Floating Button

Clean, neutral pill — bottom-right by default.

🖼️ Custom Styled Button with Image / Avatar

Use rich media to make the widget feel personal and brand-specific.

<FeedbackButton projectId={projectId} apiKey={apiKey} apiUrl={apiUrl} position="inline"

buttonText="Image" subtitleText="And subtitle"

buttonTextColor="#000000"

avatarSrc="/niklasAvatar.png" avatarAlt="MetricShift Support" avatarSize={44} />

Perfect for:

Founder-led products

Customer success flows

Onboarding & support touchpoints

🎨 Brand-Themed Button

Variants:

solid — strong CTA

outline — default

ghost — minimal

🧬 Inline Button (Embed Anywhere)

Ideal for settings pages, dashboards, forms.

🔧 Event Callbacks & Analytics

Callbacks let you connect widget events to your own analytics or product logic.

Think:

Tracking feedback submissions in GA / Segment / PostHog

Triggering in-app messages

Logging events internally

<FeedbackButton projectId={projectId} apiKey={apiKey} onOpen={() => analytics.track('feedback_opened')} onSuccess={(id) => analytics.track('feedback_submitted', { id })} onError={(err) => console.error(err)} />

This turns the widget into a first-class analytics signal, not just a UI element.

🔧 Why callbacks matter

MetricShift callbacks turn the feedback widget into a first-class analytics signal — not just a UI element.

Every meaningful interaction inside the widget can be connected to your existing tools and workflows.

Think of callbacks as hooks into user intent.

Common use cases

Track feedback opens & submissions in GA, Segment, PostHog, etc.

Correlate feedback with feature usage or experiments

Trigger UX responses (toasts, modals, follow-ups)

Log feedback IDs for later investigation or support workflows

Example <FeedbackButton projectId={projectId} apiKey={apiKey} onOpen={() => analytics.track('feedback_opened')} onClose={() => analytics.track('feedback_closed')} onSuccess={(id) => analytics.track('feedback_submitted', { feedbackId: id }) } onError={(err) => analytics.track('feedback_error', { message: err.message }) } />

Instead of treating feedback as something you “look at later”, callbacks let you:

Act on feedback at the moment intent happens.

🧩 Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | projectId | string | required | MetricShift project ID | | apiKey | string | required | Project API key | | apiUrl | string | https://metricshift-sdk-be-production.up.railway.app | MetricShift API backend endpoint | | buttonText | string | Feedback | Main label | | subtitleText | string | undefined | Optional second line | | avatarSrc | string | undefined | Avatar / image URL | | avatarAlt | string | '' | Accessible alt text | | avatarSize | number | 40 | Avatar diameter (px) | | variant | 'solid' \| 'outline' \| 'ghost' | 'outline' | Visual style | | accentColor | string | '#111827' | Brand accent color | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'inline' | 'bottom-right' | Widget placement | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | customStyles | CSSProperties | {} | Inline style overrides | | customClassName | string | '' | Custom CSS class | | onOpen | () => void | — | Fired when modal opens | | onClose | () => void | — | Fired when modal closes | | onSuccess | (id: string) => void | — | Fired on successful submission | | onError | (error: Error) => void | — | Fired on submission error |

📊 Dashboard

Your MetricShift dashboard includes:

Real-time feedback stream

AI sentiment & theme clustering

Search, filters & CSV export

Project-level configuration

Domain restrictions & rate limits

👉 https://metricshift.co

💼 Pricing

Free

MetricShift starts free. For full plan details, limits, and AI token allowances, see:

👉 https://metricshift.co

❓ FAQ Can I customize the feedback form?

Yes. The free plan includes a powerful “jack-of-all-trades” feedback template that works across most product use cases.

We also support fully tailor-made templates that can be integrated directly into the widget. More templates and use-case-specific flows will be added as the platform evolves.

Can I use this with multiple projects or websites?

Yes, absolutely.

You can self-manage which domains and websites the widget runs on directly from the dashboard.

What’s included in the free tier?

The free plan includes:

Feedback collection

Dashboard access

AI-powered analysis

A generous monthly allowance of AI tokens to analyze your data

For up-to-date details, see: 👉 https://metricshift.co

📖 Documentation

All documentation and updates live at: 👉 https://metricshift.co

📝 License

MIT © MetricShift

Built with ❤️ for teams who care about their users. Start free → https://metricshift.co/