feedback-vos
Advanced tools
A beautiful, customizable feedback widget for Next.js applications with built-in GitHub Issues integration.
npm install feedback-vos
Add the styles to your root layout (app/layout.tsx) or global CSS:
import 'feedback-vos/styles'
Since the Widget component requires client-side features, you need to create a client component wrapper.
Step 1: Create a client component wrapper:
// app/components/FeedbackWidget.tsx
'use client'
import { Widget } from 'feedback-vos'
import 'feedback-vos/styles'
export default function FeedbackWidget() {
return (
<Widget
integration="github"
githubConfig={{
token: process.env.NEXT_PUBLIC_GITHUB_TOKEN!,
owner: process.env.NEXT_PUBLIC_GITHUB_OWNER!,
repo: process.env.NEXT_PUBLIC_GITHUB_REPO!,
}}
position={process.env.NEXT_PUBLIC_FEEDBACK_POSITION as 'bottom-right' | 'bottom-left' | undefined}
language={process.env.NEXT_PUBLIC_FEEDBACK_LANG as 'en' | 'nl' | undefined}
theme={process.env.NEXT_PUBLIC_FEEDBACK_THEME as 'light' | 'dark' | undefined}
/>
)
}
Important:
'use client' directive must be at the very top of the file (before any imports)Widget and 'feedback-vos/styles') are requiredStep 2: Use the wrapper in your layout:
// app/layout.tsx
import FeedbackWidget from './components/FeedbackWidget'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<FeedbackWidget />
</body>
</html>
)
}
repo (private) or public_repo (public) scope and issue permissions.env.local:
NEXT_PUBLIC_GITHUB_TOKEN=your_github_token_here
NEXT_PUBLIC_GITHUB_OWNER=your-username
NEXT_PUBLIC_GITHUB_REPO=your-repo-name
NEXT_PUBLIC_FEEDBACK_POSITION=bottom-right # optional: bottom-left, top-right, top-left
NEXT_PUBLIC_FEEDBACK_LANG=nl # optional: 'nl' for Dutch, 'en' for English (default)
NEXT_PUBLIC_FEEDBACK_THEME=light
NEXT_PUBLIC_FEEDBACK_ENABLED=true # optional: set to 'false' to disable widget (default: 'true')
Important: owner and repo are case-sensitive. Ensure Issues are enabled in your repository.
You can control widget visibility per environment using NEXT_PUBLIC_FEEDBACK_ENABLED:
# Production - disable widget
NEXT_PUBLIC_FEEDBACK_ENABLED=false
# Staging - enable widget
NEXT_PUBLIC_FEEDBACK_ENABLED=true
Note: The widget is enabled by default if NEXT_PUBLIC_FEEDBACK_ENABLED is not set, ensuring backward compatibility.
interface WidgetProps {
integration: 'github';
githubConfig: {
token: string;
owner: string;
repo: string;
screenshotPath?: string; // default: '.feedback-vos'
};
position?: 'bottom-right' | 'bottom-left'; // or use NEXT_PUBLIC_FEEDBACK_POSITION env var
language?: 'en' | 'nl'; // defaults to 'en', or use NEXT_PUBLIC_FEEDBACK_LANG env var
theme?: 'light' | 'dark'; // defaults to 'dark', or use NEXT_PUBLIC_FEEDBACK_THEME env var
}
When feedback is submitted:
.feedback-vos/ in your repofeedback and the feedback typeNote: Labels must exist in your repository. Screenshots are stored in your repo (no size limits).
This plugin is designed to be isolated and work within any project, regardless of whether it uses Tailwind CSS or not.
[data-feedback-widget] and does not include Tailwind's global preflight resets, so it won't affect your existing site's styles.feedback-vos/styles (or dist/styles.css) in your global CSS file or root layout without worrying about side effects.The widget uses inline styles to ensure it's always visible, even with CSS conflicts. If the widget is still not showing up, check the following:
Verify the client component wrapper is created correctly:
'use client' directive is at the top of your FeedbackWidget.tsxlayout.tsxCheck environment variables:
NEXT_PUBLIC_* variables are in .env.local (not .env)NEXT_PUBLIC_FEEDBACK_ENABLED is not set to 'false' or '0'Verify styles are imported:
import 'feedback-vos/styles' is in your FeedbackWidget.tsxCheck for CSS conflicts:
The widget uses z-50 for positioning - ensure no other styles override this
Verify Tailwind CSS is properly configured in your project
Widget outside viewport or not visible: If the widget appears outside the screen or is not visible, add this CSS to your global stylesheet (e.g., globals.css):
[data-feedback-widget="true"] {
position: fixed !important;
bottom: 1rem !important;
right: 1rem !important;
z-index: 9999 !important;
}
This ensures the widget is always visible regardless of CSS conflicts or parent container transforms.
Debug in browser console:
// Check if widget element exists
document.querySelector('[data-feedback-widget="true"]')
// Check environment variable (client-side)
console.log(process.env.NEXT_PUBLIC_FEEDBACK_ENABLED)
Common mistakes:
'use client' directive'feedback-vos/styles'.env instead of .env.local for environment variablesWidget directly in layout.tsx instead of using the wrapper componentowner/repo, token access, Issues enabledMIT License
FAQs
A beautiful feedback widget for Next.js with GitHub Issues integration
We found that feedback-vos demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins 10 Minutes or Less, a podcast by Ali Rohde, to discuss the recent surge in open source supply chain attacks.
Research
/Security News
Campaign of 108 extensions harvests identities, steals sessions, and adds backdoors to browsers, all tied to the same C2 infrastructure.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.