How to integrate in your web app (New Browser SDK)
Book a demoTry for free Updates

How to integrate in your web app (New Browser SDK)

Last updated:
June 28, 2021

    Today, we are super happy to announce the release of our brand-new Browser SDK! Collecting user feedback from web applications directly to your project management tool has never been so easy.

    In this article, we'll talk about how to create custom feedback buttons 🎨, add extra context to your issues (custom metadata 👀), and identify your reporters from the JavaScript Browser SDK 🕵️.

    Let's get started!

    Loading our widget using the SDK

    The easiest way to get started with the SDK is installing it from npm, to do so, run the following inside your project folder:

    npm i -D

    This will install the SDK locally and link it to your project dependencies.

    That's it, we're ready to load a widget in our app! 🚀

    Here's how:

    import markerSDK from '';
    const widget = await markerSDK.loadWidget({ 
      project: 'abcd1234567890', // <- Your unique project ID

    What is my project id, and how do I get it?

    Every project has a unique identifier that allows you to connect it with its widget. To get your project ID, first open your dashboard, then:

    1. Navigate to the project you want to collect feedback in
    2. Choose "Settings"
    3. Choose Browser SDK
    4. Copy your project ID
    Log into your project to get your ID

    If you have correctly followed the steps above, the feedback button will appear in the page!

    Here's how a regular button looks like:

    Custom button: Integrate a custom feedback button for a seamless user experience

    While the default feedback button requires no effort to work, with some development skills you can now build your own in a matter of minutes!

    The first step is to choose to hide the button in your project settings, to do so:

    1. Open your project settings
    2. Navigate to the "Button appearance" section
    3. Choose "Hide widget button"

    Now you can see that when your application loads, the feedback button is not showing up any more. That's what we need, perfect!

    The next step is to implement our custom button. For example, at, we chose to place a special option in our Help center popover to trigger our widget.

    This is more or less how it looks in our HTML:

    <button class="report-bug-button">
      <span class="icon">🐞</span> Report a bug

    Let's add a few lines in our JavaScript code to make it work...

    import markerSDK from '';
    const widget = await markerSDK.loadWidget({ 
      project: '...',
    const reportBugButton = document.querySelector('.report-bug-button');
    reportBugButton.addEventListener('click', () => {
      widget.capture(); // <- Trigger a capture and open the widget inside your app.

    It's that easy!

    Now you have your widget integrated natively

    Adding Metadata: "Can I add more context?" 🕵️

    There are situations where adding extra information inside your issues can help developers a lot. The Browser SDK fully supports custom metadata, so adding additional information to issues is really dead-simple.

    Let's see how it works:

    Let's say your site is a marketplace and the user is on a product item page, we can add this information to the issue with a few lines of JavaScript:

      product: 'Orange Juice',
      stock: 122,
      price: 3.29,

    Now, when your users report a bug, will inject this metadata directly inside your issue so that your developer doesn't need to look after that information, it's just there!

    Here's an example in Jira:

    You can read more on GitHub.

    Reporter identification: "I don't want to ask my reporters to login…"

    Whenever a reporter submits an issue, will ask them for their email address in order tto notify them when issues get resolved, or when comments are posted.

    But, because we've been building our web-app, and we know our user's identity, we can feed that information through the SDK so that we can skip this step by adding a few lines of code:

    // Identify our current user in the widget using the SDK
      email: '', 
      fullName: 'John Smith', 

    Regardless of the method you use, will add your reporter's information inside your issues automatically. Smooth.

    Wrapping it up

    In this article, we've been covering how easy it is to load and customize your widget via the SDK, we've demonstrated how we can inject application data, and we identified our reporters programmatically.

    All our developer documentation is available on GitHub, also we've built some examples here.

    We would love to hear your feedback on this, please do not hesitate to reach out to us inside, or to file a GitHub issue if you spot any bug!

    There's more to come in the SDK:

    • Customizing appearance (colors, labels, ...)
    • Recording user actions and custom events
    • .. and more!

    Continue reading

    Frequently Asked Questions

    Get started now

    Start free trial
    Free 15-day trial  •  No credit card required •  Cancel anytime