OpenReplay Assist vous permet d’assister vos utilisateurs en visualisant leur écran en direct et en démarrant instantanément un appel (WebRTC) avec eux sans nécessiter de logiciel de partage d’écran tiers.

npm i @openreplay/tracker-assist

Si votre tracker OpenReplay est configuré à l’aide du snippet JS, remplacez simplement l’occurrence de .../openreplay.js par .../openreplay-assist.js. Voici un exemple de ce à quoi devrait ressembler le script après la modification :

<!-- OpenReplay Tracking Code -->
<script>
var initOpts = { projectKey: "GxPpaDARdn2345fgt321" };
var startOpts = { userID: "" };
(function(A,s,a,y,e,r){
  r=window.OpenReplay=[e,r,y,[s-1, e]];
  s=document.createElement('script');s.src=A;s.async=!a;
  ...
})("//static.openreplay.com/latest/openreplay-assist.js", 1, 0, initOpts, startOpts);
</script>

Initialisez le tracker puis chargez le plugin @openreplay/tracker-assist.

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();

Suivez l’exemple ci-dessous si votre application est en SSR. Assurez-vous que tracker.start() est appelé une fois l’application démarrée (dans useEffect ou 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();
  }, [])
//...
}

Le plugin assist prend en charge les options suivantes :

trackerAssist({
  callConfirm?: string|ConfirmOptions;
  controlConfirm?: string|ConfirmOptions;
  config?: object;
  onAgentConnect?: () => (()=>void | void);
  onCallStart?: () => (()=>void | void);
  onRemoteControlStart?: () => (()=>void | void);
	onCallDeny?: () => any;
	onRemoteControlDeny?: (agentInfo: Record<string, any>) => any;
  onRecordingDeny?: (agentInfo: Record<string, any>) => any;
	callUITemplate?: string
	/** 
	 * enables gzip compression for big batches on client side
	 * */
	compressionEnabled: boolean;
	/**
	 * Minimum amount of MESSAGES in a batch to trigger compression run
	 * @default 5000
	 * */
	compressionMinBatchSize: number
})

Le contrôle à distance ainsi que les widgets d’appel, ceux que voit l’utilisateur final, peuvent être entièrement personnalisés.

type ConfirmOptions = {
  text?:string,
  style?: StyleObject, // style object (i.e {color: 'red', borderRadius: '10px'})
  confirmBtn?: ButtonOptions, 
  declineBtn?: ButtonOptions
}

type ButtonOptions = HTMLButtonElement | string | {
  innerHTML?: string, // to pass an svg string or text
  style?: StyleObject, // style object (i.e {color: 'red', borderRadius: '10px'})
}

Il est possible de personnaliser chaque aspect de ce widget grâce à l’ensemble suivant d’ids et de classes. Les Ids servent d’ancres pour les boutons/éléments individuels tandis que les classes peuvent être utilisées pour les conteneurs de groupe.

Voici la liste de tous les callbacks :

• callConfirm : Personnalise le texte et/ou la disposition de la popup de demande d’appel.
• controlConfirm : Personnalise le texte et/ou la disposition de la popup de demande de contrôle à distance.
• config : Contient une configuration personnalisée de serveur ICE/TURN. Par défaut, { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }], 'sdpSemantics': 'unified-plan' }.
• onAgentConnect: () => (()=>void | void) : Cette fonction de callback est déclenchée dès qu’une session en direct démarre et renvoie les détails de l’agent (email, nom et query). Elle peut également renvoyer onAgentDisconnect qui sera appelée lorsque la session sera déconnectée. En cas de connexion instable, elle peut être appelée plusieurs fois. Voici un exemple :

onAgentConnect = ({ email, name, query }) => {
  console.log("Live session started")
  const onAgentDisconnect =  () => console.log("Live session stopped")
  return onAgentDisconnect
}

• onCallStart: ({ email, name, query }) => (()=>void | void) : Cette fonction de callback est déclenchée dès qu’un appel (webRTC) démarre et renvoie les détails de l’agent (email, nom et query). Elle peut également renvoyer onCallEnd qui sera appelée lorsque l’appel se terminera. En cas de connexion instable, elle peut être appelée plusieurs fois. Voici un exemple :

onCallStart: () => {
  console.log("Call started")
  const onCallEnd = () => console.log("Call ended")
  return onCallEnd
}

• onRemoteControlStart: ({ email, name, query }) => (()=>void | void) : Cette fonction de callback est déclenchée dès qu’une session de contrôle à distance démarre et renvoie les détails de l’agent (email, nom et query). Elle peut également renvoyer onRemoteControlEnd qui sera appelée lorsque les autorisations de contrôle à distance seront révoquées. Voici un exemple :

onRemoteControlStart: () => {
  console.log("Remote control started")
  const onControlEnd = () => console.log("Remote control ended")
  return onControlEnd
}

• onCallDeny?: () => any; : Cette fonction de callback est déclenchée lorsque l’appel a été refusé par un utilisateur pendant la phase de demande.

onCallDeny: () => {
  console.log("Call denied")
}

• onRemoteControlDeny?: (agentInfo: Record<string, any>) => any; : Cette fonction de callback est déclenchée lorsque la session de contrôle à distance a été refusée par un utilisateur pendant la phase de demande et renvoie les détails de l’agent (email, nom et query).

onRemoteControlDeny: ({ email, name, query }) => {
  console.log("Remote control request denied for", email)
}

• onRecordingDeny?: (agentInfo: Record<string, any>) => any; : Cette fonction de callback est déclenchée lorsque la session d’enregistrement a été refusée par un utilisateur pendant la phase de demande et renvoie les détails de l’agent (email, nom et query).

onRecordingDeny: ({ email, name, query }) => {
  console.log("Recording session denied")
 
}

Vous rencontrez des difficultés pour configurer ce plugin ? Connectez-vous à notre Slack ou consultez notre Forum et obtenez de l’aide de notre communauté.