> For the complete documentation index, see [llms.txt](https://docs.betterbugs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation/react-app-example.md).

# React app example

### How to install BetterBugs Web SDK in React apps

{% hint style="success" %}
Check out the [**GitHub repo** for the React example app](https://github.com/betterbugs/web-sdk/tree/main/examples/01-React-app-example) covered here.
{% endhint %}

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key

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

[Steps for generating API key](/developer-guide/betterbugs-web-sdk/installation.md)
{% endstep %}

{% step %}

#### 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**.

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk`
{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### 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**.

```jsx
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;
```

{% endstep %}

{% step %}

#### Customize the SDK widget UI (Optional)

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

```jsx
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;
```

{% endstep %}

{% step %}

#### 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):

```javascript
npm run dev
```

{% endstep %}
{% endstepper %}

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

{% hint style="warning" %}
**NOTE**: If the widget is not visible,&#x20;

* Please check if you’ve correctly entered the API key.&#x20;
* Check for the console errors, if any.&#x20;
* If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser. &#x20;
* Some ad blockers or extensions may also prevent the Widget from running. Please turn them off and try running the application again. It should work fine.
  {% endhint %}

You're good to go.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation/react-app-example.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.