@openfeed-ink/widget

v0.1.3

Published

6 days ago

Embeddable feedback, roadmap and changelog widget for OpenFeed — the open source alternative to Canny and Frill. One script tag. Full control from your dashboard.

@openfeed/widget

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

Install

npm install @openfeed/widget
# or
pnpm add @openfeed/widget
# or
yarn add @openfeed/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.

Go to your OpenFeed dashboard → Widget Settings
Change colors, theme, button position, which tabs to show
Click Save
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

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

Or self-host OpenFeed for free → github.com/OpenFeed-ink/openfeed