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 Marker.io 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 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 that it will still be possible to trigger the capture using the keyboard shortcut. Read more

Marker.capture(mode)

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.

Example:

Marker.capture(); // or
Marker.capture('fullscreen');
Marker.capture('advanced');

Marker.cancelCapture()

If the user is currently reporting a 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.

Events

Marker.io exposes a variety of 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 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.

Did this answer your question?