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

npm i @openreplay/tracker-assist

Si votre tracker OpenReplay est configuré à l’aide de l’extrait JS, il vous suffit de remplacer l’occurrence .../openreplay.js par .../openreplay-assist.js. Voici un exemple de ce à quoi le script devrait ressembler 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 ci-dessous :

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
})

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 tous les aspects de ce widget grâce à l’ensemble d’ids et de classes ci-dessous. 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 : Personnalisez le texte et/ou la mise en page de la popup de demande d’appel.
• controlConfirm : Personnalisez le texte et/ou la mise en page de la popup de demande de contrôle à distance.
• config : Contient la configuration personnalisée du serveur ICE/TURN. Sa valeur par défaut est { '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é lorsque la session est déconnectée. En cas de connexion instable, cela peut être appelé 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é lorsque l’appel se termine. En cas de connexion instable, cela peut être appelé 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é lorsque les autorisations de contrôle à distance sont 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 lorsqu’un appel a été refusé par un utilisateur durant la phase de demande.

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

• onRemoteControlDeny?: (agentInfo: Record<string, any>) => any; : Cette fonction de callback est déclenchée lorsqu’une session de contrôle à distance a été refusée par un utilisateur durant 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 lorsqu’une session d’enregistrement a été refusée par un utilisateur durant 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 auprès de notre communauté.