Formbricks Browser JS Library

Please see Formbricks Docs. Specifically, Quickstart/Implementation details.

What is Formbricks

Formbricks is your go-to solution for in-product micro-surveys that will supercharge your product experience! 🚀 For more information please check out formbricks.com.

How to use this library

1. Install the Formbricks package inside your project using npm:

npm install @formbricks/js

1. Import Formbricks and initialize the widget in your main component (e.g., App.tsx or App.js):

import formbricks from "@formbricks/js";

if (typeof window !== "undefined") {
  formbricks.setup({
    workspaceId: "your-workspace-id",
    appUrl: "https://app.formbricks.com",
  });
}

Replace your-workspace-id with your actual workspace ID. You can find your workspace ID in the Setup Checklist in the Formbricks settings. If you want to use the user identification feature, please check out our docs for details.

environmentId is still accepted for backward compatibility but is deprecated and will be removed in a future version. Prefer workspaceId.

Renderer prefetching and Content Security Policy

The SDK prefetches the survey renderer by default. If your host application's Content Security Policy blocks these prefetch requests, disable them during setup:

formbricks.setup({
  workspaceId: "your-workspace-id",
  appUrl: "https://app.formbricks.com",
  prefetch: false,
});

The renderer still loads when a survey is triggered. Omitting prefetch preserves the default; prefetch: true explicitly enables prefetching. This requires a Formbricks instance serving js-core with prefetch support. Older instances ignore the option, so upgrading this npm package alone does not disable their prefetch requests.

Dark mode

Surveys render light by default. Pass appearance to setup(), or change it at any time with setAppearance(): "light", "dark", or "system" to follow the visitor's browser setting. An open survey switches in place. Requires Formbricks 6.1 or later.

formbricks.setup({
  workspaceId: "your-workspace-id",
  appUrl: "https://app.formbricks.com",
  appearance: "system",
});

formbricks.setAppearance("dark");

For more detailed guides for different frameworks, check out our Framework Guides.