React app example

Quick installation guide to setup the BetterBugs Web SDK widget for your React applications.

How to install BetterBugs Web SDK in React apps

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 React project’s root terminal, run the following command to install the SDK files in your application using npm or yarn. We’ve used npm for this demo setup.

npm install @betterbugs/web-sdk

3

Initialize the SDK (with default UI)

Use the following initialization code in your React app’s component. Don’t forget to add your BetterBugs project API key to the code.

import { useEffect, useRef } from "react";

function App() {
  // Initialization Code
  const bbInstanceRef = useRef(null);
  useEffect(() => {
    let isMounted = true;
    const initBetterbugs = async () => {
      if (typeof window !== "undefined") {
        const { default: Betterbugs } = await import("@betterbugs/web-sdk");
        const instance = new Betterbugs({
          // Replace with your BetterBugs Project API Key
          apiKey: "YOUR-API-KEY-GOES-HERE",
        });
        if (isMounted) {
          bbInstanceRef.current = instance;
        }
      }
    };

    initBetterbugs();
    return () => {
      isMounted = false;
      bbInstanceRef.current?.destroy?.();
    };
  }, []);

  // Example Component
  return (
    <>
      <h1>BetterBugs Web SDK Widget | React</h1>
    </>
  );
}

export default App;
4

Customize the SDK widget UI (Optional)

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

import { useEffect, useRef } from "react";

function App() {
  // Initialization Code
  const bbInstanceRef = useRef(null);

  useEffect(() => {
    let isMounted = true;
    const initBetterbugs = async () => {
      if (typeof window !== "undefined") {
        const { default: Betterbugs } = await import("@betterbugs/web-sdk");
        const instance = new Betterbugs({
          // Replace with your BetterBugs Project API Key
          apiKey: "YOUR-API-GOES-HERE",

          // UI Customization Examples
          position: { top: "20px", right: "20px" },
          styles: {
            primaryColor: "#e41c38",
            primaryTextColor: "#fff",
            theme: "light",
          },
        });
        if (isMounted) {
          bbInstanceRef.current = instance;
        }
      }
    };

    initBetterbugs();
    return () => {
      isMounted = false;
      bbInstanceRef.current?.destroy?.();
    };
  }, []);

  // Example Component
  return (
    <>
      <h1>BetterBugs Web SDK Widget | React</h1>
    </>
  );
}

export default App;
5

Test the setup

To test the setup, run your local dev server (http://localhost:5173/) with the following command (or with the one that you might be using):

npm run dev

The Web SDK widget should be available at the bottom right side of your app screen (with the default UI).

You're good to go.

Last updated

Was this helpful?