Basic widget control methods
In some instances, you may wish to have precise control over when the Marker.io widget appears on your website. Whether you want to create a custom feedback button that seamlessly integrates with your web application or display the button only under certain conditions, the Marker.io widget SDK provides complete control over the widget's behavior.
The Marker.io widget SDK provides full control over the widget's behavior on your website. It allows you to show or hide the widget and to programmatically trigger the capture as described below.
Getting started
Installation Guide: Follow the widget setup guide to install Marker.io on your website within minutes.
Accessing the SDK: Once the snippet code is installed, the SDK will be available under
window.Marker.
Core Functions
Show and Hide
Marker.show()
Displays the Marker.io feedback button on your site. This method is especially useful when your widget is hidden by default.
Marker.hide()
Hides the Marker.io feedback button from your website.
Note: It makes the button invisible but still allows triggering via keyboard shortcuts.
Capture Feedback
Marker.capture(mode)
Captures feedback on the current page.
Note: you can control which type of capture to trigger by supplying the mode parameter.
Available modes:
fullscreencaptures the entire visible areaadvancedthe advanced capture options are: specific area, the whole page, and the desktop.
Example:
Marker.capture(); // or
Marker.capture('fullscreen');
Marker.capture('advanced');
Marker.cancelCapture()
If the user is currently reporting feedback, calling this method will dismiss it and close the Marker.io widget.
Marker.unload()
Unloads Marker.io completely. Keyboard shortcuts will be disabled, and all UI elements will be removed.
Marker.isExtensionInstalled() : Promise<Boolean>
Tells if the Marker.io browser extension is installed in the current user environment.
Example:
Marker.isExtensionInstalled().then(installed => {
if (installed) {
// ...
} else {
// show install Marker.io button
}
});
Identify reporter
See the Identify Reporters guide here
Marker.setReporter({ email: String, fullName: String }) : Promise<Boolean>
Sets reporter information before capturing feedback. This ensures your reporters do not need to enter their contact information manually.
You should call this method whenever your application knows about the reporter'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 set the current custom metadata anytime using the dedicated method:
Marker.setCustomData({
product: 'Banana',
available: true,
price: 1.23,
stock: 131,
brands: [
'The Organic Corp',
'ACME Fruits Inc',
],
});
Events
Marker.io exposes various events that can be listened to:
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 feedback button becomes visible.
Marker.on(‘hide’, function callback() { ... })
Triggers when the feedback button becomes hidden.
Feedback Events
Marker.on(‘capture’, function callback() { ... })
Triggers when feedback is captured.
Marker.on(‘feedbackbeforesend’, function callback() { ... })
Triggers before submitting the feedback, i.e. when the user clicks Submit feedback.
Marker.on(‘feedbacksent’, function callback() { ... })
Triggers once the feedback is successfully submitted.
Marker.on(‘feedbackerror’, function () { … })
Triggers if an error occurs while submitting feedback.
Marker.on('feedbackdiscarded', function () { ... })
Triggers when the user discards feedback by clicking on the "Close" button in the widget.
Advanced Features
Silent mode
You can enable silent mode to suppress console logs and reduce noise in your recorded logs.
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
The Marker.io widget has enhanced its capabilities to seamlessly render content from both same-domain and cross-domain iframes using advanced server-side rendering techniques.
Same-Domain iframes
For iframes that load content from the same domain as the parent page:
No Additional Steps Required: The widget can automatically snapshot the content of same-domain iframes without additional configurations or workarounds.
Cross-Domain iframes
For iframes that load content from a different domain:
Simple JavaScript Step: To ensure accurate rendering of cross-domain iframe content, you must insert the following script tag inside the HTML of the content being loaded in the cross-domain iframe (child iframe)
<script src="https://edge.marker.io/latest/iframe.support.js"></script>
By following the above guidelines, you can ensure that Marker.io's widget captures the content of any iframe, regardless of its domain origin, with precision and clarity.
Delayed capture via script
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 all shortcuts if they conflict with your web app.
In some particular cases, our keyboard shortcuts may conflict with your web app, you can easily disable all our shortcuts by passing a specific property in the JavaScript snippet configuration:
window.markerConfig = {
project: 'PROJECT_ID',
// Toggles off all keyboard shortcuts
keyboardShortcuts: false,
};
</script>
Capture screenshots without our server-side renderer
Native Browser Screenshot Rendering
Our renderer works perfectly in most cases to capture your website without the extension. However, with modern browsers' security limitations, you can face some issues when capturing screenshots. For example, any video or <canvas> element containing cross-domain content cannot be rendered. Also, our renderer can't access your server if you use Marker.io on a private network.
To ensure the capture works 100% of the time, you can use the native browser API: "media-record API" screenshot engine.
Here's how it works with a YouTube video:
The limitations are:
Not supported on mobile: we fall back to the regular server-side rendering.
It requires an extra step for the reporter to choose what screen/window they want to capture.
Screenshots are not retina-ready on Chrome & Edge Chromium: screenshots aren’t pixel-perfect on retina screens, but on Safari & Firefox, they’re perfect.
How to activate the native browser screenshot rendering?
Using Snippet code
<script>
window.markerConfig = {
project: 'PROJECT_ID',
source: 'snippet',
// Enables native browser screenshot rendering
useNativeScreenshot: true,
};
</script>
Using Browser SDK
const widget = await markerSDK.loadWidget({
project: 'PROJECT_ID',
// Enables native browser screenshot rendering
useNativeScreenshot: true,
});
Conclusion
The Marker.io widget JavaScript SDK offers a robust set of features to control and customize the widget's behavior on your website. From basic show/hide functionality to advanced features like iframe capturing and silent mode, the SDK provides the tools to integrate Marker.io seamlessly into your web application.