Basic widget control methods
In certain cases, you want to control exactly when the widget is shown on your website. For instance, you could implement a custom feedback button natively integrated within your web application or display the button only if certain conditions are met.
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
Read through the widget setup guide, which explains how to install Marker.io on your website in just a few minutes.
Once the snippet code is installed, the SDK will be available under window.Marker.
Marker.show()
Shows the Marker.io feedback button on your website. This method is especially useful when your widget is hidden by default.
Marker.hide()
Hides the Marker.io feedback button from your website.
Note: this method only makes the button invisible, meaning it will still be possible to trigger the capture using the keyboard shortcut.
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 areaadvancedshows the advanced capture options: limited area, the entire page, and 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()
This method will make sure to unload Marker.io completely from your website. 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>
Allows setting reporter information before capturing feedback. This ensures your reporters do not manually enter their contact information.
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
Passing custom metadata while loading your widget
Simply provide a customData object in your Marker.io widget config:
window.markerConfig = {
project: "<PROJECT ID>",
customData: {
storeId: 123,
storeName: 'Organic Fruits',
}
};
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 using the methods described below.
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.
Marker.on(‘show’, function callback() { ... })
Triggers when the feedback button becomes visible.
Marker.on(‘hide’, function callback() { ... })
Triggers when the feedback button becomes hidden.
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.
Enabling Marker.io silent mode
By default, Marker.io will log some useful information in the console to help you identify configuration problems and better understand how it functions.
However, 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>
That's it! Marker.io will now act silently.
Capture iframes
The widget can now render both same-domain and cross-domain iframes using server-side rendering.
Same-domain iframes do not require any change, as we can snapshot the contents without any workaround.
For cross-domain iframes, there's only one thing you need to do: include a small JavaScript file that enables support for it.
Here's what you need to insert inside your child iframes:
<script src="https://edge.marker.io/latest/iframe.support.js"></script>
Here's a schema to show you how to install the script.
Delayed capture via script
Delay the server-side capture so your CSS animations can run before the screenshot is taken.
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
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
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,
});