Quickstart

Install the Feeblo widget SDK and open your first feedback widget in a few minutes.

Four steps stand between you and a working widget: install, mount, trigger, identify. None of them takes more than a minute.

Install

npm install @feeblo/sdk

npm install @feeblo/sdk @feeblo/sdk-react

Both packages ship ESM and UMD builds with no runtime dependencies. The React package re-exports everything from the core SDK, so you only need both when you want the components and hooks.

Mount the widget

Call init with your Feeblo organization ID:

import { Feeblo } from "@feeblo/sdk";

const widget = Feeblo.init("org_123");

init returns a chainable handle, so you can keep configuring it:

const widget = Feeblo.init("org_123").setBoard("roadmap");

Wrap your app in FeebloProvider. It mounts the widget and hands control to its hooks:

import { FeebloProvider } from "@feeblo/sdk-react";

<FeebloProvider organizationId="org_123">
  <App />
</FeebloProvider>

Config props like organizationId, mode, theme, and placement recreate the underlying widget when they change, so treat them as configuration rather than state.

Add a trigger

Give any element the data-feeblo-feedback attribute. The SDK scans for these elements and opens the widget when a user clicks one:

<button data-feeblo-feedback>Give feedback</button>

This works the same in React, since scanning happens at the DOM level. For programmatic control:

widget.open();

import { useFeeblo } from "@feeblo/sdk-react";

function FeedbackButton() {
  const feeblo = useFeeblo();

  return <button onClick={() => feeblo.open()}>Give feedback</button>;
}

useFeeblo also exposes close, setBoard, openModule, metadata, identify, plus reactive isOpen and isReady values. It throws outside a provider.

Identify the user

Attach a user to each piece of feedback:

Feeblo.identify({
  id: "u_1",
  email: "ada@example.com",
  name: "Ada Lovelace",
});

Pass the identity as the user prop. Changes call identify on the live widget without recreating it:

<FeebloProvider organizationId="org_123" user={currentUser}>
  <App />
</FeebloProvider>

Only id is required. Anonymous submissions work fine; add a signed token when you want posts tied to a verified identity. Identifying users covers the identity object and custom fields, Widget SSO covers signing.

Feedback collection is the default mode. Two others exist:

Updates

A card-based product updates panel:

const updates = Feeblo.init("org_123", { mode: "updates" });

Hub

Several modules behind one launcher. Pass any subset, in order. The array position decides which module shows first:

const hub = Feeblo.init("org_123", {
  mode: "hub",
  modules: ["updates", "feedback"],
});

hub.openModule("feedback");

In React, set mode and modules on FeebloProvider instead.

Configuration documents every option, including placement for the built-in launcher.

Next steps

Configuration

Modes, placement, debug logging, and every init option and provider prop.

Triggers and events

Trigger attributes, programmatic control, and widget events (useFeebloEvent included).

Quickstart

Widget modes

Next steps