replayux

v2.4.3

Published

2 years ago

Record web and mobile apps with replayux.com

Downloads

0High
0Medium
0Low

record web record app screen recording app recording browser recording record browser replay session session replayer ux ux/ui replay ux

ReplayUX

Replay User Experience

A very powerful WEB and MOBILE applications screen recorder, to be replayed on replayux.com.

ReplayUX allows to easily record any browser screen (Firefox, Chrome, Safari, Edge/Internet Explorer, Opera, etc.) and any HTML5/CSS mobile hybrid app (Ionic, Cordova, Capacitor, etc.)

Install

To view your recordings, visit ReplayUX and claim your domain by creating a FREE account. Please note that to use it on mobile apps you will need your account ready before any recording to be saved.

Recordings from localhost and mobile apps require an api key in order to be saved.

Quick Start

Looking to quickly add ReplayUX to your project? Use CDN, provided for free by the folks at JSDelivr. Copy-paste the script below into your <body> tag at the end of the page to improve loading speed. It will automatically start recording the page where it is placed.

<script
    src="https://cdn.jsdelivr.net/npm/replayux@latest/dist/replayux.min.js" 
    rec-title="Awesome recording"></script>

See all possible configuration attributes (rec-id, rec-title, rec-description, etc...) on ReplayUX API Docs.

Alternatively, if you want to start recording as soon as possible, place it into the <head> tag.

Once the script is ready, it will load all of ReplayUX components and will add beforeunload event listener. This event will occur just the moment the user closes the browser tab. When this event occurs, it will automatically stop recording.

Package

Using a package manager? Head to the npm package page.

npm

Install ReplayUX in your Node.js powered apps with the npm package:

npm install replayux --save

require('replayux') will load all of ReplayUX components and will add beforeunload event listener. When this event occurs, it will automatically stop recording. The replayux module itself exports the main class, ReplayUX and an instance of this class as a const variable named recorder.

yarn

Install ReplayUX in your Node.js powered apps with the yarn package:

yarn add replayux

Examples

Basic

This is the most simple usage. It will automatically start recording when page loads. A random User ID will be generated and persisted in cookies.

<script src="https://cdn.jsdelivr.net/npm/replayux@latest/dist/replayux.min.js" rec-title="Awesome recording" rec-cookies-enabled="true"></script>

See all possible configuration attributes on ReplayUX API Docs.

Advanced

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        ...
        <script src="https://cdn.jsdelivr.net/npm/replayux@latest/dist/replayux.min.js"></script>
        <script>
            // By default it will start automatically once invoked
            new replayux.ReplayUX({
                // The recording id that will help to identify the recording, defaults empty
                recId: 'basic',
                // The title of the recording, defaults empty
                recTitle: 'Basic example',
                // A description for the recording, defaults empty
                recDescription: 'Recording the basic example page',
                // By default it will generate a random one and save as cookie for later uses
                recUid: 'uid',
                // Enables persisting uid in a cookie
                recCookiesEnabled: true,
            });
        </script>
        ...
    </body>
</html>

Expert

You can respond to an event to start the recording. In this example we respond to a button click:

<!DOCTYPE html>
<html>

<head>
    <title>Replay UX</title>
</head>

<body>
    <h1>Replay UX</h1>
    <p>Recording status: <span id="recording-status">Not recording</span></p>
    <button id="start-stop" onclick="handleBtnClick()">Start recording</button>

    <script src="https://cdn.jsdelivr.net/npm/replayux@latest/dist/replayux.min.js"></script>

    <script>
        const recordingStatus = document.querySelector('#recording-status');
        const btn = document.querySelector('#start-stop');

        const replayUx = new replayux.ReplayUX({
            recType: 'page', // The recording type, defaults to 'page'
            recId: 'advanced', // The recording id that will help to identify the recording, defaults empty
            recTitle: 'Advanced example', // The title of the recording, defaults empty
            recDescription: 'Recording the advanced example page', // A description for the recording, defaults empty
            recUid: 'uid', // The User ID, by default it will generate a random one and save as cookie for later uses, defaults random
            recApiKey: '', // Needed only when it is not possible to protect `replayux.com` account with domain, defaults empty
            recAutoStart: false, // Start recording immediately, defaults to true
            recOptions = {}, // Additional options, @see https://github.com/rrweb-io/rrweb/blob/master/guide.md#record
            recCookiesEnabled: false, // Allows or denies the use of cookies, defaults to false
            recCookieMaxAge: 60 * 60 * 24 * 365, // Max age for the cookie, defaults one year
        });

        replayUx.on('recording', function (isRecording) {
            recordingStatus.innerHTML = isRecording ? 'Recording' : 'Not recording';
            btn.innerHTML = isRecording ? 'Stop recording' : 'Start recording';
        });

        function handleBtnClick() {
            if (!replayUx.recIsRecording) {
                replayUx.start();
            } else {
                replayUx.stop();
            }
        }
    </script>
</body>

</html>

Javascript

It is also possible to use ReplayUX as a package:

const { ReplayUX } = require('replayux');

new replayux.ReplayUX({
    recId: 'basic',
    recTitle: 'Basic example',
    recDescription: 'Recording the basic example page',
    recCookiesEnabled: true,
});

Typescript

The package is ready to be used as a Typescript package too:

import { ReplayUX, IReplayUXSettings } from 'replayux';

const settings: IReplayUXSettings = {
    recId: 'basic',
    recTitle: 'Basic example',
    recDescription: 'Recording the basic example page',
    recCookiesEnabled: true,
};

const replayUx = new ReplayUX(settings);

It allows an easy integration with any popular framework like Angular, React, Stencil, Vue, and many others.

Privacy

NOTE when no rec-uid is provided, a random one will be generated. In order to be compliant with GDPR, rec-use-cookies must be specifically set to true before the start of any recording. This will enable the rec-uid value to be persisted for future uses. Otherwise a new uid value will be generated each recording. Sensitive data will be automatically removed.

When some contents on the webpage are not willing to be recorded, the following approaches can be followed:

An element with the class name .rr-block will not be recorded. Instead, it will replay as a placeholder with the same dimension.
An element with the class name .rr-ignore will not record its input events.
input[type="password"] will be ignored as default.

How it works

ReplayUX records the web thanks to rrweb library. Then it sends the events to a backend server so it can be replayed nicely.