Advantages of using Marker.io in your web application
Efficient Bug Reporting and Feedback Collection: Marker.io allows users to report bugs directly from your website. Users can take screenshots, annotate them, and provide detailed feedback without leaving your site. This streamlined process makes it easier for users to report issues and for your team to receive actionable feedback.
Enhanced Collaboration with Development Teams: Marker.io integrates with various issue tracking and project management tools like Jira, Trello, Asana, and GitHub. This integration means that feedback and bug reports from users can be directly converted into tasks or tickets in these systems, improving collaboration and efficiency.
Time-Saving for Developers: With Marker.io, developers receive detailed reports complete with annotated screenshots, browser information, console logs, network requests and session replay videos. This saves vast amounts of time in reproducing and understanding bugs, speeding up the resolution process.
Improved User Experience: By making it easy for users to report problems and suggestions, you're likely to enhance user satisfaction. Users feel valued when their feedback is acknowledged and acted upon, which can improve user retention and loyalty.
Quality Assurance: Regular and precise feedback helps in maintaining the quality of your SaaS product. Continuous improvement based on user feedback ensures that your product evolves in alignment with user needs and expectations.
Professionalism and Brand Image: Offering a dedicated feedback tool like Marker.io reflects professionalism. It shows that you're committed to providing a quality product and value user input, which can positively impact your brand image.
Setting up your project
A project is where your users report their website feedback.
Once you start the project creation process, enter your project Name, Website, and Integration. Many teams like directly integrating this project with their existing issue tracker or project management tools. In the example below, we integrate with Jira. We have many other integrations to choose from, and you can also continue without an integration using Marker.io as your project management tool.
See our integration helpdesk area for help setting up your integrations.
Add the Marker.io widget to your website
The next step is to connect the website/web app to Marker.io. You can install our widget in several ways. The JavaScript snippet installation is very straightforward once you can access your source code. Copy the snippet code above your website's closing </head> tag.
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({
project: '655fbbad660fc7034bbbbbbb', //unique id
});
To get your NPM code log into your dashboard at https://app.marker.io, and navigate to your required project Settings > Widget > Installation. Here you will see an NPM package option similar to the beow.
Widget Targeting for Enhanced Security
Ensure that your widget is visible only to the right audience. Consider limiting access to your website and inviting select reporters to your Marker.io project. By doing this, you ensure the widget doesn't show up on your website's live version and that only your internal team and reporters have visibility of the widget.
Restrict to specific domains.
To restrict the widget to your specific domain, navigate to Widget > Security and select Restrict to listed domains.
You can view the domains at Settings > General > Website domains
Restrict to internal team and invited reporters.
To restrict the button visibility to your internal team and reporters, navigate to Widget > Button > Button visibility. Select Restrict to Marker.io members and guests.
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 errors from your users when they are submitting feedback.
<script>
window.markerConfig = {
project: '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 reports feedback, their name or email is no longer requested, as it's automatically passed through.
Custom Metadata
Marker.io provides a useful feature 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 prioritizing 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 = {
project: '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 text is "Give Feedback"
Edit our button
You can make many changes within the "Button appearance" settings. Here we will change the color to blue, the test to "Feedback?" and the placement to the bottom center.
Use a custom button
If you'd like to bind our widget to your very own custom button, the first step to take is to hide our button:
Button appearance → Button visibility → Hide widget button.
Next, decide on the custom HTML, CSS, etc., you will use 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({
project: '...',
});
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 simple.
However, you may add more fields, and you can do this within the project 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 projects
Report to various projects
Invite others to the platform.
View advanced technical details on all feedback including session replay videos, console logs and network requests.
We encourage you to read through the following articles to understand our user roles and their interactions.
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 Jira 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 Jira 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.