Marker.io makes it easy to collect different kinds of issues (like bug reports or feature requests) by allowing reporters to choose the type of issue they want to submit. Depending on the type selected, you can show specific forms to capture the exact details you need. Here's how to set it all up.
Why Let Reporters Choose the Issue Type?
This setup is helpful if you have multiple teams managing different types of issues. For example:
Bug Reports go to the Developer Team using Linear.
Feature Requests are directed to the Product Management Team using the same Linear project.
Content Errors (like typos) get sent to the Content Team using Trello.
Let's break down how you can configure Marker.io to route each type of issue to the right place.
Step 1: Set Up Your Projects
You’ll need to create separate projects for each issue type.
Bug Report Project:
Add your website URL.
Link it to the relevant Linear project (e.g., "Developer Team").
Feature Request Project:
Use the same website URL as above.
Link it to the same Linear project (e.g., "PM Team").
Content Project:
Add your website URL.
Link this one to Trello (e.g., "Content Team").
Step 2: Customize the Issue Forms
Each project has two types of forms: Member Form and Guest Form. These forms can be customized to capture exactly what you need for each issue type.
Bug Report Form: Focus on critical details like "Steps to Reproduce" and "Expected vs. Actual Behavior."
Feature Request Form: Include fields like “Importance” and "Impact."
Content Form: Keep it simple.
Bug Report Form
Feature Request Form
Content Form
Step 3: Set a Default Project and Add Marker.io to Your Website
You’ll need to add the Marker.io widget to your website. The easiest way is to use the JavaScript installation method:
Copy the JavaScript code provided in Marker.io.
Paste it into your website’s header.
You should choose one project to be the default when users open the widget. In our example, we set the Bug Report project as the default. When visitors open the widget, they’ll see this issue type first, with the option to switch if needed.
Below we will dive into user roles and see what each role type requires to view specific forms.
Step 4: Configure Access Based on User Roles
Marker.io has different user roles that control what each person can see and do:
Members: Can choose from all issue types available in your projects.
Guests: Need to be invited to each project individually before they can select an issue type.
Handling Issue Types from Public Reporters
If you want to allow public users (not invited to your Marker.io account) to report issues while still giving them options for different issue types, there are a few creative workarounds you can try. Here are some methods to give public reporters the choice without needing individual invitations.
Method 1: Use a Secret URL Parameter
One option is to create a hidden URL that controls which form is shown based on keywords in the URL. For example, you could display the bug report form if the URL contains ?bug, or the content form if it contains ?content.
Here’s how the JavaScript might look:
const params = new URLSearchParams(window.location.search);
// Determine the project ID based on the URL query parameters
const projectID = params.has('bug')
? '641ac6dd84db271f210312' //update this id
: params.has('content')
? '641ac761fd9fa2d96fb733' //update this id
: null;
// Only proceed if a valid project ID is found
if (projectID) {
window.markerConfig = {
project: projectID,
source: 'snippet',
};
!function (e, r, a) {
if (!e.__Marker) {
e.__Marker = {};
var t = [],
n = { __cs: t };
[
'show',
'hide',
'isVisible',
'capture',
'cancelCapture',
'unload',
'reload',
'isExtensionInstalled',
'setReporter',
'setCustomData',
'on',
'off',
].forEach(function (e) {
n[e] = function () {
var r = Array.prototype.slice.call(arguments);
r.unshift(e), t.push(r);
};
}),
(e.Marker = n);
var s = r.createElement('script');
(s.async = 1), (s.src = 'https://edge.marker.io/latest/shim.js');
var i = r.getElementsByTagName('script')[0];
i.parentNode.insertBefore(s, i);
}
}(window, document);
}
This approach allows you to control which form appears based on the URL the user accesses. Just update the project IDs to match your specific setup.
Method 2: Use Buttons to Select Different Widgets
Another way to provide different options for issue types is by adding buttons that link to specific forms. For example, you could have one button for reporting bugs and another for content issues.
Here’s an example of how the HTML might look:
<button class="report-bug-button">
<span class="icon">🐞</span> Report a bug
</button>
<button class="content-button">
<span class="icon">✍️</span> Content
</button>
And here’s the JavaScript code to handle the button clicks:
import markerSDK from "https://cdn.skypack.dev/@marker.io/browser@0.16.0";
const bugProjectID = "641ac6dd84db271f21032eeee"; //update this id
const contentProjectID = "641ac761fd9fa2d96fbffff"; //update this id
async function createWidget(projectID) {
return await markerSDK.loadWidget({
project: projectID,
});
}
const reportBugButton = document.querySelector(".report-bug-button");
reportBugButton.addEventListener("click", async () => {
const bugWidget = await createWidget(bugProjectID);
bugWidget.capture(); // Trigger a capture and open the bug widget inside your app.
bugWidget.on("close", () => {
bugWidget.unload();
});
});
const contentButton = document.querySelector(".content-button");
contentButton.addEventListener("click", async () => {
const contentWidget = await createWidget(contentProjectID);
contentWidget.capture(); // Trigger a capture and open the content widget inside your app.
contentWidget.on("close", () => {
contentWidget.unload();
});
});
This solution gives users a clear choice between different issue types and provides a more user-friendly interface.
Set Up Multiple Integrations for One Website
If you need to route different types of issues to different platforms, like sending public issues to Trello and internal team issues to Jira, you can set up two integrations for the same website.
For Public Users (Trello):
Create a Trello project in Marker.io.
Link this project to your website and install it by adding the code snippet to your website.
For Internal Teams (Jira):
Create a Jira project in Marker.io.
Link it to the same website, but without installing the code (it’s only needed once).
Members logged into Marker.io will see an option to choose whether they want to submit the issue to Trello or Jira.
This way, you can keep issues from end-users and internal teams separate while still using a single website.
Pro Tip: Make sure your team knows which platform to use for each type of issue.
Here is a short video where I explain how to achieve this.
Bonus: Vote on This Feature
We’re considering building out more native support for this kind of functionality. If it’s something you’d find useful, please vote and leave your thoughts here. Your input could help prioritize this feature for future updates! 🙏