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.
General 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.
Marker.io Users Only: Restricts access to logged-in Marker.io users.
Hidden Mode: A secret method where users can access the widget by appending
?bugor?feedbackto the URL.
Widget Targeting examples
I want specific internal people to report feedback.
Invite these people as Members and "Restrict to Marker.io users".
I want my external clients to report feedback.
Invite your external clients as Guests and "Restrict to Marker.io users".
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.
Dynamic Project Targeting with Marker.io Based on URL Country Codes
When managing a website that serves multiple countries, it may be beneficial to direct feedback to specific Marker.io projects based on the country mentioned in the URL. This guide will walk you through targeting specific Marker.io projects based on the country in the URL.
Step 1: Set Up Your Marker.io Projects
Log in to your Marker.io dashboard.
Create a separate project for each country you wish to target and note each separate project id. For example:
Ireland:
65114f925fcb146d9f25b55aBelgium:
65114f925fcb146d9f25b55bUSA:
65114f925fcb146d9f25b55c
Step 2: Implement Dynamic Project Targeting in Your Website's JavaScript
To ensure that feedback is directed to the appropriate Marker.io project based on the country in the URL, modify the Marker.io code on your website as follows:
<script>
// Function to determine the Marker.io project ID based on the country in the URL
function getProjectIdFromUrl() {
var url = window.location.href;
if (url.includes("ireland")) {
return '65114f925fcb146d9f25b55a';
} else if (url.includes("belgium")) {
return '65114f925fcb146d9f25b55b';
} else if (url.includes("usa")) {
return '65114f925fcb146d9f25b55c';
}
// Default project ID (consider setting this to a general feedback project)
return 'default_project_id';
}
// Configure Marker.io with the dynamically determined project ID
window.markerConfig = {
project: getProjectIdFromUrl(),
source: 'snippet'
};
</script>
<script>
!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);
</script>
Step 3: Verification
After integrating the above code, navigate to different country-specific URLs on your website (e.g., /ireland, /belgium, /usa). Ensure that the feedback provided on these pages is directed to the corresponding Marker.io projects. You can verify this by checking the Marker.io dashboard and confirming that feedback is being sent to the appropriate project.
Key Points:
The function checks for country names in lowercase in the URL. Ensure that your URLs contain the country names in lowercase or adjust the function to handle different cases.
Replace the example project IDs (
65114f925fcb146d9f25b55a,65114f925fcb146d9f25b55b,65114f925fcb146d9f25b55c) with the actual project IDs from your Marker.io dashboard.The
default_project_idacts as a fallback for URLs that don't match any of the specified countries. Adjust this to a general feedback project or another suitable default.
Following this guide, you can efficiently target specific Marker.io projects based on the country mentioned in the URL, ensuring that feedback is organized and directed to the right teams or projects.
Implement a Deadline for Feedback submission.
Overview
While Marker.io does not currently offer a built-in feature for setting deadlines for bug submissions, users can achieve this functionality with a custom JavaScript implementation. This guide outlines a method to conditionally load the Marker.io widget based on a predefined deadline.
If this explicit feature is important to you, please vote on it here.
Prerequisites
Familiarity with JavaScript and HTML.
Access to modify the HTML code of your website where Marker.io is or will be integrated.
Steps to Implement a Deadline
1. Define the Deadline
Choose a deadline date for bug submissions. Format this date in a way that JavaScript can easily interpret (e.g., 'YYYY-MM-DD').
2. Create a JavaScript Function to Check the Date
Develop a JavaScript function that compares the current date with the set deadline to determine whether the deadline has passed.
3. Conditionally Insert Marker.io Widget
Based on the date comparison, conditionally insert the Marker.io widget code into your website's HTML.
Example Code
Below is an example code snippet demonstrating the implementation:
<script>
// Define your deadline
const deadline = new Date('YYYY-MM-DD'); // Replace YYYY-MM-DD with your deadline
function isDeadlinePassed() {
const today = new Date();
return today > deadline;
}
if (!isDeadlinePassed()) {
// Insert Marker.io widget code here
} else {
// Optional: Code to execute after the deadline has passed
// For example: displayDeadlinePassedMessage();
}
</script>
Feedback on Existing Feedback Post Deadline
This setup only restricts the submission of new feedback. Clients will still be able to provide feedback on existing issues after the deadline.