Electron app example

Quick installation guide to setup the BetterBugs Web SDK widget for your Electron applications.

How to install BetterBugs Web SDK in Electron apps

Here are the steps for it:

1

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.

Steps for generating API key

2

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>
  <head>
    <!-- Put this in the HTML head tag -->
    <script src="https://cdn.jsdelivr.net/npm/@betterbugs/web-sdk@latest/index.js"></script>
  </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.

npm install @betterbugs/web-sdk

3

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.

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);
}
4

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:

<!-- BetterBugs SDK initialization -->
<script>
      document.addEventListener("DOMContentLoaded", () => {
        window.bb = new Betterbugs({
         // Replace with your BetterBugs Project API Key
          apiKey: "YOUR-API-KEY-GOES-HERE",
        });
      });
</script>
5

Customize the SDK widget UI (Optional)

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

<!-- BetterBugs SDK initialization -->
<script>
      document.addEventListener("DOMContentLoaded", () => {
        window.bb = new Betterbugs({
          // Replace with your BetterBugs Project API Key
          apiKey: "YOUR-API-KEY-GOES-HERE",

          // UI Customization Examples
          position: { top: "20px", right: "20px" },
          styles: {
            primaryColor: "#e41c38",
            primaryTextColor: "#fff",
            theme: "light",
          },
        });
      });
</script>
6

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

npm run dev

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

You're good to go.

Last updated

Was this helpful?