Collect feedback from specific people and/or pages.
Introduction
Marker.io offers a widget that allows users to collect feedback directly from their websites. By default, once you integrate the Marker.io widget into your site, any visitor can access and use it. However, you might want to limit or target its display to specific users, pages, or conditions. Let's dive into how you can achieve this.
Basic Widget Settings
To change this widget visibility settings, navigate to your project settings > Widget > Button
Here, you can choose from the following settings:
Everyone: Any person who can access this version of your website can submit feedback.
Logged-in users only: Users must have their own Marker.io account and log in to see the button.
Hidden: Any person who is aware of the secret visibility functions can report feedback. (For example, add ?bug or ?feedback to the end of any URL, and they will see the widget)
Widget Targeting examples
I want specific internal people to report feedback.
Invite these people as Members and target Logged-in users only.
I want my external clients to report feedback.
Invite your external clients as Guests and target Logged-in users only.
My website is on a private network; only certain people can access it. I want everyone to have the ability to report feedback.
Set button visibility to the default: Everyone
I want the button hidden and require a specific set of users to report feedback.
Set button visibility to Hidden, and contact this set of users to educate them about our secret visibility settings.
Either insert ?bug or ?feedback at the end of the URL or use ⌘ U on Mac or Alt U on Windows devices.
For clarity on the difference between Members and Guests, see our User Roles Guide.
Widget Targeting with the WordPress Plugin
If your website is powered by WordPress and you're using the Marker.io plugin, you have additional settings to refine the widget's display. This includes:
Displaying the widget only for specific user roles.
Showing the widget based on specific page conditions.
Widget Targeting with the Browser Extension.
Only invited members and guests can see the widget if you install the widget using the browser extensions.
Once you invite a member or guest to your account. They will receive guided instructions on how to install the extension.
Navigate to your project settings > Widget > Installation > Browser Extension.
Here, you can toggle off the widget.
Note: To report via the browser extension method, a user needs to be invited to your team and install the browser extension.
Display the Marker.io widget on specific pages or a subset of pages
There are generally two methods to show the marker.io widget on subsets of pages. If you want to lock the widget down to specific top-level domains, you can achieve this via our application. If you, on the other hand, want to lock the widget down to subdomains or sub-pages, you will need to use some JavaScript.
Show the widget on my staging website but not on my live website.
In this example, my live website is clientyard.com, and my staging website is staging.clientyard.com. I only want to show the widget on my staging version.
Go to Project Settings > Widget > Security and select "Restrict to listed domains."
Navigate to Project Settings > General > Website domains
Add your staging website. EG: staging.clientyard.com
Remove your live website. EG: clientyard.com
Now, the Marker.io widget will only show on your staging website.
Note: You can repeat the above steps for any website top-level domain you may like to display the widget on. EG: shop.website.com, help.website.com etc.
Show the widget on my Webflow staging website but not on my live website.
A Webflow staging website lives on website.webflow.io, and your live website will live on website.com. Let's take an example:
Webflow staging website: ClientYard.webflow.io
Live website: ClientYard.com
We want to show the widget on the staging area only.
Go to Project Settings > Widget > Security and select "Restrict to listed domains."
Navigate to Project Settings > General > Website domains
Add your staging website. EG: ClientYard.webflow.io
Remove your live website. EG: clientyard.com
Show the widget on specific pages.
This is easily achieved by wrapping a little JavaScript around our snippet code.
Let's examine the following use cases:
For the above use cases, we need to investigate some JavaScript to examine the URL of our website pages.
How to check if a URL contains a specific string in JavaScript?
<script>
if (window.location.href.includes('CertainString')) {
//do something
};
</script>
How to check if a URL does NOT contain a specific string in JavaScript?
<script>
if (!window.location.href.includes('CertainString')) {
//do something
};
</script>
Let's now apply the above knowledge to our specific cases:
1: Collect website feedback from product pages only.
Here, we will search the URL for any mention of the word "product" and only display the marker.io feedback widget on these pages.
<script>
if (window.location.href.includes('product')) {
//Marker.io code goes here, remove all script tags from it
};
</script>
//Example:
<script>
if (window.location.href.includes('product')) {
window.markerConfig = {
project: '65002053bc7ac93b7f1551bb',
source: 'snippet'
};
!function(e,r,a){if(!e.__Marker).......
};
</script>
2: Collect website feedback from all web pages except blog pages.
Here, we will search the URL for any mention of the word "blog" and display the marker.io feedback widget only on all other pages.
<script>
if (!window.location.href.includes('blog')) {
//Marker.io code goes here, remove all script tags from it
};
</script>
//Example:
<script>
if (!window.location.href.includes('blog')) {
window.markerConfig = {
project: '65002053bc7ac93b7f1551bb',
source: 'snippet'
};
!function(e,r,a){if(!e.__Marker).......
};
</script>
Collect feedback from many websites into a single integration project.
Example 1: You have many clients and would like all of their website feedback to appear on one Trello board.
Example 2: You have a staging and live version of your website, and you want feedback from both to appear in one Jira Project.
Let's work through example 2 above.
First we'll create our Live Website project.
Let's preset our Guest form feedback to "Highest Priority" to quickly see that this is urgent feedback on the live website.
Copy the snippet code and paste it into the shared header file of the live website.
Repeat all the above steps for the staging website.
Let's change the color of this button to make it obvious that we are on the staging website. I'll go with green.
We'll leave the priority as a medium on the guest form.
Copy the snippet code and paste it into the shared header file of the staging website.
When we collect feedback from these different versions of our website, we can easily see which are from live and staging as the priority is set to highest for live.
Collect feedback from desktop devices only.
To collect feedback from desktop devices only, you can wrap our widget code inside a script that checks whether the current device is a desktop device.
You can achieve this by checking the user agent or using CSS media queries.
Here's an example using the user agent
function isDesktop() {
const userAgent = navigator.userAgent.toLowerCase();
return !(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent));
}
if (isDesktop()) {
// Your JavaScript widget code here
}
And here's an example using CSS media queries with the window.matchMedia() method:
function isDesktop() {
return window.matchMedia("(min-width: 768px)").matches;
}
if (isDesktop()) {
// Your JavaScript widget code here
}
In both examples, the isDesktop() function checks if the user is on a desktop browser. If the function returns true, the JavaScript code inside the if block will be executed.
Remember that these methods are not foolproof, and there might be edge cases where detection fails. However, they should work well in most cases.