How to Set Up User Feedback Collection in 5 Minutes (Step-by-Step)

You can set up user feedback collection in under 5 minutes. Add one script tag to your site, configure your API key, and start receiving feedback immediately. No complex integrations. No heavy dependencies. No 47-tab spreadsheet required.

This guide walks you through every step - from creating your account to viewing your first piece of feedback. We'll cover CDN installation, npm packages, and framework-specific examples for React and Vue.

---

TL;DR

• Time required: 5 minutes (seriously)
• SDK size: Under 40KB gzipped - smaller than most hero images
• Integration method: Single script tag or npm package
• What you'll have: A working feedback widget that captures emoji ratings, comments, email, and page context automatically
• What you won't need: Build configuration, complex setup wizards, or a PhD in feedback tooling

---

What You'll Need (Prerequisites)

Before we start, here's what you need:

1. A website or web app - Can be localhost, staging, or production
2. 5 minutes - That's the whole point
3. A FeedSense account - free tier included (100 feedback items/month, no credit card required)

That's it. If you've got a website and a few minutes, you're ready.

What You Don't Need

• npm/yarn (optional - CDN works fine)
• Build tools or bundlers
• Backend changes
• DevOps approval

---

Step 1: Create Your Account

Time: 1 minute

Head to feedsense.co and click "Get Started."

1. Sign up with your email or GitHub account
2. Create a project - Give it a name (e.g., "My App Feedback")
3. Copy your API key - You'll find it in your project settings

Your API key is a long random string — treat it like a password.

Keep this tab open - you'll need the key in the next step.

A Note on API Keys

Your API key is safe to include in client-side code. It's designed to be public-facing and only allows feedback submission to your specific project. The key cannot read, modify, or delete existing feedback.

---

Step 2: Install the Widget

Time: 2 minutes

You've got two options: CDN (fastest) or npm (for package management).

Option A: CDN Installation (Recommended for Quick Setup)

Add this single line before your closing </body> tag:

<script
  src="https://unpkg.com/@feedsense/sdk@latest/dist/index.umd.js"
  data-feedsense-api-key="YOUR_API_KEY_HERE"
></script>

Replace YOUR_API_KEY_HERE with your actual API key. Done.

The widget appears automatically as a "Feedback" tab on the right edge of the page.

Option B: npm Installation

If you prefer package management:

npm install @feedsense/sdk

Or with yarn:

yarn add @feedsense/sdk

Then initialize in your app's entry point:

import FeedSense from '@feedsense/sdk';

FeedSense.init({
    apiKey: 'YOUR_API_KEY_HERE'
});

Where to Place the Code

• Static HTML sites: Before </body> in your main HTML file
• Single Page Apps: In your root component or entry file
• WordPress: In your theme's footer or via a plugin
• Next.js/Nuxt: In your _app.js or layout component

The script loads asynchronously, so it won't block your page rendering. According to web.dev's Core Web Vitals research, each third-party script can add latency - but at under 40KB gzipped and async loading, FeedSense has no measurable impact on your metrics.

---

Step 3: Customize Your Widget

Time: 1 minute

The default settings work out of the box. FeedSense uses a clean, right-edge tab design that blends with any site. Here's what you can configure:

Configuration Options

FeedSense.init({
  apiKey: 'YOUR_API_KEY_HERE',
  apiUrl: 'https://api.feedsense.co',  // Optional — defaults to FeedSense API
  onSubmit: (data) => {                 // Optional — callback after submission
    console.log('Feedback submitted:', data);
  },
  onError: (error) => {                 // Optional — callback on error
    console.error('Feedback error:', error);
  },
});

Option	Type	Description
apiKey	string	Required. Your project API key from the dashboard
apiUrl	string	Optional. API endpoint URL — only change for self-hosted setups
onSubmit	function	Optional. Called after successful feedback submission
onError	function	Optional. Called when submission fails — defaults to an alert

How the Widget Works

The widget appears as a vertical "Feedback" tab on the right edge of the page. When users click it, a clean 3-step form slides out:

1. Rating — Emoji-based rating (1-5 scale)
2. Comment — Optional text feedback (up to 500 characters)
3. Email — Optional email for follow-up

After submission, the widget shows a thank-you confirmation and closes automatically. If you plan to run dedicated NPS, CSAT, or CES surveys alongside the widget, spend a few minutes on how to write survey questions before you send anything — bad wording is the top reason response rates collapse. And once submissions start coming in, sanity-check your numbers against the feedback response rate benchmarks by channel and industry — a passive widget at 3-8% is healthy, but the same percentage on an in-app prompt usually means something is broken.

---

Step 4: Test It

Time: 30 seconds

Refresh your page. You should see a vertical "Feedback" tab on the right edge of the page.

Quick Test Checklist

1. Click the button - The feedback form should open
2. Submit test feedback - Select a rating and add a comment
3. Check for errors - Open browser DevTools (F12) and look for console errors
4. Verify submission - You should see a success message

What to Look For

• Widget tab appears on the right edge of the page
• Clicking the tab opens the feedback form smoothly
• Form steps (rating → comment → email) transition without lag
• Submission completes without errors

If something's wrong, jump to the Troubleshooting section below.

---

Step 5: View Your First Feedback

Time: 30 seconds

Go back to your FeedSense dashboard. Your test feedback should appear within seconds.

What You'll See

Each feedback submission includes:

• Rating - Emoji-based score (1-5) the user selected
• Comment - Their written feedback (up to 500 characters)
• Email - If the user chose to provide it
• Page URL - Where they submitted from
• Browser/Device - User agent, viewport size, language, timezone
• Timestamp - When they submitted
• Referrer - Where they came from

AI Categorization

FeedSense automatically categorizes feedback with over 85% accuracy. You'll see labels like:

• Bug - Something's broken
• Feature Request - They want something new
• Question - They need help
• Praise - They're happy (nice to see)

You can adjust categories manually if the AI gets it wrong. For a deeper understanding of how feedback analysis works, check out our complete guide to feedback analysis.

---

Framework-Specific Guides

React / Next.js

Create a reusable component:

// components/FeedSenseProvider.jsx
'use client';

import { useEffect, useRef } from 'react';

export function FeedSenseProvider({ children }) {
  const initialized = useRef(false);

  useEffect(() => {
    if (initialized.current) return;

    const initSDK = async () => {
      const FeedSense = await import('@feedsense/sdk');
      await FeedSense.init({
        apiKey: process.env.NEXT_PUBLIC_FEEDSENSE_API_KEY,
      });
      initialized.current = true;
    };

    initSDK().catch(console.error);

    return () => {
      if (initialized.current) {
        import('@feedsense/sdk').then(sdk => sdk.destroy());
        initialized.current = false;
      }
    };
  }, []);

  return children;
}

Add it to your layout:

// app/layout.jsx
import { FeedSenseProvider } from '@/components/FeedSenseProvider';

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

Don't forget to add your API key to .env.local:

NEXT_PUBLIC_FEEDSENSE_API_KEY=your_api_key_here

Vue.js / Nuxt

Create a composable:

// composables/useFeedSense.js
import { ref } from 'vue';

export function useFeedSense() {
  const isLoaded = ref(false);

  const loadFeedSense = async () => {
    if (isLoaded.value) return;

    const FeedSense = await import('@feedsense/sdk');
    await FeedSense.init({
      apiKey: import.meta.env.VITE_FEEDSENSE_API_KEY,
    });
    isLoaded.value = true;
  };

  const destroyFeedSense = async () => {
    if (!isLoaded.value) return;
    const FeedSense = await import('@feedsense/sdk');
    FeedSense.destroy();
    isLoaded.value = false;
  };

  return { loadFeedSense, destroyFeedSense, isLoaded };
}

Use in your App.vue:

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useFeedSense } from '@/composables/useFeedSense';

const { loadFeedSense, destroyFeedSense } = useFeedSense();

onMounted(() => {
  loadFeedSense();
});

onUnmounted(() => {
  destroyFeedSense();
});
</script>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

Vanilla JavaScript (No Framework)

The simplest approach - just add to your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <!-- Your content -->

  <!-- FeedSense Widget -->
  <script src="https://unpkg.com/@feedsense/sdk@latest/dist/index.umd.js"></script>
  <script>
    FeedSense.init({
      apiKey: 'YOUR_API_KEY_HERE'
    });
  </script>
</body>
</html>

---

Troubleshooting Common Issues

Widget Not Appearing

Check the basics first:

1. Is the script tag present? View page source and search for "feedsense"
2. Is your API key correct? No extra spaces or quotes
3. Check the browser console for errors (F12 > Console)

Common causes:

• Script blocked by ad blocker - add feedsense.co to allowlist
• API key doesn't match the project
• CSS is hiding it - check for z-index conflicts

"Invalid API Key" Error

Your API key might be:

• From a different project
• Copied with extra whitespace
• Using a revoked key

Go to your FeedSense dashboard and copy the key again.

Widget Appears but Submissions Fail

Check your browser's Network tab (F12 > Network). Look for failed requests to api.feedsense.co.

Common causes:

• No internet connection (obvious but worth checking)
• API key has been revoked
• Rate limiting (too many submissions too fast)

Content Security Policy (CSP) Issues

If you have a strict CSP, add these directives:

script-src 'self' https://unpkg.com;
connect-src 'self' https://api.feedsense.co;

CORS Errors

The FeedSense API handles CORS automatically. If you see CORS errors, you might be:

• Calling the API directly instead of using the SDK
• Using a proxy that strips CORS headers

Use the official SDK - it handles everything.

Mobile Display Issues

The widget is mobile-responsive by default. If it's not displaying correctly:

• Check for viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
• Look for CSS that might be overriding widget styles
• Test in actual mobile device, not just browser dev tools

---

Frequently Asked Questions

How long does it really take to set up feedback collection?

Most developers complete the basic setup in under 5 minutes. Add a single script tag with your API key and the widget works immediately. Framework integrations (React, Vue) take a few extra minutes but nothing complex.

Do I need coding experience to install the widget?

Not much. If you can copy-paste a script tag into HTML, you can install FeedSense. The CDN method requires zero build configuration. For React/Vue apps, you'll need basic familiarity with components.

Will the feedback widget slow down my website?

No. The SDK is under 40KB gzipped and loads asynchronously. It has no measurable impact on Core Web Vitals. For comparison, a typical hero image is 50-200KB.

Can I customize how the widget looks?

The widget uses a clean, modern design that blends with any site. You can hook into submission events with onSubmit and onError callbacks. The widget appears as a sleek tab on the right edge of the page — designed to be noticeable but not intrusive.

Does FeedSense work with React, Vue, and other frameworks?

Yes. Works with React, Next.js, Vue, Nuxt, Angular, Svelte, and any JavaScript framework. Also works with static HTML sites and no-code platforms that allow custom scripts.

How do I test if the widget is working correctly?

After adding the script, refresh your page and look for the "Feedback" tab on the right edge. Click it, submit test feedback, then check your FeedSense dashboard. The feedback should appear within seconds.

What data does the widget collect automatically?

Each submission captures: the emoji rating (1-5), comment, page URL, browser user agent, viewport size, language, timezone, referrer, and timestamp. Email is only captured if the user enters it in the optional email step.

Can I collect feedback from mobile users?

Absolutely. The widget is fully responsive and works on all screen sizes. Mobile users can submit feedback just as easily as desktop users.

Do I need to configure CORS or CSP?

Usually no. The SDK handles CORS automatically. If you have a strict Content Security Policy, you'll need to allowlist unpkg.com and api.feedsense.co. Most sites work without any changes.

What happens to feedback after users submit it?

Feedback goes to your FeedSense dashboard where it's automatically categorized by AI (bug, feature request, question, praise) with over 85% accuracy. You can filter, search, and export feedback anytime. Once you have feedback, learn how to get more users to respond to maximize your insights.

---

Start Collecting Feedback Now

You've got the guide. You've got the code examples. Now it's time to actually do it.

Once you're collecting feedback, you'll want a system to turn it into product decisions. Check out our Founder's Playbook for a complete framework from collection to roadmap.

According to Atlassian's 2024 Developer Experience Report, developers lose an average of 8+ hours weekly to inefficiencies. Don't let feedback collection become another time sink.

Here's your next step: Go to feedsense.co/pricing and create your free account. Explore our features to see how FeedSense handles feedback collection, AI analysis, and insights. You'll be collecting feedback in 5 minutes - probably less time than it took to read this guide.

Free tier: 100 feedback items/month, no credit card required. No complex setup. Just feedback from your actual users.

Start free with FeedSense

---