Developer Docs

SDK: Website Survey

Overview

The Formbricks JS SDK is a 2-in-1 SDK for seamlessly integrating both App Surveys and Website Surveys into your projects. In this section, we'll explore how to leverage the SDK specifically for website surveys.

Install

npm

npm install @formbricks/js

Methods

Initialize Formbricks

Initialize the Formbricks JS Client specifically for website surveys, ideal for public-facing websites:

you cannot set any other attribute other than language (optional) in website surveys.

Initialize Formbricks

import formbricks from "@formbricks/js/website";

formbricks.init({
  environmentId: "<your-environment-id>", // required
  apiHost: "<your-api-host>", // required
  attributes: {
    // optional
    language: "de", // optional
  },
});

The moment you initialise Formbricks, your users will start seeing surveys that get triggered on simpler actions such as on New Session, Page Exit, & other custom actions!

Formbricks JS is a client SDK meant to be run client-side in their browser so make sure the window object is accessible. Below is an example of how you can set it!

if (window !== undefined) {
  formbricks.init({
    environmentId: "<your-environment-id>",
    apiHost: "<your-api-host>",
  });
} else {
  console.error("Window object not accessible to init Formbricks");
}

Track Action

Track session actions to trigger surveys based on their interactions on your website, such as button clicks or scrolling:

formbricks.track("Clicked on Claim");

Reset

Reset the current instance and fetch the latest surveys and state again:

formbricks.reset();

Register Route Change:

Listen for page changes and dynamically show surveys configured via no-code actions in the Formbricks website:

This is only needed when your framework has a custom routing system and you want to trigger surveys on route changes. For example: NextJs

formbricks.registerRouteChange();

Debug Mode

To enable debug mode in Formbricks, add ?formbricksDebug=true to your app’s URL.

For example, if you’ve integrated Formbricks JS to your app hosted at https://example.com, then change the URL to https://example.com?formbricksDebug=true and refresh the page, now view the console logs to see the debug mode live in action.

This activates detailed debug messages in the browser console, providing deeper insights into Formbricks' operation and potential issues.

If you have any questions or need help, feel free to reach out to us on our Discord