Feedback Widget
Collect user feedback directly on your website with our customizable, lightweight widget. Easy to integrate, powerful to use.
Add the Widget
Copy and paste the widget code into your website.
Configure
Change colors, position, and options to match your brand.
Collect Feedback
Users fill out the widget and you get instant feedback.
Widget Features
Everything you need for seamless feedback collection and integration.
Easy Integration
Add our widget to your site with just a few lines of code.
Fully Customizable
Match your brand with custom colors, text, and positioning.
Secure & Private
Built with security and data privacy as top priorities.
Smart Triggers
Show the widget at the perfect moment based on user behavior.
Responsive Design
Works perfectly on all devices and screen sizes.
Multi-language
Support for multiple languages and localization.
Simple Integration
Add our feedback widget to your website in under 30 seconds.
Widget Installation
Fastest Way to Get Started
For React/Next.js projects, use our NPM package for the best developer experience with TypeScript support and seamless integration.
npm install @inov-ai/feedback-widget# Install the npm package (Recommended - fastest setup!)
npm install @inov-ai/feedback-widget
# Or with yarn:
yarn add @inov-ai/feedback-widget
# Or with pnpm:
pnpm add @inov-ai/feedback-widget
# Then use in your React/Next.js app:
import { InovaiWidget } from '@inov-ai/feedback-widget';
function App() {
return (
<div>
{/* Your app content */}
<h1>My SaaS Dashboard</h1>
{/* Feedback widget with full configuration */}
<InovaiWidget
siteKey="site_demo123"
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);
// Integrate with your analytics or logging system
}}
onError={(error) => {
console.error('Widget error:', error);
}}
/>
</div>
);
}
export default App;
# Benefits of using the npm package:
# ✅ TypeScript support with full type definitions
# ✅ React-native component integration
# ✅ SSR/SSG compatible (Next.js, Remix, etc.)
# ✅ Tree-shakable and optimized bundle
# ✅ No external script loading - better performance
# ✅ Full IDE autocomplete and IntelliSense
# ✅ Hot reloading support during development🚀 Quick Start Recommendations:
- React/Next.js projects: Use the NPM package for the best developer experience with TypeScript support
- HTML/Vanilla JS: Use the script tag method for quick integration
- Other frameworks: NPM package works with any React-compatible framework or use script tag
- The widget will automatically appear on your site after installation
- Customize the widget with the configuration options shown above