We often get asked how to display the marker.io widget on a certain page or a specific subset of 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.

  3. Collect website feedback on my staging website, not my live website.

  4. Collect website feedback on my Webflow staging website and not my live Webflow website

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 certain string in JavaScript?

<script>
if (window.location.href.includes('CertainString')) {
{
//do something
};
</script>

How to check if a URL does NOT contain a certain 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')) {
{
window.markerConfig =
{
//replace the destination below with your own destination
destination: '62835625544ad308a0f416d7dd',
source: 'snippet'
}
};
</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')) {
{
window.markerConfig =
{
//replace the destination below with your own destination
destination: '62835625544ad308a0f416d7dd',
source: 'snippet'
}
};
</script>

3: Collect website feedback from my staging website, and NOT my live website:

<script>
if (window.location.href.includes('staging')) {
{
window.markerConfig =
{
//replace the destination below with your own destination
destination: '62835625544ad308a0f416d7dd',
source: 'snippet'
}
};
</script>

4: Collect website feedback on my Webflow staging website and not my live Webflow website.

Consider the following query we have recently received:

I'm working on Webflow, and with Webflow, you get two domains for your site. The first is a staging link (e.g. yourwebsite.webflow.io) and the second is your live site (e.g. yourwebsite.com).

I would like to implement Marker ONLY on the Webflow domain (i.e. yourwebsite.webflow.io), as this is the link we use for QA, before we push changes to the live domain.

I've set up my project to work on my Webflow domain, but the marker tab also appears on the live site.

I believe it is because the marker script that is added to the page head code appears on both domains, which activates the tab.

Is there a way I can disconnect the marker plugin from the live site, but still keep it on the staging link?

For this one, we can use the string webflow.io, so the solution would be:

<script>
if (window.location.href.includes('webflow.io')) {
{
window.markerConfig =
{
//replace the destination below with your own destination
destination: '62835625544ad308a0f416d7dd',
source: 'snippet'
}
};
</script>

There you have it a quick and easy way to display the marker.io widget on a certain page or subset of pages. Hopefully, it makes sense, and if you have any questions contact us at the bottom right of any of our web pages.

Did this answer your question?