Assist

OpenReplay Assist allows you to support your users by seeing their live screen and instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen sharing software.

Installation

npm i @openreplay/tracker-assist

Usage

With JavaScript snippet

If your OpenReplay tracker is set up using the JS snippet, then simply replace the .../openreplay.js occurrence with .../openreplay-assist.js. Below is an example of how the script should like after the change:

<!-- OpenReplay Tracking Code -->
<script>
(function(A,s,a,y,e,r){
r=window.OpenReplay=[s,r,e,[y-1]];
s=document.createElement('script');s.src=a;s.async=!A;
document.getElementsByTagName('head')[0].appendChild(s);
r.start=function(v){r.push([0])};
r.stop=function(v){r.push([1])};
r.setUserID=function(id){r.push([2,id])};
r.setUserAnonymousID=function(id){r.push([3,id])};
r.setMetadata=function(k,v){r.push([4,k,v])};
r.event=function(k,p,i){r.push([5,k,p,i])};
r.issue=function(k,p){r.push([6,k,p])};
r.isActive=function(){return false};
r.getSessionToken=function(){};
})(0, "PROJECT_KEY", "//static.openreplay.com/3.3.1/openreplay-assist.js",1,28);
</script>

With NPM

Initialize the tracker then load the @openreplay/tracker-assist plugin.

If your website is a Single Page Application (SPA)

import Tracker from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
const tracker = new Tracker({
projectKey: PROJECT_KEY,
});
tracker.use(trackerAssist(options)); // check the list of available options below
tracker.start();

If your web app is Server-Side-Rendered (SSR)

Follow the below example if your app is SSR. Ensure tracker.start() is called once the app is started (in useEffect or componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
import trackerFetch from '@openreplay/tracker-assist/cjs';
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
});
tracker.use(trackerAssist(options)); // check the list of available options below
//...
function MyApp() {
useEffect(() => { // use componentDidMount in case of React Class Component
tracker.start();
}, [])
//...
}

Options

trackerAssist({
confirmText: string;
})
  • confirmText: Customize the text that gets displayed in the calling popup.

Troubleshooting

Critical dependency: the request of a dependency is an expression

Please apply this workaround if you face the below error when compiling:

Failed to compile.
./node_modules/peerjs/dist/peerjs.min.js
Critical dependency: the request of a dependency is an expression

If you encounter any other issue, please connect to our Slack and get help from our community.