Widget Installation

Add visual feedback collection to your website in under 2 minutes.

1. Add the script tag

Add the following script tag to your website, just before the closing </body> tag.

index.html

<script
  src="https://cdn.feedboon.com/widget.js"
  data-project="YOUR_PROJECT_ID"
  async
></script>

2. Get your Project ID

Find your Project ID in the Feedboon dashboard under Settings → Widget. It looks like proj_xxxxxxxxxx.

3. Start collecting feedback

Once the script is added, team members who are logged into Feedboon will see the feedback button on your site. They can:

Press Ctrl+Shift+F to activate feedback mode
Click any element to report a bug with an automatic screenshot
See existing feedback pins on the page, color-coded by status

Configuration options

You can customize the widget behavior with data attributes:

Attribute	Default	Description
data-project	required	Your project ID
data-position	bottom-right	Widget button position (bottom-right, bottom-left)
data-color	#0ea5e9	Accent color for the widget

Framework guides

Next.js

Add the Script component to your root layout:

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.feedboon.com/widget.js"
          data-project="YOUR_PROJECT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

React (Vite / CRA)

Add the script tag to your index.html:

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script
      src="https://cdn.feedboon.com/widget.js"
      data-project="YOUR_PROJECT_ID"
      async
    ></script>
  </body>
</html>