JavaScript SDK

The Bugbattle SDK for JavScript is the easiest way to integrate Bugbattle into your apps! Achieve better app quality & ratings with comprehensive in-app bug reporting. BugBattle offers affordable In-App Bug Reporting for Apps, WebApps & Websites.

The new JavaScript SDK does not require any configuration by code. Simply add the global widget code and visually configure the Bugbattle widget within your project settings (widget) based on your needs.

πŸš€ Getting started

For the SDK to work, you need an API Token. Start your free trial at app.bugbattle.io to get your API token.

πŸ— Installation

Bugbattle CDN
Bugbattle CDN

Add the following code snippet to your website's / webapp's <head>-tag.

<script src="https://widget.bugbattle.io/widget/YOUR-SDK-TOKEN-HERE"></script>

Congrats, you are now all set πŸŽ‰ Report your first bug by using the feedback button.

πŸ‘·β€β™‚οΈ Advanced Installation

Bugbattle loads async, which means you need to wait until it is loaded. We offer a callback (window.onBugBattleLoaded), which get's called once Bugbattle has been loaded successfully.

<script>
// Wait for Bugbattle to be loaded.
window.onBugBattleLoaded = function (BugBattle) {
// Attach custom data specific to your application
BugBattle.attachCustomData({
type: "office_dog",
name: "Freija"
});
// Set your customer's email, so the customer won't get asked.
BugBattle.setCustomerEmail("[email protected]");
};
</script>
<script src="https://widget.bugbattle.io/widget/Vum3912Ljoe4IJlQfd5WO6GgD76EJalK"></script>

πŸ’¬ Feedback type options

Especially in live environments it's recommended to add your own custom feedback type options. The following code block shows a sample of two feedback type options "Support" and "Report an issue". This allows you to handle support inquiries differently, for example by opening intercom or a contact form.

Feedback type options ("Support" & "Report an issue")
BugBattle.setFeedbackTypeOptions([
{
title: "Support",
description: "Get in touch with us. We are here to help.",
icon: "https://jssdk.bugbattle.io/res/support.svg",
action: () => {
alert("Open Intercom for example.");
},
},
{
title: "Report an issue",
description: "Something is broken? Let us know!",
icon: "https://jssdk.bugbattle.io/res/bug.svg",
action: () => {
BugBattle.startBugReporting();
},
},
]);

🎨 Customization

Create a stunning user experience by customizing how the Bugbattle widget looks like.

Main color

Sets the main color (color schema). Default value: #398CFE

BugBattle.setMainColor("#086EFB");

Logo url

Sets the main logo url within the widget. Defaults to the Bugbattle logo

BugBattle.setLogoUrl("https://yourawesomelogo.png");

Powered by Bugbattle

Enable or disable the powered by Bugbattle logo. Default value: true

BugBattle.enablePoweredByBugbattle(true);

Customer email address

Pre-fills the customer's email address.

BugBattle.setCustomerEmail("[email protected]");

Feedback button position

Changing the default button position is pretty straight forward. Simply overwrite the default css to move the button to the desired position.

Example for bottom left positioning

.bugbattle--feedback-button {
top: unset;
right: unset;
left: 100px;
transform: rotate(90deg) translateY(-50%);
bottom: -40px;
}

🀠 Advanced methods

With the following methods you can customize your bug reports.

App build number

Default value: not set

BugBattle.setAppBuildNumber(5);

App version code

Default value: not set

// Sets the app's version code.
BugBattle.setAppVersionCode("v5.0");

Custom data

Default value: {}

// Attaches custom data to the bug reports.
BugBattle.setCustomData({
test1: "Battle",
data2: "Unicorn"
});

Disable user screenshot

Default value: false

// Sets weather to enable or disable the user screenshot step within the bug reporting flow.
BugBattle.disableUserScreenshot(true);

🌎 Network logging

Bugbattle allows you to monitor all network requests for a better understanding of what's happening within your web-apps & websites. The feature is currently in BETA. Please enable network logging by calling the following method right after initializing the SDK.

Network logs won't be captured by default.

// Enables the network logger.
BugBattle.enableNetworkLogger();

πŸŽ₯ Replays

Bugbattle Replays offer session replays prior to a bug report. This allows you to gain a better understanding of how a bug occurred. The great thing is that we don't require any further user permissions for the replays.

Replays are disabled by default.

BugBattle.enableReplays(true);

πŸ•΅οΈ Privacy policy

Enables the privacy policy check. Enabling and setting your own privacy policy is recommended in order to comply to the GDPR. Default value: false

BugBattle.enablePrivacyPolicy(true);

Sets the privacy policy. Default value: https://www.bugbattle.io/pages/privacy-policy​

BugBattle.setPrivacyPolicyUrl("https://someawesomesite...");

πŸ’₯ Crash detector

Bugbattle ships with an automated crash detector. As soon as a JS error occurs the crash detector triggers a bug report. The second argument allows you to choose between triggering a normal bug report (with UI) and a silent bug report within the background, so the user won't notice the crash.

// Enables the crash detector
BugBattle.enableCrashDetector(enabled: boolean, silent?: boolean)

🀠 Activation methods

Currently you can choose between two activation methods, that initiate the bug reporting workflow.

// This will add a feedback bottom to the page
BugBattle.FEEDBACK_BUTTON
// This allows you to manually trigger the bug reporting workflow
BugBattle.NONE
`

Manual trigger

If you want to manually trigger the bug reporting workflow, simply call the following method:

// Initiates the bug reporting workflow.
BugBattle.startBugReporting();

Shortcut trigger

Enable or disable this feature with the following methods. Default value: false

You can also activate the bug reporting flow with the shortcut STRG + i / CONTROL + i.

BugBattle.enableShortcuts(true);

πŸ₯· Silent bug reports

Sometimes you know that something went wrong, but don't want to bother the user. In this case, you may want to send a silent bug report by calling the following method:

// Sends a silent bug report.
BugBattle.sendSilentBugReport("[email protected]", "description", BugBattle.PRIORITY_MEDIUM);

The priority must be "LOW", "MEDIUM" or "HIGH".

  • BugBattle.PRIORITY_LOW

  • BugBattle.PRIORITY_MEDIUM

  • BugBattle.PRIORITY_HIGH

Silent bug reports can also be automatically triggered in combination with our crash detector.

🀝 Need help?

We are here to help! [email protected]​