@inov-ai/feedback-widget
Version:
Modern React feedback widget with surveys, analytics, and Next.js 15 support. Collect user feedback and run surveys in your SaaS applications.
168 lines (135 loc) • 3.71 kB
Markdown
# Getting Started with -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 -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 '-ai/feedback-widget';
function App() {
return (
<div>
{/* Your existing app content */}
<h1>My App</h1>
{/* Add the feedback widget */}
<InovaiWidget
siteKey="your-site-key-here"
primaryColor="#f97316"
position="bottom-right"
buttonText="Feedback"
buttonIcon="💬"
theme="auto"
paths={["/", "/dashboard", "/app"]}
onSubmit={(data) => {
console.log('Feedback received:', data);
}}
/>
</div>
);
}
```
## 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
<InovaiWidget siteKey="your-key" />
// Show only on specific pages
<InovaiWidget
siteKey="your-key"
paths={["/", "/dashboard", "/settings"]}
/>
// Show on all dashboard routes
<InovaiWidget
siteKey="your-key"
paths={["/dashboard*"]}
/>
```
## 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
<InovaiWidget siteKey="your-site-key" />
```
### Full-Featured Setup
```jsx
<InovaiWidget
siteKey="your-site-key"
primaryColor="#f97316"
fontFamily="Inter, system-ui, -apple-system, sans-serif"
fontSize="16px"
buttonRadius="8px"
position="bottom-right"
buttonText="Feedback"
buttonIcon="💬"
theme="auto"
animation="slide"
trigger="manual"
triggerDelay={0}
surveyFrequency="every-visit"
minimized={false}
feedbackTypes={["Bug", "Feature", "Suggestion", "Question"]}
paths={["/", "/dashboard", "/feedback", "/analytics"]}
onSubmit={(data) => {
console.log('Feedback submitted:', data);
}}
onError={(error) => {
console.error('Widget error:', error);
}}
/>
```
### Next.js App Router
```jsx
// app/layout.tsx
import { InovaiWidget } from '-ai/feedback-widget';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<InovaiWidget
siteKey={process.env.NEXT_PUBLIC_FEEDBACK_SITE_KEY}
theme="auto"
/>
</body>
</html>
);
}
```
## 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
<InovaiWidget
siteKey={process.env.NEXT_PUBLIC_FEEDBACK_SITE_KEY} // Next.js
// OR
siteKey={process.env.REACT_APP_FEEDBACK_SITE_KEY} // Create React App
/>
```
## 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-ai.tech)