Widget Overview

The Feedhog Widget provides a complete feedback UI that can be added to any website with minimal setup.

Feedback Widget

The Feedhog Widget is a drop-in feedback collection UI. It includes a floating trigger button and a feedback modal, all self-contained in a Shadow DOM to avoid CSS conflicts.

Features

  • Floating feedback button with customizable position
  • Modal with feedback form (title, description, type)
  • Automatic user identification
  • Works with any website or framework
  • Shadow DOM isolation (no CSS conflicts)
  • Customizable colors and text

Installation Options

MethodBest ForSetup
Script TagAny website, no build stepAdd script to HTML
React ComponentReact/Next.js appsnpm install

Quick Start

Any Website (Script Tag)

Add before the closing </body> tag:

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    position: 'bottom-right'
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

React/Next.js

npm install @feedhog/widget
import { FeedhogWidget } from '@feedhog/widget/react';

function App() {
  return (
    <FeedhogWidget
      apiKey="fhpk_your_public_key"
      position="bottom-right"
    />
  );
}

Configuration Options

All configuration options work with both the script tag and React component:

interface WidgetSettings {
  /** Public API key (required) */
  apiKey: string;

  /** Base URL for the API */
  baseUrl?: string; // default: "https://feedhog.com"

  /** Widget position on the page */
  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
  // default: "bottom-right"

  /** Primary brand color (hex) */
  primaryColor?: string; // default: "#3b82f6"

  /** Trigger button text */
  triggerText?: string; // default: "Feedback"

  /** Show/hide the trigger button */
  showTrigger?: boolean; // default: true

  /** Modal title */
  title?: string; // default: "Send us feedback"

  /** Modal subtitle */
  subtitle?: string; // default: "We'd love to hear from you"

  /** Pre-identified user */
  user?: {
    externalId: string;
    email?: string;
    name?: string;
    avatarUrl?: string;
    metadata?: Record<string, unknown>;
  };
}

JavaScript API

Once loaded, the widget exposes a global window.FeedhogWidget object:

// Open the feedback modal
window.FeedhogWidget.open();

// Close the modal
window.FeedhogWidget.close();

// Identify a user (e.g., after login)
window.FeedhogWidget.identify({
  externalId: 'user-123',
  email: 'user@example.com',
  name: 'John Doe'
});

// Clear user data (e.g., on logout)
window.FeedhogWidget.reset();

Example Configurations

Minimal Setup

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key'
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

Full Configuration

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    position: 'bottom-left',
    primaryColor: '#8b5cf6',
    triggerText: 'Share Ideas',
    showTrigger: true,
    title: 'What would you like to see?',
    subtitle: 'Help us build better products',
    user: {
      externalId: 'user-123',
      email: 'john@example.com',
      name: 'John Doe',
      metadata: {
        plan: 'pro',
        company: 'Acme Inc'
      }
    }
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

Custom Trigger (Hide Default)

<script>
  window.feedhogSettings = {
    apiKey: 'fhpk_your_public_key',
    showTrigger: false
  };
</script>
<script async src="https://cdn.feedhog.com/widget.js"></script>

<!-- Your custom button -->
<button onclick="window.FeedhogWidget.open()">
  Share Feedback
</button>

Next Steps