> ## Documentation Index
> Fetch the complete documentation index at: https://feedbackfun.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Add feedbackfun to your website in under 2 minutes.

## Before you start

You need two values from your [feedbackfun dashboard](https://feedbackfun.com/dashboard):

| Value        | Where to find it                    |
| ------------ | ----------------------------------- |
| `API_KEY`    | Dashboard → Settings → API Key      |
| `PROJECT_ID` | Dashboard → your project → Settings |

***

## Add the widget

Paste this snippet before the closing `</body>` tag of your page:

```html theme={null}
<link rel="stylesheet" href="https://cdn.feedbackfun.com/feedbackfun-widget.min.css">
<script
  src="https://cdn.feedbackfun.com/feedbackfun-widget.min.js"
  data-feedbackfun-api-key="YOUR_API_KEY"
  data-feedbackfun-project-id="YOUR_PROJECT_ID">
</script>
```

Replace `YOUR_API_KEY` and `YOUR_PROJECT_ID` with your actual values.

<Check>That's it. A floating feedback button will appear on your site.</Check>

***

## Verify it's working

<Steps>
  <Step title="Open your website">
    You should see a small floating button in the bottom-right corner of your page.
  </Step>

  <Step title="Submit a test entry">
    Click the button and submit a feature request or bug report.
  </Step>

  <Step title="Check the dashboard">
    Go to your [feedbackfun dashboard](https://feedbackfun.com/dashboard). The submission should appear under your project's roadmap.
  </Step>
</Steps>

***

## Testing on localhost

By default the widget checks your site's domain against the project settings. Add `data-feedbackfun-dev-domain` to bypass domain validation during local development:

```html theme={null}
<script
  src="https://cdn.feedbackfun.com/feedbackfun-widget.min.js"
  data-feedbackfun-api-key="YOUR_API_KEY"
  data-feedbackfun-project-id="YOUR_PROJECT_ID"
  data-feedbackfun-dev-domain="yourdomain.com">
</script>
```

<Note>
  `data-feedbackfun-dev-domain` is only needed during local development. Remove it before deploying to production.
</Note>

***

## Next steps

<CardGroup cols={2}>
  <Card title="npm package" icon="npm" href="/installation/npm-package">
    Using React, Next.js, or Vue? Install via npm for better framework integration.
  </Card>

  <Card title="Configuration options" icon="sliders" href="/configuration/options">
    Customize colors, display mode, trigger selector, and more.
  </Card>

  <Card title="Identify your users" icon="user" href="/configuration/user-identification">
    Pass user info so feedback is linked to real accounts in your dashboard.
  </Card>

  <Card title="Framework guides" icon="book" href="/frameworks/react">
    Step-by-step guides for React, Next.js, Vue, and plain HTML.
  </Card>
</CardGroup>