Configuration options

Configure the Web SDK with customization options for UI and also tweak settings to control its behavior programmatically.

Apply visual changes for the SDK widget + tweak settings to control SDK behavior

You can directly add these to the SDK initialization code.

Styling options for visual changes

Here are the styling options available for the SDK widget.

Option
Type
Description

position

{ top? : string, left? : string, right? : string, bottom? : string }

Control the widget's position on screen

styles

{ theme?: 'light' | 'dark'; primaryColor?: string; primaryTextColor?: string; }

Set the styles of the widget

actionButtonComponent

React.ReactNode | string

Component for the action button (React component or HTML string accepted)

successMessageHeaderText

string

Main heading text when the feedback is successfully submitted

successMessageSubHeaderText

string

Sub-heading text when the feedback is successfully submitted

Other settings for the SDK widget to tweak its behavior

Here are the settings available for the SDK widget to control its behavior programmatically:

Option
Type
Description

apiKey

string

Project specific API secret. (Required*)

Allows you to connect the widget to a specific project within BetterBugs

metaData

Object literal as {key: value}

Custom metadata to attach to reports (e.g., { username: "obi wan", plan: "individual", userID: 1234, })

recordType

"recordVideo" | "domRecord"

The "recordVideo" type (recommended for SPAs) is the traditional media recording method for video and audio. It’s set by default. The "domRecord" type (recommended for Multi Page Apps) is the DOM recording method and may not be as accurate as the "recordVideo" type.

disableScreenshot

boolean

Enable/disable screenshot capturing in the widget (by default, its enabled)

disableRecording

boolean

Enable/disable screen recording in the widget (by default, its enabled)

enableAnnotation

boolean

Enable/disable annotation tools for screenshots (by default, its enabled)

showActionButton

boolean

Display/hide the floating action button (widget button)

mode

"development" | "production"

Set development or production mode.

The "development" mode can be set during development/ testing/staging, alpha testing, beta testing, bug bashes, and for QA overall. It’s set as default.

The "production" mode is for end-users, meaning the app's customers can report a bug or submit feedback in the live environment.

email

string

Set the user's email address who is reporting the bug.

Works only in "production" mode.

maxRecordingMinutes

number

Set the maximum screen recording length in minutes.

By default, it's set to 10 mins. Max mins allowed: 15 mins

emailFieldLabel

string

Set label of email field

emailFieldPlaceholder

string

Set placeholder of email field

titleFieldLabel

string

Set label of title field

titleFieldPlaceholder

string

Set placeholder of title field

descriptionFieldLabel

string

Set label of description field

descriptionFieldPlaceholder

string

Set placeholder of description field

Example code snippet

Here’s the code with some examples to apply styling and other options for the SDK widget:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- CDN Loading Script: Put this in the HTML head tag -->
    <script src="https://cdn.jsdelivr.net/npm/@betterbugs/web-sdk@latest/index.js"></script>

    <!-- Initialize the SDK -->
    <script>
      const startBB = function () {
        if (window.Betterbugs) {
          new window.Betterbugs({
            // Replace with your BetterBugs Project API key
            apiKey: "YOUR-API-KEY-GOES-HERE",
            mode: "production",
            position: { top: "20px", right: "20px" },
            styles: {
              primaryColor: "#e41c38",
              primaryTextColor: "#fff",
              theme: "light",
            },
            successMessageHeaderText: "Thank you! 🙏🏻",
            successMessageSubHeaderText: "Your feedback is submitted.",
            metaData: { username: "obi wan", plan: "individual", userID: 1234 },
            email: "[email protected]",
          });
        }
      };
      startBB();
    </script>
    <title>BetterBugs Web SDK Widget | JavaScript + CDN</title>
  </head>
  <body>
    <h2>BetterBugs Web SDK Widget | JavaScript + CDN</h2>
    <p>The button 👇🏻 will throw a random error in console</p>
    <button class="btn">Click here</button>
    <p>BetterBugs catches the error</p>

    <script>
      document.querySelector(".btn").addEventListener("click", function () {
        throw new Error(`Random Error: ${Math.trunc(Math.random() * 10) + 1}`);
      });
    </script>
  </body>
</html>
PreviousProduction modeNextMethods and Event hooks

Last updated

Was this helpful?