Skip to content

OpenFeed-ink/openfeed-widget

Repository files navigation

@openfeed-ink/widget

Embeddable feedback, roadmap and changelog widget.
Part of OpenFeed — the open source alternative to Canny and Frill.

npm npm downloads


Install

npm install @openfeed-ink/widget
# or
pnpm add @openfeed-ink/widget
# or
yarn add @openfeed-ink/widget

Prefer a script tag?

<script async src="https://cdn.openfeed.ink/widget/v1/widget.iife.js" data-project-id="your-project-id"></script>

Usage

React

import { OpenFeed } from '@openfeed-ink/widget'

export default function App() {
  return (
    <>
      <YourApp />
      <OpenFeed projectId="your-project-id" />
    </>
  )
}

Next.js

// app/layout.tsx
import { OpenFeed } from '@openfeed-ink/widget'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <OpenFeed projectId="your-project-id" />
      </body>
    </html>
  )
}

Plain HTML / Any framework

<script
  async
  src="https://cdn.openfeed.ink/widget/v1/widget.iife.js"
  data-project-id="your-project-id">
</script>

What it includes

One widget. Three tabs. All customizable from your dashboard — no code changes needed.

Tab What it does
💬 Feedback Users submit, upvote feature requests and write comments
🗺️ Roadmap Users see what's Planned / In Progress / Done
📣 Changelog Users see your latest updates with notification dot

Enable or disable each tab from your OpenFeed dashboard.


How customization works

You never edit code to change how the widget looks or behaves.

  1. Go to your OpenFeed dashboard → Widget Settings
  2. Change colors, theme, button position, which tabs to show
  3. Click Save
  4. Widget updates instantly in your app

The projectId prop is the only thing that never changes.


Props

Prop Type Required Description
projectId string Your project slug from OpenFeed dashboard

All other configuration (colors, theme, position, enabled tabs) is managed from your dashboard.


TypeScript

Fully typed. No @types package needed.

import { OpenFeed } from '@openfeed-ink/widget'
// Types are included — no extra install required

Shadow DOM isolation

The widget renders inside a Shadow DOM container. This means:

  • ✅ Widget styles never affect your app
  • ✅ Your app styles never affect the widget
  • ✅ Works in any framework — React, Vue, Svelte, plain HTML
  • ✅ No CSS conflicts, ever

Get started

  1. Create a free account at openfeed.ink
  2. Create a project and copy your project slug
  3. Install this package and add <OpenFeed projectId="your-project-id" />
  4. Customize everything from your dashboard

Or self-host OpenFeed for freegithub.com/OpenFeed-ink/openfeed

About

Embeddable feedback, roadmap and changelog widget.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages