Configuration Options

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

You can directly add these to the SDK initialization code.

Mandatory Fields

Here are the mandatory properties for the feedback widget.

Option

Type

Description

apiKey

string

Workspace API secret. (Required*)

Allows you to scope your entire Workspace with the feedback widget.

projectId

string

Project specific API secret. (Required*)

The project to report bugs to. Required with a workspace API key; omit it if you are using a legacy project-scoped key.

Styling Options

Here are the styling options available for the feedback 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, secondaryColor?: string, secondaryTextColor?: string, textColor?: string, mutedTextColor?: string, inputBgColor?: string, fontFamily?: string, fontFamilyUrl?: string (optional) }

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

mainHeading

string

Main heading text of the widget

successMessageSubHeaderText

string

Sub-heading text when the feedback is successfully submitted

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

Option

Type

Description

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)

mediaRequired

boolean

Require a screenshot or screen recording before the report can be submitted. Ignored when both disableScreenshot and disableRecording are enabled.
Default: false

enableAnnotation

boolean

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

showActionButton

boolean

Display/hide the floating action button (widget button)

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 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 feedback widget:

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

    <!-- PKG Loading Script: Put this in the HTML head tag -->
    <script src="https://pkg.betterbugs.io/scripts/latest/index.js"></script>

    <!-- Initialize the SDK -->
    <script>
      const startBB = function () {
        if (window.Betterbugs) {
          new window.Betterbugs({
            apiKey: "YOUR_API_KEY_HERE", // Workspace API key
            projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
            
            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: "obi@example.com",
          });
        }
      };
      startBB();
    </script>
    <title>BetterBugs Web SDK Widget | JavaScript + PKG</title>
  </head>
  <body>
    <h2>BetterBugs Web SDK Widget | JavaScript + PKG</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>

PreviousDevelopment Mode

NextMethods and Event Hooks

Last updated 8 days ago

Mandatory Fields

Styling Options

Other Settings for the Feedback Widget to Control its Behavior

Example Code Snippet