# Electron app example
### How to install BetterBugs Web SDK in Electron apps
{% hint style="success" %}
Check out the [**GitHub repo** for the **Electron** example app](https://github.com/betterbugs/web-sdk/tree/main/examples/04-Electron-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: 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`
{% endtab %}
{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk`
{% endtab %}
{% endtabs %}
{% 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 SDK (with default UI)
Next, add the following JavaScript code snippet to your HTML file to initialize the SDK widget. **Make sure to add your project API key in the function**:
```html
```
{% endstep %}
{% step %}
#### Customize the SDK 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 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,
* 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.
{% endhint %}
You're good to go.