> 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/electron-app-example.md).
# Electron app example
### How to Install BetterBugs Feedback Widget in Electron apps
{% hint style="info" icon="lightbulb" %}
**PREREQUISITES**
Here’s what you need to set up the feedback widget:
* Electron app.
* Workspace-Wide API Key.
* BetterBugs Project API key.
{% endhint %}
Here are the steps for it:
{% stepper %}
{% step %}
#### Generate API key and Project ID
Log in to your BetterBugs.io dashboard and generate API key and Project ID from Workspace Settings. You’ll need it them initialize the feedback widget in the following steps.
[**Steps for Generating API Key and Project ID**](/developer-guide/betterbugs-web-sdk/installation.md)
{% endstep %}
{% step %}
#### Install BetterBugs Web SDK: Add CDN script to the HTML head tag in your app
Add the following CDN script in the Electron app’s HTML head:
```html
```
**We’ve used the CDN script here for the demo setup**. You can also install the SDK files in your application using npm or yarn and modify the JavaScript syntax accordingly.
{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk@latest`
{% endtab %}
{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk@latest`
{% endtab %}
{% endtabs %}
{% hint style="info" %}
Make sure to install `npm/yarn` package the latest **BetterBugs Web SDK version (0.0.44)**:
{% endhint %}
{% endstep %}
{% step %}
#### Configure Electron app for BetterBugs SDK: Add the following code to TypeScript src/main.ts file
Add the following code inside `app.whenReady()` in your `main.ts` file, **before creating the application window**, to configure a custom screen capture handler using `session.defaultSession.setDisplayMediaRequestHandler`
You can replace the entire file code with the below code in the TypeScript file located at **src/main.ts**.
```javascript
import { app, BrowserWindow, session, desktopCapturer } from "electron";
// Wait for the app to be ready before creating the window
app.whenReady().then(() => {
// Configure session before creating window
session.defaultSession.setDisplayMediaRequestHandler(
(request, callback) => {
desktopCapturer.getSources({ types: ["screen"] }).then((sources) => {
callback({ video: sources[0], audio: "loopback" });
});
},
{ useSystemPicker: false }
);
createWindow();
});
function createWindow() {
const mainWindow = new BrowserWindow();
// Load the index.html file
mainWindow.loadFile("index.html");
mainWindow.setFullScreen(true);
}
```
{% endstep %}
{% step %}
#### Initialize the Widget (with default UI)
Next, add the following JavaScript code snippet to your HTML file to initialize the SDK widget. **Make sure to add your Workspace-Wide API key and Project ID in the function**:
```html
```
{% endstep %}
{% step %}
#### Customize the Widget UI (Optional)
You can customize the SDK with your brand colors and design from the initialization function:
```html
```
{% endstep %}
{% step %}
#### Test the Setup
To test the setup, run the desktop app locally with the following command (or with the one that you might be using):
```javascript
npm run dev
```
{% endstep %}
{% endstepper %}
The feedback 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,
* Please check if you’ve correctly entered the API key and Project ID.
* 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.
{% endhint %}
You're good to go.