# Feedaura
> A smart feedback collection tool with AI powers for web applications
Feedaura is a lightweight, customizable feedback widget designed to help you collect and analyze user feedback with AI. It integrates seamlessly with React, Next.js, and Vue applications.
## Installation
Install Feedaura using your favorite package manager:
```bash
npm install feedaura
# or
yarn add feedaura
# or
pnpm add feedaura
```
## Getting Started
### 1. Create a Project
Sign up at the [Feedaura Dashboard](https://feedaura.com) and create a project to obtain your `projectSecret`.
### 2. Integration
#### React
```jsx
import { Feedback } from 'feedaura';
export default function App() {
return (
{/* Your application content */}
);
}
```
#### Next.js
Create a client component wrapper:
```jsx
// components/FeedauraWrapper.jsx
'use client';
import { Feedback } from 'feedaura';
export function FeedauraWrapper() {
return (
);
}
```
Include it in your layout:
```jsx
// app/layout.jsx
import { FeedauraWrapper } from '@/components/FeedauraWrapper';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
#### Vue
```vue
```
## Configuration Options
Feedaura offers a range of props to tailor the widget to your needs:
- **projectSecret** (string, required): Your project secret key.
- **position** (string): Button position (default: `"bottom-right"`).
- **primaryColor** (string): Primary color (default: `"#0F8CFF"`).
- **secondaryColor** (string): Secondary color (default: `"#0070E0"`).
- **textColor** (string): Text color (default: `"#333333"`).
- **backgroundColor** (string): Background color (default: `"#FFFFFF"`).
- **theme** (string): Widget theme (default: `"light"`, options: `"light"`, `"dark"`, `"auto"`).
- **buttonText** (string): Text on the feedback button.
- **buttonIcon** (string): Icon for the button (default: `"feedback"`).
- **iconColor** (string): Icon color (default: `"#FFFFFF"`).
- **buttonSize** (string): Button size (default: `"medium"`, options: `"small"`, `"medium"`, `"large"`).
- **buttonRadius** (string): Button border radius (default: `"50%"`).
- **widgetStyle** (string): Style of the widget (default: `"floating"`, options: `"floating"`, `"embedded"`).
- **zIndex** (number): Z-index (default: `9999`).
- **autoCloseAfterSubmit** (boolean): Auto-close after submission (default: `true`).
- **animated** (boolean): Enable animations (default: `true`).
- **productName** (string): Product name (default: `"product"`).
- **placeholder** (string): Feedback input placeholder (default: `"Please write here"`).
- **submitText** (string): Submit button text (default: `"Submit"`).
- **headerText** (string): Header text (default: `"Give us your feedback"`).
- **questionText** (string): Question text (default: `"What was your experience while using product?"`).
- **feedbackLabelText** (string): Label for the feedback input (default: `"Write your feedback"`).
## Customization
Customize the widget to align with your brand:
```jsx
```
## Environment Variables
For enhanced security, store your project secret in environment variables:
```plaintext
# For Next.js
NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET=your_project_secret_here
# For React
REACT_APP_FEEDAURA_PROJECT_SECRET=your_project_secret_here
# For Vue
VUE_APP_FEEDAURA_PROJECT_SECRET=your_project_secret_here
```
Reference them in your code accordingly.
## Troubleshooting
- **Widget Not Appearing**: Confirm that the `projectSecret` is correct and the component is imported and rendered properly.
- **Feedback Not Received**: Check your internet connection and ensure your project is active on the Feedaura Dashboard.
- **Styling Issues**: Adjust the `zIndex` or explicitly set the `theme` to resolve display issues.
```