Skiff Capture

Skiff Capture is the in-app feedback layer for Skiff. It lets users report bugs from inside your app and sends Skiff the screenshot, page context, browser/runtime details, and user note needed to create fix-ready tickets.

Install

SDK install

Recommended for React, Next.js, and Vite apps.

pnpm add @getskiff/capture

or:

npm install @getskiff/capture

Mount Skiff Capture near your app root:

"use client"

import { SkiffCapture } from "@getskiff/capture"

export function SkiffCaptureProvider() {
  return (
    <SkiffCapture
      appId="YOUR_APP_ID"
      publicKey="YOUR_PUBLIC_KEY"
    />
  )
}

You can also use the lower-level API:

import { initSkiff } from "@getskiff/capture"

const destroy = initSkiff({
  appId: "YOUR_APP_ID",
  publicKey: "YOUR_PUBLIC_KEY",
})

Script install

Use this for quick tests, static HTML, or non-React apps.

<script
  src="https://app.getskiff.com/skiff.js"
  data-app-id="YOUR_APP_ID"
  data-public-key="YOUR_PUBLIC_KEY"
  defer></script>

The script URL is stable. Users should not need to add or update manual version query strings such as ?v=5.

The screenshot renderer is loaded on demand from https://app.getskiff.com/skiff-screenshot.js, so the initial widget script stays lighter.

Getting Keys

1. Sign in to Skiff.
2. Create an app.
3. Copy the app ID and public key from the install modal.

The public key is safe to use in client-side code, similar to a Stripe publishable key. Configure allowed origins in Skiff settings to scope where reports can be submitted from.

Configuration

SDK props / initSkiff() config

{
  appId: string
  publicKey: string
  apiUrl?: string
  assetBaseUrl?: string
  environment?: string
  branch?: string
  version?: string
  sourceType?: "user" | "tester" | "dev" | "qa"
}

Script attributes

| Attribute | Required | Default | Notes | | --- | --- | --- | --- | | data-app-id | yes | - | Skiff app ID | | data-public-key | yes | - | Client-safe public key | | data-api-url | no | Skiff production URL | Override for local/dev Skiff | | data-asset-base-url | no | script origin | Override where lazy widget assets are loaded from | | data-environment | no | auto | development on localhost, otherwise production | | data-branch | no | - | Current git branch | | data-version | no | - | Release/build version | | data-source-type | no | user | user, tester, dev, or qa |

When loaded with a script tag, Skiff also exposes:

window.Skiff.init({ appId, publicKey })
window.Skiff.destroy()

What Gets Captured

• User note
• Screenshot
• Selected element details
• Page URL and viewport
• Environment, branch, and version
• Recent console entries
• Failed network requests
• Breadcrumbs and runtime context

AI processing happens server-side after submission.