> ## 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.

# Script Tag (CDN)

> The simplest way to add feedbackfun — no build step, no dependencies. Works with any website.

## Overview

Load feedbackfun directly from our CDN using a `<script>` tag. The widget auto-initializes when the page loads — no JavaScript code required.

## Installation

Add both lines before the closing `</body>` tag:

```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>
```

## Data attributes

Configure the widget using `data-*` attributes on the `<script>` tag:

| Attribute                     | Required | Description                                                               |
| ----------------------------- | -------- | ------------------------------------------------------------------------- |
| `data-feedbackfun-api-key`    | Yes      | Your project API key from the dashboard                                   |
| `data-feedbackfun-project-id` | Yes      | Your numeric project ID                                                   |
| `data-feedbackfun-dev-domain` | No       | Your production domain — use during local dev to bypass domain validation |
| `data-feedbackfun-api-url`    | No       | Custom API URL (default: `https://feedbackfun.com`)                       |

## Local development

When running on `localhost`, pass your production domain via `data-feedbackfun-dev-domain`:

```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="yoursite.com">
</script>
```

<Warning>
  Remove `data-feedbackfun-dev-domain` before deploying to production.
</Warning>

## Full HTML example

```html theme={null}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <!-- Your page content -->

  <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>
</body>
</html>
```

## Runtime API

After the widget loads, you can call these methods from JavaScript:

```javascript theme={null}
// Change primary color at runtime
window.feedbackfun.setPrimaryColor('#6366f1');

// Change primary foreground color
window.feedbackfun.setPrimaryForeground('#ffffff');

// Identify the logged-in user
window.feedbackfun.setUserInfo({
  id: 'user_123',
  email: 'user@example.com',
  name: 'Jane Doe'
});

// Clear user info on logout
window.feedbackfun.clearUserInfo();
```

<Note>
  `window.feedbackfun` is available after the script tag loads. Wrap calls in a `DOMContentLoaded` listener if you call them before the page fully loads.
</Note>
