Embeddable feedback widget for Feedhog
npm install @feedhog/widgetEmbeddable feedback widget for Feedhog. Add a beautiful feedback collection widget to any website with just a few lines of code.
Add this script to your HTML, just before the closing
``html`
data-api-key="fhpk_xxx"
data-position="bottom-right"
data-primary-color="#3b82f6"
async
>
That's it! A floating feedback button will appear on your page.
For more control, use the window.feedhogSettings object:
`html`
Install the package:
`bash`
npm install @feedhog/widgetor
pnpm add @feedhog/widget
Use the React component:
`tsx
import { FeedhogWidget } from '@feedhog/widget/react';
function App() {
const currentUser = useCurrentUser(); // Your auth hook
return (
position="bottom-right"
primaryColor="#3b82f6"
user={currentUser ? {
externalId: currentUser.id,
email: currentUser.email,
name: currentUser.name
} : undefined}
/>
);
}
`
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| apiKey | string | required | Your public API key (starts with fhpk_) |baseUrl
| | string | https://feedhog.com | Custom API URL |position
| | string | bottom-right | Button position: bottom-right, bottom-left, top-right, top-left |primaryColor
| | string | #3b82f6 | Brand color (hex) |triggerText
| | string | Feedback | Button text |showTrigger
| | boolean | true | Show/hide the floating button |title
| | string | Send us feedback | Modal title |subtitle
| | string | We'd love to hear from you | Modal subtitle |user
| | object | undefined | Pre-identified user |
`typescript`
interface UserIdentity {
externalId: string; // Required: Your user ID
email?: string; // Optional
name?: string; // Optional
avatarUrl?: string; // Optional
metadata?: Record
}
After the widget loads, you can control it programmatically:
`javascript
// Open the feedback modal
window.FeedhogWidget.open();
// Close the modal
window.FeedhogWidget.close();
// Identify a user (after login)
window.FeedhogWidget.identify({
externalId: 'user-123',
email: 'user@example.com',
name: 'John Doe'
});
// Clear user identity (after logout)
window.FeedhogWidget.reset();
`
To use your own button instead of the floating button:
`html
`
The widget uses Shadow DOM for style isolation, so your page styles won't affect it. The widget automatically adapts to light/dark mode based on prefers-color-scheme.
You can customize the primary color using the primaryColor` option. The widget will automatically calculate text contrast and hover states.
- Widget: ~15KB gzipped
- Zero dependencies (uses Preact for rendering)
- Shadow DOM isolation
MIT