@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

npm install @horizonapp/feedback

Usage (ESM / npm)

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: '[email protected]' });

Usage (Script tag)

<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

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)

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