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
Check out the GitHub repo for the React example app covered here.
Here are the steps for it:
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.
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;
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;
The Web SDK widget should be available at the bottom right side of your app screen (with the default UI).
NOTE: If the widget is not visible,
Please check if you’ve correctly entered the API key.
Check for the console errors, if any.
If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser.
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.
You're good to go.
Last updated
Was this helpful?