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:

| Parameter | Type | Required | Default | Description | | --------------------- | ------- | -------- | ------- | -------------------------------------------------- | | apiKey | string | Yes | - | Your API key for authentication | | initRecording | boolean | No | false | Automatically start recording after initialization | | blockClass | string | No | - | CSS class to exclude elements from recording | | ignoreClass | string | No | - | CSS class to ignore elements during recording | | hideIntroductionPopup | boolean | No | false | Hide the introduction popup |

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]