@pulselabs-ai/web-sdk v1.0.2

WebSdk Library

Overview

WebSdk is a JavaScript/TypeScript library that provides screen recording capabilities with feedback collection functionality for web applications. It includes features like customizable recording duration, introduction popups, and replay capabilities.

Table of Contents

• Installation
• Basic Usage
• API Reference
• Configuration Options
• Events and Callbacks
• Introduction Popup
• Error Handling
• Complete Implementation Example
• Best Practices
• Browser Compatibility
• Dependencies

Installation

npm install @pulselabs-ai/web-sdk
# or
yarn add @pulselabs-ai/web-sdk

Basic Usage

React Example

import { WebSdk } from '@pulselabs-ai/web-sdk';

function App() {
  useEffect(() => {
    // Initialize WebSdk
    const webSdk = new WebSdk();

    // Configure and start recording
    webSdk.initRecording({
      apiKey: "your-api-key-here",
      initRecording: true,
      hideIntroductionPopup: false,
    });
  }, []);

  return (
    // Your app content
  );
}

Angular Example

Usage in Angular Component

import { Component, OnInit } from "@angular/core";
import { WebSdk } from "@pulselabs-ai/web-sdk";

@Component({
  selector: "app-root",
  template: ` <!-- Your component template --> `,
})
export class AppComponent implements OnInit {
  private webSdk: WebSdk;

  constructor() {
    this.webSdk = new WebSdk();
  }

  ngOnInit() {
    this.initializeWebSdk();
  }

  private async initializeWebSdk() {
    await this.webSdk.initRecording({
      apiKey: "your-api-key-here",
      initRecording: true,
      hideIntroductionPopup: false,
    });
  }

  // Optional: Method to manually start recording
  startRecording() {
    this.webSdk.startRecording();
  }

  // Optional: Method to manually stop recording
  stopRecording() {
    this.webSdk.stopRecording();
  }

  ngOnDestroy() {
    // Clean up when component is destroyed
    this.webSdk.stopRecording();
  }
}

Usage in Angular Service

import { Injectable } from "@angular/core";
import { WebSdk } from "@pulselabs-ai/web-sdk";

@Injectable({
  providedIn: "root",
})
export class WebSdkService {
  private webSdk: WebSdk;

  constructor() {
    this.webSdk = new WebSdk();
  }

  async initialize(config: {
    apiKey: string;
    initRecording?: boolean;
    hideIntroductionPopup?: boolean;
  }) {
    await this.webSdk.initRecording({
      apiKey: config.apiKey,
      initRecording: config.initRecording,
      hideIntroductionPopup: config.hideIntroductionPopup,
    });
  }

  startRecording(): void {
    this.webSdk.startRecording();
  }

  stopRecording(): void {
    this.webSdk.stopRecording();
  }
}

Using the Service in Components

import { Component } from "@angular/core";
import { WebSdkService } from "./web-sdk.service";

@Component({
  selector: "app-root",
  template: `
    <button (click)="startRecording()">Start Recording</button>
    <button (click)="stopRecording()">Stop Recording</button>
  `,
})
export class AppComponent {
  constructor(private webSdkService: WebSdkService) {
    this.initializeWebSdk();
  }

  private async initializeWebSdk() {
    await this.webSdkService.initialize({
      apiKey: "your-api-key-here",
      initRecording: true,
      hideIntroductionPopup: false,
    });
  }

  startRecording() {
    this.webSdkService.startRecording();
  }

  stopRecording() {
    this.webSdkService.stopRecording();
  }
}

Angular Module Configuration

import { NgModule } from "@angular/core";
import { WebSdkService } from "./web-sdk.service";

@NgModule({
  // ... other module configurations
  providers: [WebSdkService],
})
export class AppModule {}

API Reference

WebSdk Class

Constructor

const webSdk = new WebSdk();

Creates a new instance of WebSdk and initializes required styles.

Methods

initRecording

async initRecording(config: {
  apiKey: string;
  initRecording?: boolean;
  blockClass?: string;
  ignoreClass?: string;
  hideIntroductionPopup?: boolean;
}): void

Initializes the recording functionality with the following configuration options:

startRecording

startRecording(): void

Manually starts the recording session.

stopRecording

stopRecording(): void

Manually stops the recording session and cleans up resources.

Configuration Options

Screen Recording Duration

The default screen recording duration is set to 15 seconds. This is defined as:

Capture Methods

The library supports multiple capture methods that are loaded automatically during initialization.

1. Shake your cursor
2. CTRL+ALT+S / CTRL+OPTION+S
3. Feedback button

Events and Callbacks

Recording Stop Callback

When recording stops, the library automatically:

1. Sets recording state to false
2. Shows a replay dialog with the recorded events
3. Provides an option to start a new recording

Introduction Popup

The library includes a built-in introduction popup that can be:

• Shown by default on first use
• Disabled via configuration

Complete Implementation Example

import WebSdk from "web-sdk";

class MyApplication {
  private webSdk: WebSdk;

  constructor() {
    this.webSdk = new WebSdk();
  }

  async initialize() {
    // Initialize with full configuration
    await this.webSdk.initRecording({
      apiKey: "your-api-key-here",
      initRecording: true,
      blockClass: "no-record",
      ignoreClass: "ignore-record",
      hideIntroductionPopup: false,
    });
  }

  startManualRecording() {
    this.webSdk.startRecording();
  }

  stopManualRecording() {
    this.webSdk.stopRecording();
  }
}

Best Practices

1. Initialization: Always initialize WebSdk after your application has fully loaded.
2. API Key: Keep your API key secure and never expose it in client-side code.
3. Resource Management: Call stopRecording() when cleaning up your application.

Browser Compatibility

The library is compatible with modern browsers that support:

• ES6+ features
• Web APIs for screen recording
• Modern DOM manipulation

Dependencies

The library depends on several internal modules:

• RRWebScript for recording functionality

Notes

• The library prevents multiple instances by checking for existing feedback containers
• Recording sessions are automatically managed and cleaned up
• The library includes built-in styling through SCSS
• Capture methods are cached after initial loading

License

This SDK is proprietary and subject to the restrictions outlined in our Terms and Conditions.

Contributing

Add contribution guidelines here

Support

Add support information here