Developer docs

BugBoard SDK

An embeddable feedback widget for your product. Install once, configure visually from the dashboard, override anything from code. Works with React, vanilla JS, and a single <script> tag.

Drop-in

One import, one apiKey, one prop. Zero backend wiring.

On-brand

CSS variable override per token. Custom CSS escape hatch.

Origin-locked

Per-key origin allowlist. Rotate or revoke any key instantly.

Quickstart

Get a working widget in under a minute.

1Create an account at bugboard.io.
2Generate a publishable key in Dashboard → Developers.
3Install the package below and paste the snippet into your app root.

Install

npm install @bugboard/react

Use

app/layout.tsx

tsx

style="color:#c084fc">import { BugBoardFeedback } style="color:#c084fc">from "@bugboard/react";

style="color:#c084fc">export style="color:#c084fc">default style="color:#c084fc">function RootLayout({ children }) {
  style="color:#c084fc">return (
    <html lang="en">
      <body>
        {children}
        <style="color:#f472b6">BugBoardFeedback
          apiKey="pk_live_…"
          mode="bubble"
          position="bottom-right"
        />
      </body>
    </html>
  );
}

That's it.No backend required for the publishable key path. The widget authenticates against the BugBoard API directly, scoped to your workspace and limited to the origins you whitelisted.

Admin configuration

Everything you can control without touching code, from Dashboard → Developers.

API keys

Generate publishable keys with origin allowlists. Rotate or revoke any key — sessions tied to a revoked key stop instantly.

Default mode + position

Pick the default display mode and corner. Devs can override per-install, but the default is your fallback.

Color & label

Override your board theme color for the widget specifically. Set the trigger button label.

Enabled features

Turn off submit, vote, comment, roadmap, or changelog at the workspace level. Off here = off everywhere, even if the SDK requests it.

Dashboard/Settings/Developers

Live preview

Settings

Team
Developers
Integrations
Board

Developers

Generate keys and control how the widget renders.

Default mode

Bubble

Position

Bottom right

Primary color

#452fdf

Display modes

Four ways to surface the widget. Pick the one that matches how your product is built.

★

Inline + trigger require a targetPass a CSS selector or an HTMLElement via the target prop. The React wrapper does this automatically — drop the component where you want it mounted.

Position

Bubble placement. Modal/inline/trigger ignore this — they render where you mount them.

Theming

Three knobs cover 90% of brand needs without writing CSS.

primaryColorstring

Brand color shortcut. Sets primary + auto-generates tints + contrast.

<style="color:#f472b6">BugBoardFeedback primaryColor="#0ea5e9" />

radius'sm' | 'md' | 'lg'

Modal/card corner radius. sm=12px · md=20px · lg=24px.

<style="color:#f472b6">BugBoardFeedback radius="lg" />

appearance'light' | 'dark' | 'auto'

Color scheme. `auto` follows the user's OS preference.

<style="color:#f472b6">BugBoardFeedback appearance="auto" />

CSS variables

Granular override per token. Pass any subset via the cssVars prop — unspecified keys keep their defaults.

KeyDescriptionDefault

primaryBrand color used for buttons, focus rings, vote highlight.#452fdf (or your board theme color)

primaryContrastText/icon color on top of the primary color.Auto (white or near-black via WCAG luminance check)

surfaceModal / card / inline embed background.#ffffff

surfaceMutedSoft tint used for tabs, footer banner, hover states.#f2eeff

borderStandard borders for items, inputs, releases.#e2e8f0

textPrimary text color (titles, body).#0a0a0a

textMutedSecondary text (metadata, descriptions).#5b5871

radiusModal corner radius. Overrides `radius` prop.24px (with radius='lg')

shadowBase shadow token used for small surfaces.0 4px 12px -6px rgba(25,24,56,0.12)

fontFont stack used inside the widget.'Google Sans', ui-sans-serif, system-ui, sans-serif

app/layout.tsx

tsx

<style="color:#f472b6">BugBoardFeedback
  apiKey="pk_live_…"
  cssVars={{
    primary: "#0ea5e9",
    surface: "#ffffff",
    surfaceMuted: "#f0f9ff",
    border: "#e0f2fe",
    text: "#0c4a6e",
    textMuted: "#0369a1",
    radius: "20px",
    shadow: "0 10px 30px -10px rgba(14, 165, 233, 0.25)",
    font: "'Inter', system-ui, sans-serif",
  }}
/>

Custom CSS

Final escape hatch. Raw CSS appended after the base stylesheet. Wins over defaults except !important rules.

SecurityThe customCss string is rendered into the DOM via a <style> element. Treat it as code, not data. The SDK strips obvious break-out patterns (</style>, expression(), javascript:) but cannot prevent every CSS-based exfiltration vector. Never pass user-supplied CSS.

app/layout.tsx

tsx

<style="color:#f472b6">BugBoardFeedback
  apiKey="pk_live_…"
  customCss={style="color:#86efac">`
    .bugboard-modal {
      border-radius: 32px;
      box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.35);
    }
    .bugboard-trigger {
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .bugboard-bubble {
      animation: bounce 2s ease-in-out infinite;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
  `}
/>

Class reference — most-overridden selectors: .bugboard-bubble, .bugboard-modal, .bugboard-header, .bugboard-body, .bugboard-tabs, .bugboard-tab, .bugboard-item, .bugboard-vote, .bugboard-button, .bugboard-input, .bugboard-textarea, .bugboard-footer-banner.

Features

Capabilities the widget can expose. Toggle each on/off from the admin — the SDK can request a subset via the views prop but never override an admin-disabled feature.

Browse feed

Show existing requests with statuses + vote counts.

Submit feedback

Open a form to capture new ideas from your users.

Upvote

Let users prioritize the requests they care about.

Comment

Thread discussions on each individual feedback item.

Roadmap

Planned / in-progress / completed columns.

Changelog

Release notes surfaced inside the widget.

app/layout.tsx

tsx

<style="color:#f472b6">BugBoardFeedback
  apiKey="pk_live_…"
  views={["list", "vote", "submit"]}
/>

Imperative API

Open or close the widget from anywhere in your app. Works with all modes.

any-component.tsx

tsx

style="color:#c084fc">import { useBugBoard } style="color:#c084fc">from "@bugboard/react";

style="color:#c084fc">export style="color:#c084fc">function HelpButton() {
  style="color:#c084fc">const { open, close } = useBugBoard();
  style="color:#c084fc">return (
    <button onClick={open}>Open feedback</button>
  );
}

Or use the global functions from the vanilla SDK:

style="color:#c084fc">import { open, close, reset, destroy } style="color:#c084fc">from "@bugboard/sdk";

open();      style="color:#6b6890">// open the widget
close();     style="color:#6b6890">// close it
reset();     style="color:#6b6890">// clear the session
destroy();   style="color:#6b6890">// unmount + cleanup

Full props reference

Every prop accepted by BugBoardFeedback (React) and BugBoard.init (vanilla).

PropTypeDefaultDescription

apiKeystring—Required. Publishable key generated from the dashboard.

apiUrlstringhttps://api.bugboard.ioOverride the API endpoint. Only useful for self-hosting.

mode'bubble' | 'modal' | 'inline' | 'trigger''bubble'Display mode. See Display modes section.

position'bottom-right' | 'bottom-left' | 'top-right' | 'top-left''bottom-right'Where the floating bubble anchors. Ignored by other modes.

triggerLabelstring'Feedback'Label inside the trigger / custom pill button.

primaryColorstring (hex)Board theme colorQuick brand color override. Same as cssVars.primary.

cssVarsPartial<BugBoardCssVars>—Granular token override (surface, border, text, radius, shadow, font, etc).

customCssstring—Raw CSS injected after base styles. Sanitized for <style>/<script> break-outs.

radius'sm' | 'md' | 'lg''md'Corner-radius scale. sm=12px · md=20px · lg=24px.

appearance'light' | 'dark' | 'auto''auto'Color scheme. `auto` follows OS preference.

zIndexnumber2147483600Stacking context for the bubble + overlay.

viewsSdkFeature[]All enabled on adminSubset of features to expose. Disabled features in admin are never shown.

targetstring | HTMLElement—Mount target for inline / trigger modes.

onReady() => void—Fires once the widget mounts successfully.

onError(err: Error) => void—Fires on init / network failures.

Ready to ship?

Create your board, generate a publishable key, and you'll be collecting feedback in your product in under five minutes.

Get started