@checkflow/sdk

Lightweight bug reporter & feedback SDK for Checkflow — with screenshot capture, element highlighting, and framework integrations.

Features

• Floating widget — customizable feedback button with form
• Screenshot capture — automatic page screenshots via html2canvas
• Element highlighting — click-to-highlight elements for visual bug reports
• Context collection — URL, viewport, browser, OS, locale, timezone
• Console & error capture — intercepts console.log/warn/error + JS errors
• Performance metrics — FCP, DOM load, page load times
• Framework support — React/Next.js, Vue/Nuxt, vanilla JS

Installation

npm install @checkflow/sdk

Quick Start (Vanilla JS)

import { init } from '@checkflow/sdk';

init({
  apiKey: 'ck_live_...',
  widget: { position: 'bottom-right', color: '#1e3a5f' },
});

React / Next.js

// app/layout.tsx or _app.tsx
import { useCheckflowInit } from '@checkflow/sdk/react';

export default function Layout({ children }) {
  useCheckflowInit({ apiKey: 'ck_live_...' });
  return <>{children}</>;
}

// Any component
import { useCheckflowFeedback } from '@checkflow/sdk/react';

function MyComponent() {
  const { send, screenshot, highlight } = useCheckflowFeedback();

  const reportBug = async () => {
    const img = await screenshot();
    const annotations = await highlight();
    await send({ title: 'Bug report', type: 'BUG' });
  };
}

Vue / Nuxt

// main.ts
import { createCheckflowPlugin } from '@checkflow/sdk/vue';
app.use(createCheckflowPlugin({ apiKey: 'ck_live_...' }));

<script setup>
import { useCheckflow } from '@checkflow/sdk/vue';
const { send, screenshot, highlight } = useCheckflow();
</script>

Programmatic API

import { sendFeedback, captureScreenshot, startHighlighting, showWidget, hideWidget, destroy } from '@checkflow/sdk';

// Send feedback
await sendFeedback({ title: 'Bug', type: 'BUG', priority: 'HIGH' });

// Capture screenshot
const dataUrl = await captureScreenshot();

// Start element highlighting mode
const annotations = await startHighlighting();

// Widget control
showWidget();
hideWidget();
destroy();

Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | required | Your project API key | | endpoint | string | https://api.checkflow.space/api/v1 | API endpoint | | environment | string | production | Environment name | | enabled | boolean | true | Enable/disable SDK | | widget.position | string | bottom-right | Widget position | | widget.color | string | #1e3a5f | Widget accent color | | widget.text | string | Report Bug | Widget button text | | widget.showOnInit | boolean | true | Show widget on init |

License

MIT