Start widget with npm or yarn

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

PREREQUISITES

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

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

• API key from the BetterBugs project to manage submitted bug reports.

How to install the BetterBugs Web SDK widget using npm/yarn

Here are the steps for it:

1

Generate an API key from Project Settings

Log in to your BetterBugs dashboard and generate an API key from Project Settings. You’ll need it to initialize the SDK in the following steps.

Steps for generating API key

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

yarn

yarn add @betterbugs/web-sdk

3

Initialize the SDK (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 project API key in the function:

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

const startBB = new Betterbugs({
  // Replace with your BetterBugs project API key
  apiKey: "YOUR-API-KEY-GOES-HERE",
});

startBB();

4

Customize the SDK 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({
  // Replace with your BetterBugs project API key
  apiKey: "YOUR-API-KEY-GOES-HERE",
  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 Web SDK widget should be available at the bottom right side of your app screen (with the default UI).