@lumendigitaldev/lumen-feedback
v1.0.2
Published
Reusable Velt-powered client feedback components for Next.js sites
Downloads
51
Maintainers
Readme
@lumendigitaldev/lumen-feedback
Reusable Velt-powered client feedback components for Next.js projects.
Features
- Drop-in
FeedbackGatecomponent for env-driven setup - Lower-level
ClientFeedbackcomponent for custom wiring - Project-wide Velt document ID with per-route location syncing
- LocalStorage-backed reviewer identity
- Optional query param prefills for reviewer name/email
- Packaged CSS entrypoint for the floating controls
Installation
Choose any standard package manager.
npm install @lumendigitaldev/lumen-feedback @veltdev/react @veltdev/clientbun add @lumendigitaldev/lumen-feedback @veltdev/react @veltdev/clientUsage
Import the styles once, then render the gate in your root layout.
import '@lumendigitaldev/lumen-feedback/styles.css'
import { FeedbackGate } from '@lumendigitaldev/lumen-feedback'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<FeedbackGate />
</body>
</html>
)
}Environment variables
NEXT_PUBLIC_ENABLE_FEEDBACK=true
NEXT_PUBLIC_VELT_API_KEY=your_velt_api_key
NEXT_PUBLIC_PROJECT_SLUG=project-slug
NEXT_PUBLIC_PROJECT_NAME="Project Name"NEXT_PUBLIC_PROJECT_NAME is optional.
Advanced usage
import '@lumendigitaldev/lumen-feedback/styles.css'
import { ClientFeedback } from '@lumendigitaldev/lumen-feedback'
<ClientFeedback
apiKey={process.env.NEXT_PUBLIC_VELT_API_KEY!}
documentId="project-slug"
projectName="Project Name"
storageKey="lumen-feedback-user"
/>Reviewer identity
Reviewers can prefill identity with query params:
?feedbackName=Chase[email protected]
Those values are cached in localStorage for later visits.
Compatibility
- Next.js 15 or 16
- React 18 or 19
- Node.js 18+
Publishing
bun run build
npm publish --access public