Skip to main content
All CollectionsDeveloper Documentation
Widget JavaScript SDK
Widget JavaScript SDK

Take control of your Marker.io widget using JavaScript

Olivier Kaisin avatar
Written by Olivier Kaisin
Updated over a week ago

Introduction

The Marker.io Widget JavaScript SDK enables comprehensive control over the Marker.io feedback widget on your website. This guide provides detailed instructions on utilizing the SDK to enhance user experience and streamline feedback collection.

Installation and Access

Quick Installation

  • Installation Guide: 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 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, but allows keyboard shortcut activation.

Feedback Capture

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:

  • fullscreen captures the entire visible area

  • advanced the 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
  }
});

Reporter Identification

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 may call this method when your application knows 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',
],
});

Event Handling

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

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

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

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.

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.

Related Articles
Widget Appearance
Automatically Identifying Reporters
Widget Guide
The Marker.io widget is not appearing
Did this answer your question?