All Collections
Widget
Configuration
Guided Widget Targeting with Marker.io
Guided Widget Targeting with Marker.io

Collect feedback from specific people and/or pages.

Joe Scanlon avatar
Written by Joe Scanlon
Updated over a week ago

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

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 ?bug or ?feedback to 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.

Targeting Specific User Groups

Targeting specific user groups in your application, such as admin users, is a powerful way to tailor feedback collection. This can be achieved through conditional logic in your website's code, which checks for certain criteria before displaying the Marker.io widget. Here are some examples for reference:

Role-Based Targeting (e.g., Admin Users)

Role-based targeting is straightforward. You check the user's role and display the widget accordingly.

Example:

if (currentUser.isAdmin) {
  // Insert Marker.io widget code here
}

IP Address-Based Targeting

If team members are within the same IP address range, you can target them specifically. This is useful for organizations where employees access the website from a corporate network.

Example:

const teamIPRange = ["192.168.1.1", "192.168.1.255"]; // Define your team's IP range
const userIP = getUserIP(); // Function to get the current user's IP address

if (isIPInRange(userIP, teamIPRange)) {
  // Insert Marker.io widget code here
}

function isIPInRange(ip, range) {
  // Logic to check if ip is within the specified range
  // Returns true if within range, false otherwise
}

Combination of Criteria

You can combine multiple criteria for more sophisticated targeting. For example, showing the widget to admin users or users from a specific IP range.

Example:

if (currentUser.isAdmin || isIPInRange(getUserIP(), teamIPRange)) {
  // Insert Marker.io widget code here
}

Geographic or Departmental Targeting

In larger organizations, targeting might be needed based on the department or geographic location. This can be done using user attributes or additional data about their location or department.

Example:

if (currentUser.department === 'Development' || currentUser.region === 'Europe') {
  // Insert Marker.io widget code here
}

Custom Attributes

You can also use custom attributes defined within your application to control widget visibility. This could be based on user activity, subscription level, or any other custom metric you track.

Example:

if (currentUser.isPremiumSubscriber) {
  // Insert Marker.io widget code here
}

Implementing the Logic

The implementation of these checks will depend on how your website or web application is structured and how user data is managed. Ensure that any IP-based or user-specific targeting is compliant with privacy and data protection regulations relevant to your users.

By using these strategies, you can create a tailored feedback collection process that matches the needs of your organization.

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:

  1. Collect website feedback from product pages only.

  2. Collect website feedback from all web pages except blog pages.

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 Specific URL Paths


When managing a website hosted on a staging domain that caters to various sections or features, it's useful to direct feedback to specific Marker.io projects based on the unique URL path. This guide will demonstrate how to target distinct Marker.io projects for different URL paths within the same staging domain.

Step 1: Set Up Your Marker.io Projects

  • Log in to your Marker.io dashboard.

  • Create a separate project for each section or feature you wish to target and note each project's ID. For instance:

Feature A: 65114f925fcb146d9f25b55a

Feature B: 65114f925fcb146d9f25b55b

Feature C: 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 specific URL path, modify the Marker.io integration code on your website as follows:

<script>
  // Function to determine the Marker.io project ID based on the specific URL path
  function getProjectIdFromPath() {
    var path = window.location.pathname;

    if (path.includes("/feature-a")) {
      return '65114f925fcb146d9f25b55a';
    } else if (path.includes("/feature-b")) {
      return '65114f925fcb146d9f25b55b';
    } else if (path.includes("/feature-c")) {
      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: getProjectIdFromPath(),
    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 implementing the code, navigate to different sections of your website within the staging domain (e.g., /feature-a, /feature-b, /feature-c). Ensure that the feedback provided on these pages is directed to the corresponding Marker.io projects. Confirm this by checking the Marker.io dashboard and verifying that feedback is routed to the correct project.

Key Points:

  • The function checks for specific paths in the URL. Ensure that your URLs contain these paths correctly.

  • Replace the example project IDs (65114f925fcb146d9f25b55a, 65114f925fcb146d9f25b55b, 65114f925fcb146d9f25b55c) with the actual project IDs from your Marker.io dashboard.

  • The default_project_id acts as a fallback for URLs that don't match any of the specified paths. Adjust this to a general feedback project or another suitable default.

Following this guide, you can effectively target specific Marker.io projects based on different URL paths within the same staging domain, ensuring that feedback is organized and directed to the right teams or projects for efficient management.

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

  1. Log in to your Marker.io dashboard.

  2. Create a separate project for each country you wish to target and note each separate project id. For example:

    • Ireland: 65114f925fcb146d9f25b55a

    • Belgium: 65114f925fcb146d9f25b55b

    • USA: 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_id acts 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.

Related Articles
Widget JavaScript SDK
Efficiently Linking Your Website to Multiple Projects with Marker.io
Webflow Integration
Display a specific form to reporters based on their feedback type.
Integrate Marker.io with SharePoint
Did this answer your question?