fdback.ioGetting Started
Official TypeScript SDK for integrating fdback.io user feedback into your application
The official TypeScript SDK for integrating fdback.io user feedback into your application.
Features
- Embeddable Widget - Drop-in feedback widget with floating launcher
- Type-safe - Full TypeScript support with detailed type definitions
- Isomorphic - Works in Node.js and browsers
- Secure - HMAC-SHA256 signed authentication
- Framework support - First-class React and Next.js integrations
- Lightweight - ~3.7KB core, ~5KB for framework bindings
Installation
npm install @fdback.io/sdk
# or
pnpm add @fdback.io/sdk
# or
yarn add @fdback.io/sdkQuick Start
1. Get your credentials
Get your Workspace ID and Workspace Secret from your fdback.io dashboard under Settings → SDK Credentials.
2. Server-side: Sign user data
import { FdbackServer } from "@fdback.io/sdk";
const fdback = new FdbackServer({
workspaceId: process.env.FDBACK_WORKSPACE_ID!,
workspaceSecret: process.env.FDBACK_WORKSPACE_SECRET!,
});
// Create signed login data for a user
const signedData = await fdback.createSignedLoginData({
email: "user@example.com",
name: "John Doe",
avatar: "https://example.com/avatar.jpg", // optional
});3. Client-side: Open feedback board
import { FdbackClient } from "@fdback.io/sdk";
const fdback = new FdbackClient({
workspaceId: "your-workspace-id",
});
// Open with signed data from your server
fdback.open(signedData, { mode: "popup" });FdbackServer and FdbackClient are aliases for the same Fdback class. The naming makes it clearer which environment you're in.
Security Model
The workspace secret is used to sign requests with HMAC-SHA256. Never expose the secret in client-side code.
| Environment | Approach |
|---|---|
| Server-side | Use workspaceSecret directly |
| Client-side | Fetch signed data from your backend API |