For Developers

Welcome to inov-ai's Developer Portal! This page provides everything you need to integrate inov-ai's Widget Service into your application. From setting up your widget endpoint to customizing appearance and behavior, you'll find step-by-step instructions and sample code to get started quickly.

Learn about the Feedback Widget

Explore the Customer Feedback Platform

Get Started in 30 Seconds

For React/Next.js projects, install our npm package for the fastest integration:

npm install @inov-ai/feedback-widget

Then import and use InovaiWidget as a React component with full TypeScript support!

What is an inov-ai Widget?

A widget allows you to collect real-time feedback from users on your website or application. Instead of building a custom feedback system, inov-ai will provide a pre-built, customizable widget that can be integrated with just a few lines of code.

Example feedback types include Feature requests, Bug reports, or General questions.

Add the Widget

Copy and paste the widget code into your website.

Configure

Change colors, position, and options to match your brand.

primaryColor="#f97316" position="bottom-right"

Collect Feedback

Users fill out the widget and you get instant feedback.

onSubmit={data => handleFeedback(data)}

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

Select Framework:

# 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

How it works

Register a widget

In your Inov-AI dashboard, go to Settings > Widgets (or the relevant section) and create a new widget.
Obtain your unique site key which will be used to identify your website.
Configure the appearance and behavior settings for your widget.

Install the widget

Add the widget script to your website's HTML, just before the closing </body> tag.
Customize the widget attributes to match your website's design and functionality needs.
Test the widget to ensure it's working correctly.

Collect feedback

Users can click on the widget button to open the feedback form.
Feedback is submitted and sent to your Inov-AI dashboard.
You can view, categorize, and respond to feedback from your dashboard.

Configuration Options

Customize the appearance and behavior of your widget by modifying the script attributes.

Position (data-position)

Control where the widget appears on your website.

Value	Description
bottom-right	Bottom right corner (default)
bottom-left	Bottom left corner
top-right	Top right corner
top-left	Top left corner

Theme (data-theme)

Choose between light and dark themes for your widget.

Value	Description
light	Light theme with white background (default)
dark	Dark theme with dark background

Animation (data-animation)

Set how the widget appears and disappears.

Value	Description
slide	Slide animation (default)
fade	Fade in/out animation
none	No animation

Trigger (data-trigger)

Control when the widget appears to users.

Value	Description
manual	Shows on button click (default)
auto	Shows immediately when page loads
scroll	Shows after 50% scroll
timer	Shows after specified delay
exit	Shows on exit intent

Note: When using the timer trigger, you can specify the delay in milliseconds using the data-trigger-delay attribute.

Interactive Preview

Position

Theme

Animation

Trigger

Website Content