Allow reporters to choose their feedback type.
Some users would like to send feedback to specific projects/integrations based on the feedback type. Others may also wish to display a unique form based on the type of feedback. For example
Bug reports
Feature requests
Content errors (spelling etc.)
Below we discuss how to allow reporters to choose their feedback type first and then report their feedback.
An example of feedback types
Using an example to illustrate how to achieve this, let's allow reporters to:
Submit bug reports to a Linear project (EG: Developer Team)
Submit feature requests to the same Linear project (EG: PM Team)
Submit content feedback like spelling errors to a Trello project (EG: Content Team)
How to set up Feedback Types
Create all projects.
First, we create a Bug report project, add our website URL, and select a project, in our case, Website Feedback.
Next, we create our Feature Requests project with the same website and the same Linear project as above.
And finally, we create our content feedback project integrating with Trello.
Edit the feedback forms for each project.
Each project above has two feedback form types: the guest and member forms. These forms can be made as straightforward or as complex as you wish. Let’s edit each of them to make it ultra clear what feedback we expect from each.
Bug Report Form
Feature Request Form
Content Feedback Form
Decide on a default project and add it to the website.
To install the Marker.io widget on your website, you have many choices. We encourage you to use a JavaScript installation method, the easiest of which is to copy the Javascript code into your website's header.
We will choose the Bug Report project as the default project for people to report feedback.
When anyone with access to our website chooses to submit feedback, they will see bug report as the default feedback type.
Below we will delve into our user roles and see what each role type requires to view specific feedback forms.
Feedback from invited Members and Guests
Discover our user roles here.
Feedback from Members
By default, all Members of your Marker.io account can select their specific feedback type to report.
Feedback from Guests
Invite each guest separately into each project that you wish them to be able to report to. They can then decide which feedback type to select, like the members above.
Repeat the above step for each project you wish this guest to be able to report feedback into.
Once this guest logs into their Marker.io account, they can select each feedback form similar to the Member role above.
Feedback from public reporters.
If you don’t wish to invite all feedback reporters users to your Marker.io account, you can consider the following workarounds to allow public reporters to choose the type of feedback they wish to offer.
Use a secret URL option
See a code pen example here.
You can try wrapping your projects into JavaScript code that will only show the widget if certain keywords exist in the URL. Consider the case where we'd like to display the Bug report form if the keyword ?bug exists in the URL and the content widget if the keyword ?content exists in the URL.
Our JavaScript code would look like the below. NOTE: you need to update the projectIDs for your use case.
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);
}
Use buttons to select different widgets.
See a codepen example here.
Alternatively, you could consider two buttons similar to the ones below.
HTML code as follows
<button class="report-bug-button">
<span class="icon">🐞</span> Report a bug
</button>
<button class="content-feedback-button">
<span class="icon">✍️</span> Content Feedback
</button>
These buttons can link to two separate Marker.io widgets. Ensure that you change the default Marker.io buttons to hidden within the project settings.
The Javascript code would look similar to the one below, again, ensure that you update the projectIDs as appropriate.
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 contentFeedbackButton = document.querySelector(".content-feedback-button");
contentFeedbackButton.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();
});
});
Set up two different integrations for a single website
For example, say you'd like end users to report feedback into Trello and internal teams into Jira.
Setting Up for End Users (Trello):
Create a new Trello project in Marker.io.
Link this project to your website.
Once created, install by copying the given code into the website.
User Feedback:
End users can now visit the website, provide feedback, and submit it.
Feedback goes directly to the Trello board.
Setting Up for Internal Teams (Jira):
Create a Jira project named in Marker.io.
Link it to the same website, but you don't need to install the code.
Members logged into the Marker.io account will see an option to choose whether it goes to Trello or Jira.
Important: Instruct the team to select the correct integration
Inviting Guests:
Want guests to give feedback? Invite them to both projects.
Note:
Be clear with your users about where feedback should go. They must choose the right platform.
Here is a short video where I explain how to achieve this.
Vote on this feature request.
We are investigating building out this feature. Please vote here and add commentary to convince our development team that this feature is important to you. 🙏