@opside-sdk/sdk

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

Installation

``bash
npm install @opside-sdk/sdk


or

yarn add @opside-sdk/sdk

or

pnpm add @opside-sdk/sdk
`

Quick Start

$3

`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: 'user@example.com',
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' });
`

$3

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

function App() {
return (
apiKey="op_live_your_key_here"
user={{ userId: 'user_123', email: 'user@example.com' }}
>



);
}

function HelpPage() {
return ;
}
`

API Reference

$3

#### createOpside(config)

Creates a new Opside client instance.

`typescript
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.

`typescript
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.

`typescript
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.

`typescript
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.

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

#### opside.track(eventType, properties?)

Track custom analytics events.

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

$3

####

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

`tsx
apiKey="op_live_xxx"
user={{ userId: 'user_123', email: 'user@example.com' }}
theme={{ primaryColor: '#6366f1' }}
>
{children}

`

####

Floating feedback button with modal form.

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

####

Embeddable knowledge base component.

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

$3

#### useOpside()

Access the Opside client directly.

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

#### useFeedback()

Submit feedback with loading/success state.

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

#### useArticles(options?)

Fetch articles with loading state.

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

#### useArticle(slugOrId)

Fetch a single article.

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

#### useIdentify()

Identify users with loading state.

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

#### useTrack()

Track events.

`tsx
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:

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

License

MIT