pick a feature - web SDK

Embeddable feature-request board for any website. Your users suggest features, vote on what matters, and comment; you see it all in the pick a feature dashboard. Shares a board with the Flutter SDK, so web and mobile votes add up.

Script tag (any site)

<script
  src="https://pickafeature.com/sdk/v1/pickafeature.js"
  data-api-key="YOUR_API_KEY"
  defer
></script>

<!-- Any element with this attribute opens the board -->
<button data-pickafeature-open>Feature requests</button>

Optional data- attributes on the script tag: data-theme="light|dark|auto", data-locale="auto|en|es|pt|fr|de|it|ja|ko|zh|ru|tr" (UI language; auto follows the visitor's browser), data-primary-color="#6366f1", data-launcher="false" (hide the floating button), data-position="bottom-left", data-label="Feedback", data-email-field="false", data-title and data-subtitle (board header text; set both to "" on an inline board that already has a heading above it).

npm

npm i pickafeature

import PickAFeature from "pickafeature";

PickAFeature.init({
  apiKey: "YOUR_API_KEY",
  theme: "auto",            // "light" | "dark" | "auto"
  locale: "auto",           // "auto" follows the browser; or "es", "pt", "fr", "de", "it", "ja", "ko", "zh", "ru", "tr"
  primaryColor: "#6366f1",
  launcher: false,          // or true / { position: "bottom-right", label: "Feedback" }
  user: { id: currentUser.id, email: currentUser.email }, // optional
  strings: { title: "What should we build next?" },       // override any UI text, on top of the locale
  onSubmit: ({ id, title }) => analytics.track("feature_request_submitted", { id, title }),
});

PickAFeature.open();
PickAFeature.identify({ id, email }); // after sign-in
PickAFeature.reset();                 // on sign-out

React / Next.js

"use client";
import { useEffect } from "react";
import PickAFeature from "pickafeature";

export function FeatureRequestsButton({ user }) {
  useEffect(() => {
    PickAFeature.init({ apiKey: "YOUR_API_KEY", user: { id: user?.uid, email: user?.email } });
    return () => PickAFeature.destroy();
  }, [user?.uid, user?.email]);

  return <button onClick={() => PickAFeature.open()}>Feature requests</button>;
}

Headless

const api = PickAFeature.client("YOUR_API_KEY");
const requests = await api.list();
await api.vote(requests[0].id, "up");
await api.submit({ title: "Dark mode", description: "Please!" });

The widget renders inside a Shadow DOM so your CSS and its CSS never collide. The API key is a public project key (the same one shipped inside mobile apps); abuse is limited by per-key rate limiting on the server.

Hosted board and inline embed

Every pick a feature project also has a hosted board at https://pickafeature.com/b/<your-slug> (copy the link from the dashboard). To render the board inline in your own page instead of as a popup, pass a container:

<div id="feedback-board"></div>
<script src="https://pickafeature.com/sdk/v1/pickafeature.js" data-api-key="YOUR_API_KEY" data-container="#feedback-board" defer></script>

or PickAFeature.init({ apiKey, container: "#feedback-board" }).

Build

npm install
npm run build   # dist/pickafeature.js (IIFE), .mjs (ESM), .cjs (CommonJS), types/

This repo is mirrored from the pickafeature monorepo; issues and PRs are welcome here.