# 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](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation)
{% 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.