Quick Start
5 minutes to production

Get Started in 5 Minutes

This guide will get you up and running with FeedbackKit in just a few minutes. You'll have a working feedback widget integrated into your app.

Progress: 0 of 5 steps completed

Follow along and check off each step as you complete it

1

Create Your Account

Sign up for free and get instant access to all APIs

30 seconds
2

Get Your API Key

Generate your first API key from the dashboard

30 seconds
3

Install the Widget

Add FeedbackKit to your project with one command

10 seconds
4

Add Your First Widget

Drop in a feedback widget and customize it

2 minutes
5

Test the Integration

Try the feedback overlay and see it in action

1 minute
1

Create Your Account

Sign up for a free FeedbackKit account to get access to all APIs and your dashboard.

2

Get Your API Key

Once you're logged in, navigate to the API Keys section in your dashboard to generate your first key.

feedbackkit_sk_test_••••••••••••••••••••••••••••••••
3

Install the Widget

Install the FeedbackKit widget package in your project:

Terminalbash
npm install @feedbackkit/widget
4

Add Your First Widget

Import and use the FeedbackWidget component in your application:

components/FeedbackWidget.jsxjavascript
import { FeedbackWidget } from '@feedbackkit/widget';

export default function MyApp() {
  return (
    <div>
      <h1>My Website</h1>
      <FeedbackWidget 
        apiKey="your-api-key"
        appName="My App"
        trigger="floating"
        position="bottom-right"
        onSuccess={() => {
          console.log('Feedback submitted!');
        }}
      />
    </div>
  );
}
5

Test the Integration

Your feedback widget will appear as a floating button. Users can click it to enter feedback mode and annotate your interface.

Interactive Feedback Mode

Users can click, draw, highlight, and annotate elements on your website

Auto-capture screenshots with context

🎉 Congratulations!

You've successfully integrated your first FeedbackKit widget! Here's what you can do next: