feedaura
Version:
Feedaura is a smart feedback collection tool that helps you gather, analyze, and manage user feedback efficiently.
177 lines (132 loc) • 4.64 kB
Markdown
# 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 (
<div>
{/* Your application content */}
<Feedback projectSecret="your_project_secret" />
</div>
);
}
```
#### Next.js
Create a client component wrapper:
```jsx
// components/FeedauraWrapper.jsx
'use client';
import { Feedback } from 'feedaura';
export function FeedauraWrapper() {
return (
<Feedback projectSecret={process.env.NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET} />
);
}
```
Include it in your layout:
```jsx
// app/layout.jsx
import { FeedauraWrapper } from '@/components/FeedauraWrapper';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<FeedauraWrapper />
</body>
</html>
);
}
```
#### Vue
```vue
<template>
<div>
<!-- Your application content -->
</div>
</template>
<script>
import { Feedback } from 'feedaura';
export default {
name: 'App',
mounted() {
new Feedback({
projectSecret: process.env.VUE_APP_FEEDAURA_PROJECT_SECRET,
position: 'bottom-right',
primaryColor: '#0F8CFF'
});
}
};
</script>
```
## 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
<Feedback
projectSecret="your_project_secret"
position="bottom-right"
primaryColor="#FF5733"
secondaryColor="#C70039"
textColor="#333333"
backgroundColor="#F8F9FA"
theme="light"
buttonIcon="chat"
buttonSize="large"
buttonRadius="8px"
/>
```
## 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.
```