# feedbackfun
feedbackfun is an embeddable feedback and roadmap widget. Drop one script tag into any website — users can submit feature requests, bug reports, and vote on your product roadmap by clicking anywhere on the page. You manage everything from the feedbackfun dashboard.
## Quick integration (30 seconds)
Replace YOUR_API_KEY with your key from https://feedbackfun.com/dashboard/settings
### HTML / any site
```html
```
Add this once, anywhere in . A floating button appears bottom-right.
### Next.js (App Router)
```tsx
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
### React (Vite / CRA)
```tsx
// src/main.tsx or App.tsx — add once at the root
import { useEffect } from 'react';
function FeedbackWidget() {
useEffect(() => {
const s = document.createElement('script');
s.src = 'https://cdn.feedbackfun.com/feedbackfun-widget.min.js';
s.setAttribute('data-feedbackfun-api-key', 'YOUR_API_KEY');
document.body.appendChild(s);
return () => { document.querySelector('script[src*="feedbackfun"]')?.remove(); };
}, []);
return null;
}
```
### Vue 3
```ts
// main.ts
const s = document.createElement('script');
s.src = 'https://cdn.feedbackfun.com/feedbackfun-widget.min.js';
s.setAttribute('data-feedbackfun-api-key', 'YOUR_API_KEY');
document.body.appendChild(s);
```
## All configuration attributes
Every attribute is optional except data-feedbackfun-api-key.
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| data-feedbackfun-api-key | string | required | Your project API key |
| data-feedbackfun-primary | hex | #3b82f6 | Primary color (buttons, highlights) |
| data-feedbackfun-primary-foreground | hex | #ffffff | Text on primary elements |
| data-feedbackfun-dark-primary | hex | #4c6ef5 | Primary color in dark mode |
| data-feedbackfun-dark-primary-foreground | hex | #ffffff | Text on primary in dark mode |
| data-feedbackfun-display-mode | popover | dialog | popover | How the form opens |
| data-feedbackfun-trigger-selector | css-class | — | Custom trigger class (hides floating button) |
| data-feedbackfun-hide-branding | true | — | Remove "Powered by feedbackfun" (Pro plan) |
| data-feedbackfun-dev-domain | domain | — | Domain to use for localhost testing |
| data-feedbackfun-hide-click-mode | true | — | Hide the "Start Clicking" button |
| data-feedbackfun-admin-avatars | JSON array | — | Avatar URLs shown in widget home view |
## Custom trigger button
Hide the floating button and use your own button instead:
```html
```
## Localhost / development testing
The widget validates the domain against your project. To test locally, add your production domain as dev-domain:
```html
```
## Where to get your API key
1. Sign in at https://feedbackfun.com
2. Create a project (enter your site's domain)
3. Your API key appears at https://feedbackfun.com/dashboard/settings
4. The dashboard also generates ready-to-copy code for Next.js, React, Vue, and HTML
## Support
- Dashboard: https://feedbackfun.com/dashboard
- Setup guide: https://feedbackfun.com/dashboard/settings