Welcome to our "Getting started guide for SaaS," aka "Integrate Marker.io with your web app." Here we will explore the main steps you need to implement, and we will highlight some recent changes that we made at Marker.io to simplify your bug reporting journey.

Destination

Widget

Forms

Feedback

Summary

Destination

Destination Introduction

The Marker.io destination is where all the magic happens. We use a destination to connect your web app directly to your favorite pm/dev tools, including Jira, GitHub, Trello, ClickUp, and many more.

Add a destination

Let's get to the point and add a destination. We will connect to Jira for our example.

Et voila, as simple as that, we have now connected to Jira.

Widget

The next step is to connect the website/web app to Marker.io.

Widget Installation

You may install our widget in two different ways. You can use the standard JavaScript snippet installation or use npm if you prefer to integrate natively. Find out more about each option below and choose which one works best for your needs.

Install our widget using the JavaScript snippet

If you have access to your source code, the JavaScript snippet installation is very straightforward. Copy the snippet code and place it anywhere above the closing </head> tag on your website.

Install our widget via npm

To install using npm, run the following inside your project folder:

npm i -D @marker.io/browser

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

Now load the Marker.io widget in our app with the following commands:

import markerSDK from '@marker.io/browser';
const widget = await markerSDK.loadWidget({
destination: 'abcd1234567890', // <- Your unique destination ID
});

To get your unique destination id, log into your dashboard at https://app.marker.io, then:

  1. Navigate to your required destination

  2. Choose "Settings"

  3. Choose Browser SDK

  4. Copy your destination ID

Metadata

ReporterID

Using the JavaScript snippet method above, you can edit the code to include your user's email and full name if you installed our widget. This saves both time and potential error from your users when they are submitting feedback.

Before:

<script>
window.markerConfig = {
destination: '612d0200afd1d1246cb5',
source: 'snippet' };
</script>

After:

<script> window.markerConfig = {
destination: '612d0200afd1d1246cb5',
source: 'snippet',
reporter: {
email: myApp.getUserEmail(),
fullName: myApp.getUserFullName(), }, };
</script>

Alternatively, you may use a dedicated method to achieve the same result as above.

widget.setReporter({ email: myApp.getUserEmail(), fullName: myApp.getUserFullName(), });

When your user is reporting feedback, their name or email is no longer requested as it's automatically passed through.

Custom Metadata

Marker.io provides a useful feature that goes beyond typical issue-reporting - custom metadata fields. This will provide extra information for your developers. Custom metadata is easy to implement and fully supported by Marker.io. Consider using it to help developers make more informed decisions about how they should prioritize issues.

Again metadata can be loaded either inside the widget snippet code or using a dedicated JavaScript method.

Option 1: Inside the snippet code:

window.markerConfig = { destination: '612d0200afd1d1246cb5', source: 'snippet', customData: { userType: getUserType(), appVersion getAppVer(), sentrySession: 'sentry.event.[USEREVENT]', } };

Option 2: dedicated JavaScript method:

Marker.setCustomData({ userType: getUserType(), appVersion getAppVer(), sentrySession: 'sentry.event.[USEREVENT]', });

Button

Use our button

You can make several changes to our Marker.io button. By default, the button is red, placed on the right-center of the window, and the title is "Report a bug."

Edit our button

Within the "Button appearance" settings, you can make lots of changes. Here we will change the color to blue, the test to "Feedback?" and the placement to the bottom center.

Use a custom button

You may wish to bind our widget to your very own custom button, and this is also possible.

The first step to take in this instance is to hide our button:

Button appearance β†’ Button visibility β†’ Hide widget button.

Next, decide on the custom HTML, CSS, etc., you will be using for your button.

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

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

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

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

‍

Now we have our own custom button set up:

Forms

Depending on your integration, you will have many choices on what field you display to your users to collect feedback.

Show/Hide fields

It is important to remember that your users may get overwhelmed if they have too many fields to complete in their feedback. By default, we keep the form really simple.

However, you may decide to add more fields, and you can do this within the destination settings β†’ Widget β†’ Guest form.

For example, here we will include priority and due date:

Preset values

One of the most requested features we've had in recent months is the ability for our users to assign a preset value on specific fields and hide these fields completely.

Some ideal use cases of Preset Values are:

  • Automatically assign a reviewer each time a client reports an issue

  • Add a specific label to all of your incoming feedback

  • Set default values on specific fields when your internal testers report feedback

Check out our blog post and YouTube clip on preset values.

Guest form versus Member form

If you have users that would like to send you more detailed and advanced reporting, like internal teams, you may invite them as members of your Marker.io team. They will then see a more advanced "member form" when they give feedback in the future. Members can also

  • Choose the issue type (bug, feedback, new feature, etc.)

  • Add new destinations

  • Report to various destinations

  • Attach new feedback to existing feedback

  • Invite others to the platform.

Check out our User Roles article for more detailed information on Members & guests.

Feedback

The final part of marker.io that we want to explore is feedback, including feedback from a reporter/user, how we review that feedback, how we contact the person who reported the feedback, and how we automatically close the feedback loop.

Report Feedback

Collect feedback

Reporters can submit their feedback directly to your Trello project without leaving their website. Their feedback will automatically include detail-rich technical data.

Let’s say the Contact Us button is broken on the About Us page. The reporter clicks on the widget and is presented with a screenshot and a feedback form to complete.

The screenshot can be annotated, and the feedback form can be as simple or as complex as you wish. We recommend keeping the feedback form as simple as possible for your non-technical reporters.

Review issues

In your Trello project, you see the feedback arrive with the screenshot and automatically captured technical data, including:

  • Page URL

  • Browser

  • Screen size

  • Operating system

Communicate with reporters

The "Contact via Marker.io" link opens the Feedback Page, where you can communicate with your reporters. All conversations will be synced with Trello.

Synchronize Status

Once you update an issue status to β€œdone” within Trello, this will update the Marker.io status to resolved and notify the reporter via email that the issue is complete.

Summary

Here at Marker.io, we have many great features for your to use. Above, we have highlighted our main features that apply to you if you develop a SaaS web app. We hope these features are useful to you, and please feel free to contact us at any time by using the chat function at the bottom right of any of our pages. Thanks for reading.

Did this answer your question?