Basic widget control methods

In certain cases, you want to control exactly when the widget is shown on your website. For instance, you might want to implement a custom feedback button that will be natively integrated within your web application, or display the button only if certain conditions are met.

The widget SDK provides full control over the widget's behaviour on your website. It allows you to show or hide the widget when desired and even to programatically trigger the capture as described below.

Getting started

Read through the widget setup guide which explains how to install on your website in just a few minutes.

Once the snippet code is installed, the SDK will be available under window.Marker.

Shows the feedback button on your website. This method is especially useful when your widget is hidden by default.


Hides the feedback button from your website.

Note: this method only makes the button invisible, meaning that it will still be possible to trigger the capture using the keyboard shortcut.


Captures a feedback on the current page.

Note: you can control which type of capture to trigger by supplying the mode parameter.

Available modes:

  • fullscreen captures the entire visible area

  • advanced shows the advanced capture options: limited area, entire page and desktop.


Marker.capture(); // or


If the user is currently reporting feedback, calling this method will dismiss it and close the widget.

Marker.isExtensionInstalled() : Promise<Boolean>

Tells if browser extension is installed in the current user environment.


Marker.isExtensionInstalled().then(installed => {
if (installed) {
// ...
} else {
// show install button

Marker.setReporter({ email: String, fullName: String }) : Promise<Boolean>

Allows setting reporter information before capturing feedback. This makes sure your reporters do not have to manually enter their contact information.

You should call this method whenever your application knows about the reporter's identity.


email: '',
fullName: 'Gabrielle Rose'


This method will make sure to unload completely from your website. Keyboard shortcuts will be disabled and all UI elements will be removed.

Events exposes a variety of events that can be listened to using the methods described below.

Marker.on(‘load’, function callback() { ... })

Triggers once is loaded.

Marker.on(‘loaderror’, function callback() { ... })

Triggers if an error occurs while loading

Marker.on(‘beforeunload’, function callback() { ... })

Triggers right before 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 a 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 a feedback by clicking on the "Close" button in the widget.

Enabling silent mode

By default, 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:

window.markerConfig = {
destination: 'DESTINATION_ID',
silent: true, // <~ Enable silent mode

!function(e,r,t){if(e.__Marker)return;e.__Marker={};var n=r.createElement("script");n.async=1,n.src="";var s=r.getElementsByTagName("script")[0];s.parentNode.insertBefore(n,s)}(window,document);

That's it! will now act silent.

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 are able to 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 enable support for it.

Here's what you need to insert inside your child iframes:

<script src=""></script>

Here's a schema to show you how to install the script.

Delayed capture via script

Delay the server-side capture so that your CSS animations can run before the screenshot is taken.

You can enable delayed capture adding a special parameter in your snippet code configuration:

window.markerConfig = {
destination: '<DESTINATION_ID>',

// Add the following to delay the server-side rendering
ssr: {
renderDelay: 3000, // 0 - 15000 (ms)

Did this answer your question?