Gain control over the Marker.io widget on your website using JavaScript. This guide explains how to install and use the Marker.io JavaScript SDK to manage the widget and handle issue reporting.
1. Getting Started
Installation and Access
Quick Installation: Follow the widget setup guide to install Marker.io on your website in minutes.
SDK Access: Once the snippet code is installed, the SDK will be available via
window.Marker.
Core Functionalities
Visibility Control
Marker.show()
Displays the Marker.io button on your site. Useful if the button is hidden by default.
Marker.hide()
Hides the Marker.io button, but the widget can still be triggered via keyboard shortcuts.
Issue Capture
Marker.capture(mode)
Marker.capture(mode): Captures an issue on the current page. You can specify the capture mode:
fullscreen: Captures the entire visible area.advanced: Offers advanced capture options, including specific areas, the whole page, or the desktop.
Example:
Marker.capture(); // or
Marker.capture('fullscreen');
Marker.capture('advanced');
Marker.cancelCapture()
If the user is currently reporting an issue, calling this method will dismiss it and close the Marker.io widget.
Marker.unload()
Completely unloads the widget, removing all UI elements and disabling keyboard shortcuts.
Marker.isExtensionInstalled() : Promise<Boolean>
Checks if the Marker.io browser extension is installed, returning a promise that resolves to a boolean value.
Example:
Marker.isExtensionInstalled().then(installed => {
if (installed) {
// ...
} else {
// show install Marker.io button
}
});
Reporter Identification
See the Identify Reporters guide here
Marker.setReporter({ email: String, fullName: String }) : Promise<Boolean>
Pre-populates reporter details (like email and full name) before issue capture. This is useful when your app already knows the user’s identity.
Example:
Marker.setReporter({
email: 'client@website.com',
fullName: 'Gabrielle Rose'
});
Custom Metadata methods
See the Custom Metadata guide here
Set custom metadata using Marker.setCustomData()
You can add extra data to your issue reports with Marker.setCustomData(). This metadata could include product information, stock levels, or any other relevant data.
Example:
Marker.setCustomData({
product: 'Banana',
available: true,
price: 1.23,
stock: 131,
brands: [
'The Organic Corp',
'ACME Fruits Inc',
],
});
Event Handling
The Marker.io SDK provides various event handlers to help you customize how the widget interacts with your site.
Load Events
Marker.on(‘load’, function callback() { ... })
Triggers once Marker.io is loaded.
Marker.on(‘loaderror’, function callback() { ... })
Triggers if an error occurs while loading Marker.io.
Marker.on(‘beforeunload’, function callback() { ... })
Triggers right before Marker.io unloads.
Visibility Events
Marker.on(‘show’, function callback() { ... })
Triggers when the button becomes visible.
Marker.on(‘hide’, function callback() { ... })
Triggers when the button becomes hidden.
Issue Events
Marker.on(‘capture’, function callback() { ... })
Triggers when an issue is captured.
Marker.on(‘feedbackbeforesend’, function callback() { ... })
Triggers before submitting the issue, i.e. when the user clicks Submit issue.
Marker.on(‘feedbacksent’, function callback() { ... })
Triggers once the issue is successfully submitted.
Marker.on(‘feedbackerror’, function () { … })
Triggers if an error occurs while submitting an issue.
Marker.on('feedbackdiscarded', function () { ... })
Triggers when the user discards an issue by clicking on the "Close" button in the widget.
Advanced Features
Silent mode
Activate silent mode in your snippet code to suppress console logs, reducing recorded log noise.
By default, Marker.io will log some helpful information in the console to help you identify configuration problems and better understand how it functions. In certain situations, you may want to disable them all together so that it doesn't add noise to your recorded console logs. To do so, you will need to enable silent mode directly inside your snippet code configuration:
<script>
window.markerConfig = {
project: 'PROJECT_ID',
silent: true, // <~ Enable silent mode
};
</script>
<script>
!function(e,r,t){if(e.__Marker)return;e.__Marker={};var n=r.createElement("script");n.async=1,n.src="https://edge.marker.io/latest/shim.js";var s=r.getElementsByTagName("script")[0];s.parentNode.insertBefore(n,s)}(window,document);
</script>
Capture iframes
Marker.io’s widget allows you to capture content from iframes on your website, whether they’re hosted on the same domain or a different one. This section explains how to ensure all iframe content is included when creating issue reports.
Capturing Same-Domain iframes
If the iframe’s content is from the same domain as the parent page:
Good News: No extra steps are needed! Marker.io’s widget automatically includes same-domain iframe content in your issue captures.
Cross-Domain iframes
If the iframe’s content is from a different domain, some additional steps are required. Follow these instructions based on your situation:
Option 1: Adding a Script to the Cross-Domain Content
To allow Marker.io to capture the iframe content:
Insert the following script into the HTML of the iframe content (on the domain where the iframe is hosted):
<script src="https://edge.marker.io/latest/iframe.support.js"></script>
Save the changes to the iframe’s HTML.
This script enables Marker.io’s widget to access and render the cross-domain iframe content accurately.
Option 2: Using the Marker.io Browser Extension
If you cannot add the script to the cross-domain iframe’s HTML:
Use the Marker.io Browser Extension to capture the iframe content directly.
This option can be used for capturing iframe content when script access is restricted.
Option 3: Using the Native Browser API
If neither adding the script nor using the browser extension is viable:
Use the native browser screenshot API to capture the iframe content manually.
This method is a fallback for capturing iframe content in situations where other options are unavailable.
By following these steps, you’ll ensure Marker.io captures all iframe content properly.
Delayed capture
Delay server-side capture to allow CSS animations to run before taking a screenshot.
You can enable delayed capture by adding a special parameter in your snippet code configuration:
<script>
window.markerConfig = {
project: 'PROJECT_ID',
// Add the following to delay the server-side rendering
ssr: {
renderDelay: 3000, // 0 - 15000 (ms)
},
};
</script>
Disabling Keyboard Shortcuts
Disable shortcuts if they conflict with your application via keyboardShortcuts: false.
window.markerConfig = {
project: 'PROJECT_ID',
// Toggles off all keyboard shortcuts
keyboardShortcuts: false,
};
</script>
Capture screenshots without our server-side renderer
Native Browser Screenshot Rendering
Facing issues with capturing website screenshots due to browser security or private network limitations? Switch to native browser screenshot rendering with useNativeScreenshot: true for reliable and accurate captures.
Learn how to enable this feature using simple code snippets or the Browser SDK in our comprehensive guide.
Screenshot Booster Link Removal
To remove the “screenshot booster” link from our application's widget or screenshots, simply edit the widget's code snippet in your website's HTML header section.
Add extension: false within the window.markerConfig section, as shown below:
window.markerConfig = {
project: '<your_project_id>', // Replace with your project ID
source: 'snippet',
extension: false,
};Make sure the rest of the integration code remains as is for proper functionality. After this update, the “screenshot booster” link will be removed from the widget and screenshots.