JavaScript SDK

Bugbattle JavaScript SDK Intro

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.

πŸš€ 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

npm
CDN
npm

Install the bugbattle package via npm or yarn.

npm install bugbattle --save

Import the bugbattle package.

import BugBattle from 'bugbattle';

Initialize the SDK.

BugBattle.initialize("YOUR-SDK-TOKEN-HERE", BugBattle.FEEDBACK_BUTTON);
CDN

Add the following lines to your website's / webapp's <head> tag

<script src="https://jssdk.bugbattle.io/latest/index.js"></script>
<script>const BugBattle = window.BugBattle.default;</script>
<script>
BugBattle.initialize("YOUR-SDK-TOKEN-HERE", BugBattle.FEEDBACK_BUTTON);
</script>

Initialize the SDK

Add the following code to to initialize the BugBattle JavaScript SDK. Replace "YOUR-SDK-TOKEN-HERE" with your actual SDK token from the Bugbattle dashboard.

BugBattle.initialize("YOUR-SDK-TOKEN-HERE", BugBattle.FEEDBACK_BUTTON);

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

🎨 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);

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();

πŸ•΅οΈ 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...");

🀠 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);

🀝 Need help?

We are here to help! [email protected]​