@tremby/marker-io-browser

Official Marker.io browser SDK 🚀

Website • Docs • Blog

Examples
Features
Installation
API docs
Events
Support
License

Examples

Vue.js
React (Coming soon)
Vanilla Javascript

Features

Inject Marker.io widget in your web app
Full control of the widget (hide / show, trigger captures, ...)
Identify reporters (Learn more)
Inject custom metadata in issues (Coming soon)

Installation

First install the package from npm:

npm install -s @marker.io/browser

Setup the SDK in your code:

import markerSDK from '@marker.io/browser';

const widget = await markerSDK.loadWidget({ destination: 'abcd1234567890' });

⚙️ API

`widget.show()`

Shows the Marker.io feedback widget.

`widget.hide()`

Hides the Marker.io feedback widget.

`widget.isVisible()`

Returns wether the feedback widget is currently visible or not.

`widget.capture(mode)`

Captures a feedback on the current page.

mode: Type of capture to trigger. Available modes: fullscreen, advanced.
- fullscreen captures the entire visible area
- advanced shows the advanced capture options: limited area, entire page and desktop.

Example

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

`widget.cancelCapture()`

Cancels current capture.

`widget.isExtensionInstalled()`

Returns a Promise<Boolean> that indicates if the Marker.io extension has been detected. Having the extension installed allows more accurate screen captures and provides more capture options.

Example

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

`widget.setReporter(reporterInfo)`

Sets the current reporter information given a reporterInfo object:

reporterInfo.email: the email address of the reporter
reporterInfo.fullName: the full name of the reporter

Example

widget.setReporter({
  email: 'client@website.com',
  fullName: 'Gabrielle Rose',
});

`widget.unload()`

Unloads and cleans up Marker.io SDK and all used resources.

🚨 Events

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

Usage:

widget.on('eventName', function listener() {
  // event handler code
});

`'load'`

Triggers once Marker.io is loaded.

`'loaderror'`

Triggers if an error occurs while loading Marker.io.

`'beforeunload'`

Triggers right before Marker.io unloads.

`'show'`

Triggers when the feedback button becomes visible.

`'hide'`

Triggers when the feedback button becomes hidden.

`'capture'`

Triggers when a feedback is captured.

`'feedbackbeforesend'`

Triggers before submitting the feedback, i.e. when the user clicks Submit feedback.

`'feedbacksent'`

Triggers once the feedback is successfully submitted.

`'feedbackerror'`

Triggers if an error occurs while submitting feedback.

`'feedbackdiscarded'`

Triggers when the user discards a feedback by clicking on the "Close" button in the widget.

🙋‍♂️ Identify reporters

Whenever your application knows about your reporters' identity, you should provide that information through the Marker.io snippet code.

Why?

The reporting experience will be much better for your guests as they will not be prompted to provide their contact information while reporting their issues.

Method 1: passing reporter info while loading your widget

Identifying your reporters is dead-simple: all you need to do is to provide their reporter information in the configuration object of your snippet code.

const widget = await markerSDK.loadWidget({
  destination: '<DESTINATION ID>',

  reporter: {
    email: 'john@clientwebsite.com',
    fullName: 'John Smith',
  },
});

Method 2: set reporter info using `widget.setReporter()`

widget.setReporter({
  email: 'john@clientwebsite.com',
  fullName: 'John Smith',
});

⚙️ Custom metadata

While Marker.io automatically captures various metadata about the issue (page URL, browser context, console logs, …), it is also possible to pass custom metadata to your issues using the SDK.

For example, this can be useful to help developers debug issues by adding more details about the current state of the application.

Supported types of custom metadata:

number
boolean
strings
arrays
objects

Method 1: passing custom metadata while loading your widget

const widget = await markerSDK.loadWidget({
  destination: '<DESTINATION ID>',

  customData: {
    storeId: 123,
    storeName: 'Organic Fruits',
  },
});

Method 2: set custom metadata using `widget.setCustomData()`

widget.setCustomData({
  product: 'Orange Juice',
  price: 3.99,
  stock: 130,
});

Support

Need help integrating Marker.io with your web app? Feel free to contact us via your Marker.io account.

For every bugs, improvements or feature requests related to this SDK, please report a GitHub issue.

License

Released under the MIT license.