@opside-sdk/sdk

Official Opside SDK for integrating feedback collection, knowledge base, and analytics into your application.

Installation

npm install @opside-sdk/sdk
# or
yarn add @opside-sdk/sdk
# or
pnpm add @opside-sdk/sdk

Quick Start

Vanilla JavaScript/TypeScript

import { createOpside } from '@opside-sdk/sdk';

// Initialize the SDK
const opside = createOpside({
  apiKey: 'op_live_your_key_here',
  debug: true, // Enable debug logging (optional)
});

// Identify users
await opside.identify({
  userId: 'user_123',
  email: '[email protected]',
  name: 'John Doe',
  organizationId: 'org_456',
  organizationName: 'Acme Inc',
});

// Submit feedback
await opside.submitFeedback({
  type: 'bug_report',
  message: 'The submit button is not working on Firefox',
});

// Get knowledge base articles
const { articles } = await opside.getArticles();
const article = await opside.getArticle('getting-started');

// Track custom events
await opside.track('button_clicked', { buttonId: 'cta' });

React

import { OpsideProvider, FeedbackButton, KnowledgeBase } from '@opside-sdk/sdk/react';

function App() {
  return (
    <OpsideProvider
      apiKey="op_live_your_key_here"
      user={{ userId: 'user_123', email: '[email protected]' }}
    >
      <YourApp />
      <FeedbackButton position="bottom-right" />
    </OpsideProvider>
  );
}

function HelpPage() {
  return <KnowledgeBase showSearch showCategories />;
}

API Reference

Core Client

createOpside(config)

Creates a new Opside client instance.

const opside = createOpside({
  apiKey: string;      // Required: Your Opside API key
  baseUrl?: string;    // Optional: Custom API base URL
  debug?: boolean;     // Optional: Enable debug logging
});

opside.identify(user)

Identify a user for tracking. Call this when a user logs in.

await opside.identify({
  userId: string;           // Required: Unique user ID
  email?: string;           // User's email
  name?: string;            // User's display name
  avatarUrl?: string;       // URL to avatar image
  metadata?: object;        // Custom properties
  organizationId?: string;  // User's organization ID
  organizationName?: string;
});

opside.submitFeedback(options)

Submit feedback, bug reports, or feature requests.

await opside.submitFeedback({
  type: 'feedback' | 'bug_report' | 'feature_request' | 'article_rating';
  message?: string;     // Required for non-article_rating types
  rating?: number;      // 1-5, for article ratings
  helpful?: boolean;    // For article ratings
  articleId?: string;   // For article ratings
  metadata?: object;    // Additional data
});

opside.getArticles(options?)

Fetch published articles from the knowledge base.

const { articles, pagination } = await opside.getArticles({
  category?: string;   // Filter by category
  search?: string;     // Search query
  limit?: number;      // Max results (default: 50)
  offset?: number;     // Pagination offset
});

opside.getArticle(slugOrId)

Fetch a single article by slug or ID.

const article = await opside.getArticle('getting-started');

opside.track(eventType, properties?)

Track custom analytics events.

await opside.track('page_viewed', { page: '/pricing' });
await opside.track('button_clicked', { buttonId: 'signup' });

React Components

<OpsideProvider>

Wrap your app with this provider to use Opside hooks and components.

<OpsideProvider
  apiKey="op_live_xxx"
  user={{ userId: 'user_123', email: '[email protected]' }}
  theme={{ primaryColor: '#6366f1' }}
>
  {children}
</OpsideProvider>

<FeedbackButton>

Floating feedback button with modal form.

<FeedbackButton
  position="bottom-right"     // Position on screen
  text="Feedback"             // Button text
  allowedTypes={['feedback', 'bug_report', 'feature_request']}
  onSubmit={(feedback) => console.log('Submitted:', feedback)}
/>

<KnowledgeBase>

Embeddable knowledge base component.

<KnowledgeBase
  showSearch={true}
  showCategories={true}
  defaultCategory="getting-started"
  onArticleView={(article) => console.log('Viewed:', article.title)}
/>

React Hooks

useOpside()

Access the Opside client directly.

const opside = useOpside();
await opside.track('event_name');

useFeedback()

Submit feedback with loading/success state.

const { submitFeedback, isSubmitting, isSuccess, error } = useFeedback();

useArticles(options?)

Fetch articles with loading state.

const { articles, isLoading, error, refetch } = useArticles({ category: 'guides' });

useArticle(slugOrId)

Fetch a single article.

const { article, isLoading, error } = useArticle('getting-started');

useIdentify()

Identify users with loading state.

const { identify, isIdentifying, isIdentified } = useIdentify();

useTrack()

Track events.

const { track, trackBatch } = useTrack();
await track('button_clicked', { buttonId: 'cta' });

TypeScript

The SDK is written in TypeScript and includes full type definitions. All types are exported from the main package:

import type {
  OpsideConfig,
  UserIdentity,
  FeedbackOptions,
  Article,
  ArticlesResponse,
} from '@opside-sdk/sdk';

License

MIT