npm package: @horizonapp/feedback
Description: Embeddable feedback widget for collecting user feedback and sending it to Horizon.
Latest version: 0.1.0

# @horizonapp/feedback

Embeddable widget to collect user feedback (positive, negative, bug, feature request) from your product and send it to your Horizon team.

## Setup

1. In Horizon, go to **Feedback → Settings → API Keys** for your team.
2. Generate an API key and copy it.
3. Add the SDK to your app (see below).

## Installation

```bash
npm install @horizonapp/feedback
```

## Usage (ESM / npm)

```ts
import { init } from '@horizonapp/feedback';

const widget = init({
  apiKey: 'hf_your_api_key_here',
  endpoint: 'https://app.horizonapp.dev/api/graphql',
  user: { id: currentUser.id, email: currentUser.email, name: currentUser.name },
});

// Programmatic control
widget.open();
widget.close();
widget.destroy();
widget.setUser({ id: '123', email: 'new@email.com' });
```

## Usage (Script tag)

```html
<script src="https://app.horizonapp.dev/horizon-feedback.js"></script>
<script>
  HorizonFeedback.init({
    apiKey: 'hf_your_api_key_here',
    endpoint: 'https://app.horizonapp.dev/api/graphql',
  });
</script>
```

## React

```tsx
import { useEffect } from 'react';
import { init } from '@horizonapp/feedback';

function App() {
  useEffect(() => {
    const widget = init({
      apiKey: 'hf_your_api_key_here',
      endpoint: 'https://app.horizonapp.dev/api/graphql',
    });
    return () => { widget.destroy(); };
  }, []);

  return <>{/* your app */}</>;
}
```

## Next.js (App Router)

```tsx
// app/providers.tsx
'use client';

import { useEffect } from 'react';
import { init } from '@horizonapp/feedback';

export function FeedbackProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const widget = init({
      apiKey: 'hf_your_api_key_here',
      endpoint: 'https://app.horizonapp.dev/api/graphql',
    });
    return () => { widget.destroy(); };
  }, []);

  return <>{children}</>;
}
```

## Options

| Option | Required | Default | Description |
|--------|----------|---------|-------------|
| `apiKey` | Yes | — | Feedback API key from Horizon |
| `endpoint` | Yes | — | Horizon GraphQL endpoint URL |
| `user` | No | — | `{ id?, email?, name?, company? }` to identify who sent feedback |
| `theme` | No | `"light"` | `"light"`, `"dark"`, or `"auto"` |
| `accentColor` | No | `"#6366f1"` | Primary accent color (hex) |
| `position` | No | `"bottom-right"` | Widget position on screen |
| `triggerText` | No | `"Feedback"` | Trigger button label |
| `triggerIcon` | No | `"chat"` | `"chat"`, `"lightbulb"`, `"megaphone"`, or `"none"` |
| `title` | No | `"Send feedback"` | Panel heading text |
| `placeholder` | No | `"Describe your feedback..."` | Textarea placeholder |
| `showEmailField` | No | `false` | Show email input |
| `showNameField` | No | `false` | Show name input |
| `collectScreenshot` | No | `false` | Enable screenshot capture |
| `allowAttachments` | No | `false` | Enable file attachments |
| `contactConsentEnabled` | No | `false` | Show contact consent checkbox |
| `whiteLabel` | No | `false` | Hide "Powered by Horizon" (Business plan) |

## CORS

Your Horizon API must allow requests from your app's origin. Configure CORS on the GraphQL server to include your domain.