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

Overcomes server-side renderer limitations with useNativeScreenshot: true.

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,
});

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.

Webflow Integration

How to integrate Marker.io into your web app

Widget Screenshot Tips & Limitations

Get Started as a Guest Reporter

Widget Guide

Introduction

Installation and Access

Quick Installation

Core Functionalities

Visibility Control

Marker.show()

Marker.hide()

Feedback Capture

Marker.capture(mode)

Marker.cancelCapture()

Marker.unload()

Reporter Identification

Custom Metadata methods

Set custom metadata using Marker.setCustomData()

Event Handling

Load Events

Visibility Events

Feedback Events

Advanced Features

Silent mode

Capture iframes

Same-Domain iframes

Cross-Domain iframes

Delayed capture

Disabling Keyboard Shortcuts

Capture screenshots without our server-side renderer

Native Browser Screenshot Rendering

How to activate the native browser screenshot rendering?

Using Snippet code

Using Browser SDK

Screenshot Booster Link Removal

Conclusion

`Marker.show()`

`Marker.hide()`

`Marker.capture(mode)`

`Marker.cancelCapture()`

`Marker.unload()`

Set custom metadata using `Marker.setCustomData()`