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.
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.
See all possible configuration attributes on ReplayUX API Docs.
Advanced
... ... ...
Expert
You can respond to an event to start the recording. In this example we respond to a button click:
Replay UX Replay UX Recording status: Not recording Start recording
Javascript
It is also possible to use ReplayUX
as a package:
const 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:
; ; ;
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.