# Getting Started with @inov-ai/feedback-widget
This guide will help you integrate the feedback widget into your React application in just a few minutes.
## Step 1: Install the Package
```bash
npm install @inov-ai/feedback-widget
```
## Step 2: Get Your Site Key
1. Sign up at [inov-ai.tech](https://inov-ai.tech)
2. Create a new site in your dashboard
3. Copy your site key (looks like `site_abc123xyz`)
## Step 3: Add the Widget
Add this to your main App component or layout:
```jsx
import { InovaiWidget } from '@inov-ai/feedback-widget';
function App() {
return (
{/* Your existing app content */}
My App
{/* Add the feedback widget */}
{
console.log('Feedback received:', data);
}}
/>
);
}
```
## Step 4: Test the Widget
1. Start your development server
2. Look for the feedback button in the bottom-right corner
3. Click it to test the feedback form
4. Submit some test feedback
## Step 5: Configure Paths (Optional)
Control where the widget appears:
```jsx
// Show on all pages
// Show only on specific pages
// Show on all dashboard routes
```
## Step 6: Add Surveys (Optional)
1. Go to your inov-ai dashboard
2. Create a survey for your site
3. Make sure it's marked as "Active"
4. The widget will automatically show the survey tab
## Common Configurations
### Minimal Setup
```jsx
```
### Full-Featured Setup
```jsx
{
console.log('Feedback submitted:', data);
}}
onError={(error) => {
console.error('Widget error:', error);
}}
/>
```
### Next.js App Router
```jsx
// app/layout.tsx
import { InovaiWidget } from '@inov-ai/feedback-widget';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
## Environment Variables
For security, store your site key in environment variables:
```bash
# .env.local (Next.js) or .env (React)
NEXT_PUBLIC_FEEDBACK_SITE_KEY=site_abc123xyz
REACT_APP_FEEDBACK_SITE_KEY=site_abc123xyz
```
```jsx
```
## Next Steps
- Set up surveys in your inov-ai dashboard
- Configure webhook notifications for new feedback
- Integrate with your analytics system using the `onSubmit` callback
- Customize the styling to match your brand
## Need Help?
- 📖 [Full Documentation](../README.md)
- 💬 [Discord Community](https://discord.gg/inov-ai)
- 📧 [Email Support](mailto:support@inov-ai.tech)