SDK Overview

The Feedhog JavaScript SDK provides programmatic access to submit feedback, manage votes, and track users from any website or application.

JavaScript SDK

The Feedhog JavaScript SDK (@feedhog/js) provides full programmatic control over feedback collection. Use it to build custom feedback UIs or integrate feedback into your application workflow.

Installation

npm install @feedhog/js
yarn add @feedhog/js
pnpm add @feedhog/js

Quick Start

import Feedhog from '@feedhog/js';

// Initialize the SDK
const feedhog = new Feedhog({
  apiKey: 'fhpk_your_public_key'
});

// Identify the current user (optional but recommended)
await feedhog.identify({
  externalId: 'user-123',
  email: 'user@example.com',
  name: 'John Doe'
});

// Submit feedback
const feedback = await feedhog.submit({
  title: 'Add dark mode',
  description: 'Would love a dark theme option',
  type: 'idea'
});

console.log('Feedback submitted:', feedback.id);

Configuration

interface FeedhogConfig {
  /** Public API key (starts with fhpk_) - required */
  apiKey: string;
  /** Base URL for the API (defaults to https://feedhog.com) */
  baseUrl?: string;
}
const feedhog = new Feedhog({
  apiKey: 'fhpk_your_public_key',
  baseUrl: 'https://feedhog.com' // optional
});

Type Definitions

The SDK exports all TypeScript types for full type safety:

import Feedhog, {
  type FeedhogConfig,
  type UserIdentity,
  type SubmitFeedbackInput,
  type ListFeedbackOptions,
  type FeedbackListItem,
  type FeedbackDetail,
  type PaginatedResponse,
  type VoteResult,
  type IdentifiedUser,
  type FeedbackType,
  type FeedbackStatus,
  type SortBy
} from '@feedhog/js';

Core Types

// Feedback type enum
type FeedbackType = "bug" | "idea" | "question" | "other";

// Feedback status enum
type FeedbackStatus =
  | "new"
  | "under-review"
  | "planned"
  | "in-progress"
  | "completed"
  | "closed";

// Sort options
type SortBy = "newest" | "oldest" | "votes" | "comments";

User Identity

interface UserIdentity {
  /** Your system's unique user ID (required) */
  externalId: string;
  /** User's email address */
  email?: string;
  /** User's display name */
  name?: string;
  /** URL to user's avatar image */
  avatarUrl?: string;
  /** Additional metadata */
  metadata?: Record<string, unknown>;
}

Feedback Types

interface SubmitFeedbackInput {
  /** Feedback title (required) */
  title: string;
  /** Detailed description */
  description?: string;
  /** Type of feedback (defaults to "idea") */
  type?: FeedbackType;
  /** Additional metadata */
  metadata?: Record<string, unknown>;
}

interface FeedbackListItem {
  id: string;
  title: string;
  description: string | null;
  type: FeedbackType;
  status: FeedbackStatus;
  voteCount: number;
  commentCount: number;
  createdAt: string;
  endUser: {
    name: string | null;
    avatarUrl: string | null;
  } | null;
}

interface FeedbackDetail extends FeedbackListItem {
  userHasVoted: boolean;
  comments: FeedbackComment[];
}

SDK Methods

MethodDescription
identify(user)Associate feedback with a user
submit(input)Submit new feedback
list(options)List feedback with filters
get(id)Get feedback details
vote(id)Toggle vote on feedback
hasVoted(id)Check vote status
reset()Clear user data
on(event, handler)Listen for events

Error Handling

The SDK throws FeedhogApiError for API errors:

import Feedhog, { FeedhogApiError } from '@feedhog/js';

const feedhog = new Feedhog({ apiKey: 'fhpk_your_public_key' });

try {
  await feedhog.submit({ title: '' }); // Will fail validation
} catch (error) {
  if (error instanceof FeedhogApiError) {
    console.log('Status:', error.status); // 400
    console.log('Message:', error.message); // "Invalid input"
    console.log('Details:', error.details);
    // {
    //   formErrors: [],
    //   fieldErrors: { title: ["Title is required"] }
    // }
  }
}

Browser Support

The SDK works in all modern browsers and Node.js environments. It uses:

  • fetch for HTTP requests
  • localStorage for user persistence (browser only)

For older browsers, you may need polyfills for fetch and Promise.

Next Steps