By default, Marker.io provides its own floating button to start reporting issues. But what if you want to use your own button instead? This guide will show you how to:
✅ Hide the default Marker.io button
✅ Set up a custom button to trigger Marker.io
✅ Use either the JavaScript snippet or the NPM package
Step 1: Hide the Default Marker.io Button
Before adding your custom button, you need to hide the default Marker.io button. Here’s how:
Open the Project Settings for the project you want to change.
Go to the Widget tab.
Find Button Visibility and set it to Hidden.
Click Save to apply the changes.
Now that the default button is hidden, let’s set up your own button.
Step 2: Choose How You Want to Add the Custom Button
You have two ways to trigger Marker.io from your button:
Method | Best For |
Basic JavaScript (Snippet Approach) | Simple websites using plain HTML & JavaScript |
NPM Package (Modern Approach) | Developers using React, Vue, or Webpack |
Choose the method that best fits your setup and follow the instructions below.
Option 1: Use Basic JavaScript (Snippet Approach)
If you’re already using the Marker.io script snippet, follow these steps.
1. Add a Custom Button to Your HTML
Insert this button where you want it on your page:
<button id="custom-report-button">
<span class="icon">🐞</span>
Report a Bug
</button>
2. Update Your JavaScript to Trigger Marker.io
Find your existing Marker.io script and add the below code.
🔴 Important: Make sure to replace "YOUR_PROJECT_ID" with your actual Marker.io project ID.
<script>
window.markerConfig = {
project: 'YOUR_PROJECT_ID', // Replace this with your project ID
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","clearReporter","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);
// Wait for Marker.io to load, then bind the custom button
document.addEventListener("DOMContentLoaded", function() {
var reportButton = document.getElementById("custom-report-button");
reportButton.addEventListener("click", function() {
if (window.Marker && window.Marker.capture) {
window.Marker.capture(); // Opens Marker.io widget
} else {
console.error("Marker.io has not loaded yet.");
}
});
});
</script>
What This Does
It loads Marker.io using the script snippet.
It waits for the page to be fully loaded.
It listens for clicks on your custom button.
When clicked, it opens the Marker.io widget.
✅ Done! Your button is now fully functional.
Option 2: Use the NPM Package (Modern Approach)
If you're using React, Vue, Webpack, or another modern JavaScript framework, follow these steps.
1. Install Marker.io
Run this command in your project’s terminal:
npm install @marker.io/browser
2. Add a Custom Button to Your HTML
Place this button in your UI:
<button class="report-bug-button">
<span class="icon">🐞</span>
Report a Bug
</button>
3. Load Marker.io in Your JavaScript
Modify your JavaScript file to load Marker.io and attach it to the button:
🔴 Important: Make sure to replace "YOUR_PROJECT_ID" with your actual Marker.io project ID.
import markerSDK from '@marker.io/browser';
async function initializeMarker() {
const widget = await markerSDK.loadWidget({
project: 'YOUR_PROJECT_ID', // Replace this with your project ID
});
// Find the custom button and add click event listener
const reportBugButton = document.querySelector('.report-bug-button');
reportBugButton.addEventListener('click', () => {
widget.capture(); // Opens Marker.io widget
});
}
// Initialize Marker.io when the page loads
initializeMarker();
What This Does
It imports Marker.io's SDK.
It loads the Marker.io widget.
It binds your custom button to the widget.
When clicked, it opens Marker.io.
✅ Done! Your button is now active in your web app.
Final Thoughts
Now, you have a custom button that opens Marker.io, and the default button is hidden. Just make sure to replace "YOUR_PROJECT_ID" with your real Marker.io project ID, or it won’t work.