@quickloopio/quickloop-sdk

Quickloop SDK Javascript Library

QuickloopSdk provides a set of in-browser functions to collect data for quickloop.io.

Important: this library is NOT meant to be used on server-side.

Installation

npm install @quickloop/quickloop-sdk
# OR
yarn add @quickloop/quickloop-sdk

Quick start

SDK Initialization

After signing up with quickloop.io, you should receive an API Key to use for the SDK. Use it to inialize the SDK as follow:

import { QuickloopSdk } from '@quickloopio/quickloop-sdk';

const sdk = QuickloopSdk.init({
  apiKey: 'YOUR_API_KEY',
});

It will take the SDK a few seconds to be fully ready to track your network logs. You can check its status by calling sdk.isReady() function.

Create a ticket

It is recommended to have a singleton SDK for your whole application. QuickloopSdk provides a static function getInstance() for you to retrieve the existing sdk instance.

const sdk = QuickloopSdk.getInstance();

// To submit a ticket
await sdk.submitTicket(
  'My app does not load',
  {
    // You can also provide custom propertes for you ticket
    priority: 1,
  },
);

Identify the reporter

Identifying the reporter helps you understand who creates the ticket, so you can plan out your follow-up action.

const sdk = QuickloopSdk.getInstance();
sdk.identify({
  /**
   * reporterId can be an email or any internal ID
   */
  reporterId: '[e-mail]',

  /**
   * reporterGroupId helps you group the reporters.
   * This is helpful when your application is organization-based.
   */
  reporterGroupId: 'Quickloop Inc.',

  /**
   * You can also provide your own custom properties
   */
  customProperties: {
    firstName: 'John',
    lastName: 'Smith',
  },
})

Hide elements from screen capture

Some sensitive information like passwords or credit card numbers should never be collected, even for debugging purpose.

If you want to hide a specific HTML element from our screen capture, simply add the quickloop__nocapture class to it.

Using built-in widgets

QuickloopSdk also provides some widgets out of the box, so you can start quickly without having to build your own forms.

The widgets contain a floating button and form in the bottom right corner of the screen.

const sdk = QuickloopSdk.getInstance();
sdk.loadWidgets();