@checkflow/sdk

> User feedback collection SDK with automatic context capture


Features

- 📸 Automatic Screenshot Capture - Capture page screenshots with one click
- 🔍 Context Collection - Automatically collect console logs, network requests, and performance metrics
- 🎨 Customizable Widget - Beautiful feedback widget that matches your brand
- ⚛️ React Support - First-class React hooks and components
- 💚 Vue Support - Vue 3 composables and plugin
- 🛡️ Error Boundary - Automatic error capture and reporting
- 🌍 i18n Ready - Built-in translations (EN, FR, ES, DE)
- 📱 Responsive - Works on desktop, tablet, and mobile

Installation

``bash
npm install @checkflow/sdk


or

`javascript
import { createCheckFlow } from '@checkflow/sdk';

const checkflow = createCheckFlow('your-api-key', {
projectId: 'your-project-id',
showWidget: true,
captureErrors: true,
});

// Programmatically open the feedback form
checkflow.open();

// Submit feedback programmatically
await checkflow.submitFeedback({
title: 'Bug Report',
description: 'Something is broken',
type: 'bug',
priority: 'high',
});
`

$3

`tsx
import { CheckFlowProvider, useCheckFlow, FeedbackButton } from '@checkflow/sdk';

// Wrap your app
function App() {
return (
apiKey="your-api-key"
options={{ projectId: 'your-project-id' }}
>


);
}

// Use the hook
function MyComponent() {
const { openWidget, submitFeedback } = useCheckFlow();

return (

Send Feedback

);
}

// Or use the built-in button
function AnotherComponent() {
return Report Issue;
}
`

$3

`typescript
import { createApp } from 'vue';
import { CheckFlowPlugin } from '@checkflow/sdk';

const app = createApp(App);

app.use(CheckFlowPlugin, {
apiKey: 'your-api-key',
projectId: 'your-project-id',
});

app.mount('#app');
`

`vue



`

Configuration Options

`typescript
interface CheckFlowOptions {
// API endpoint (default: https://api.checkflow.io)
apiUrl?: string;

// Project ID for feedback association
projectId?: string;

// Widget options
showWidget?: boolean; // Show floating button (default: true)
widgetPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
widgetButtonText?: string; // Button text (default: 'Feedback')

// Capture options
captureErrors?: boolean; // Auto-capture errors (default: true)
captureConsole?: boolean; // Capture console logs (default: true)
captureNetwork?: boolean; // Capture network requests (default: true)
capturePerformance?: boolean; // Capture performance metrics (default: true)
maxConsoleEntries?: number; // Max console entries (default: 100)
maxNetworkEntries?: number; // Max network entries (default: 100)

// User identification
user?: {
id?: string;
email?: string;
name?: string;
};

// Callbacks
beforeSubmit?: (feedback) => feedback | false;
onSubmit?: (result) => void;
onError?: (error) => void;

// Localization
locale?: 'en' | 'fr' | 'es' | 'de';
translations?: Partial;

// Debug mode
debug?: boolean;
}
`

Error Boundary (React)

`tsx
import { CheckFlowErrorBoundary } from '@checkflow/sdk';

function App() {
return (
fallback={(error, reset) => (


{error.message}

`typescript
import { createCheckFlow } from '@checkflow/sdk';

const checkflow = createCheckFlow('your-api-key');

// Capture current page context
const capture = await checkflow.capture({
fullPage: true, // Capture full page (not just viewport)
quality: 80, // Screenshot quality (1-100)
includeConsole: true, // Include console logs
includeNetwork: true, // Include network logs
hideElements: ['.secret'], // CSS selectors to hide
maskElements: ['.password'], // CSS selectors to mask
});

console.log(capture.screenshot); // Base64 screenshot
console.log(capture.consoleLogs); // Console entries
console.log(capture.networkLogs); // Network requests
console.log(capture.performance); // Performance metrics
console.log(capture.context); // Page context (URL, browser, etc.)
`

User Identification

`typescript
// Set user info
checkflow.setUser({
id: 'user-123',
email: 'user@example.com',
name: 'John Doe',
});

// Clear user info (on logout)
checkflow.clearUser();
`

CDN Usage

`html




`

TypeScript

The SDK is written in TypeScript and includes full type definitions.

`typescript
import type {
FeedbackData,
CaptureResult,
CheckFlowOptions
} from '@checkflow/sdk';
`

Privacy & Security

- Screenshots can exclude sensitive elements using hideElements and maskElements`
- Console logs are filtered to remove potentially sensitive data
- Network requests to CheckFlow API are excluded from capture
- All data is transmitted over HTTPS

Browser Support

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

License

MIT © CheckFlow