Start widget with npm or yarn

Quick installation guide to start the BetterBugs feedback widget with npm or yarn.

PREREQUISITES

Here’s what you need to set up the feedback widget:

• Basic web app setup (HTML/CSS + JavaScript)

• Workspace-Wide API Key.

• BetterBugs Project API key.

How to Install the BetterBugs Feedback Widget using npm/yarn Package Managers?

Here are the steps for it:

1

Generate API key and Project ID

Log in to your BetterBugs.io dashboard and generate API key and project ID from Workspace Settings. You’ll need it them initialize the feedback widget in the following steps.

Steps for Generating API Key and Project ID

2

Install BetterBugs Web SDK using npm/yarn

In your terminal, run the following command to install the SDK files in your application using npm or yarn:

npm

npm install @betterbugs/web-sdk@latest

yarn

yarn add @betterbugs/web-sdk@latest

Make sure to install npm/yarn package the latest BetterBugs Web SDK version (0.0.44):

3

Initialize the Widget (with default UI)

In your script file, import the SDK, create a BetterBugs instance from the import class, and initialize.

Don’t forget to add your Workspace API Key and Project ID in the function::

import { Betterbugs } from "@betterbugs/web-sdk";

const startBB = new Betterbugs({
  apiKey: "YOUR_API_KEY_HERE", // Workspace API key
  projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
});

startBB();

4

Customize the Widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

import { Betterbugs } from "@betterbugs/web-sdk";

const startBB = new Betterbugs({
  apiKey: "YOUR_API_KEY_HERE", // Workspace API key
  projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
  
  position: { top: "20px", right: "20px" },
  styles: {
    primaryColor: "#e41c38",
    primaryTextColor: "#fff",
    theme: "light",
  },
});

startBB();

5

Test the Setup

Now, try running the application on your local server. The feedback widget should be available at the bottom right side of your app screen (with the default UI).