Using Web SDK

Check out the steps for using the Web SDK widget in your apps.

Once you’re good with the installation part, you can start using the widget in your app to get bug reports or feedback from the end users.

Before you start with the usage part, note that the widget comes with two modes:

• Development mode

• Production mode

What is the difference between the production and development modes in the Web SDK widget?

1 - Development mode (set as default) — For internal teams (QA, Devs, Managers, Stakeholders)

The development mode allows you to configure your SDK for bug reporting purposes for internal team usage. It’s perfect for sharing bug reports among the QA, developers, project managers, or stakeholders in the development or testing phases.

You can easily configure the SDK to run in the “development” mode from the initialization snippet by setting the “mode” property to “development”.

NOTE: This is an optional setting. Even if you skip adding this to your initialization code, it will run in the “development” mode by default. However, adding this makes your code easier to read and understand for your co-developers.

Here’s what the initialization code snippet looks like:

const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR-API-KEY-GOES-HERE", // Replace with your BetterBugs Project API key
      mode: "development", // Adding this key: value is optional
    });
  }
};
startBB();

Check out the complete flow for using the SDK in development mode.

2 - Production mode — For end users and customers

The production mode works perfectly for a live app. Use this mode to collect feedback or bug reports in the production environment.

You can set the SDK to run in the “production” mode from the initialization snippet by setting the “mode” property to “production”.

NOTE: You need to explicitly set this mode to run the widget in the “production” environment.

Here’s what the initialization code snippet looks like:

const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR-API-KEY-GOES-HERE", // Replace with your BetterBugs Project API key
      mode: "production", 
    });
  }
};
startBB();

Check out the complete flow for using the SDK in production mode.