Skip to main content

Base de Conocimientos

Back to support overview

CoNavegación (CoBrowsing) - Ejemplo

Última modificación: 21 mar 2024

Este caso de uso describe un ejemplo de implementación de un Código LiveView/Co-Navegación con un simple botón de inicio/parada.

1. Configuración

En la configuración de plugins del backend, active el plugin LiveView. Usamos la siguiente configuración en nuestro ejemplo.

ConfigValueDescription

Privacy

Mask user input

We want to mask all user inputs which happen on our page.

Optin

Visitor

We want the user to click on the button that starts the CoBrowsing. 

2. Implementación del Script

El JavaScript tiene que ser integrado en cada página web donde queramos hacer conavegación.

Aprende a implementar el LiveView en tu página.

3. Código de ejemplo - Botón de inicio/parada para la sesión LiveView / CoBrowsing

El siguiente código inicia una sesión LiveView. Iniciaremos o detendremos la sesión LiveView con estas funciones CV.cobrowse.start() y  CV.cobrowse.stop().  Incorporamos addSessionStartedListener para chequear cuando la session de LiveView ha iniciado y addSessionStoppedListener para chequear cuando la sessión se detiene. 

Si se utilizan grabaciones de sesión (activadas por Cookie optin), es preferible utilizar la funcionalidad CoBrowsing que se indica a continuación.

CoBrowsing

El siguiente códifgo inicia la sessión de CoBrowsing. Inicaremos o detendremos la sesión de CoBrowsing con las siguientes funciones CV.cobrowse.start() and CV.cobrowse.stop(). Agregamos addCobrowsingStartedListener para chequear cuando ha iniciado la sesión de CoBrowsing y a addCobrowsingStoppedListener para chequear cuando se detiene.

<script src="https://cdn.chatvisor.com/cdn/js/XXXXXX.js" type="text/javascript" async></script>
<button type="button" id="CV_START" onclick="CV.cobrowse.start()" style="display:block;" >Start Co-Browsing</button>
<button type="button" id="CV_STOP" onclick="CV.cobrowse.stop()" style="display:none;" >Stop Co-Browsing</button>
<script>

function initFunction(){
    var btnStop = document.getElementById("CV_STOP");
    var btnStart = document.getElementById("CV_START");
    CV.cobrowse.addCobrowsingStartedListener(function() {
        btnStop.style.display = "block";
        btnStart.style.display = "none";
    });
    CV.cobrowse.addCobrowsingStoppedListener(function() {
      btnStop.style.display = "none";
      btnStart.style.display = "block";
    });
}

if (!window.CVLoaded) {
    window.CVLoaded = initFunction;
} else {
    initFunction();
}
</script>

LiveView

<script src="https://cdn.chatvisor.com/cdn/js/XXXXXX.js" type="text/javascript" async></script>
<button type="button" id="CV_START" onclick="CV.liveview.startSharing()" style="display:block;" >Start LiveView</button>
<button type="button" id="CV_STOP" onclick="CV.liveview.stopSharing()" style="display:none;" >Stop LiveView</button>
<script>

function initFunction(){
    var btnStop = document.getElementById("CV_STOP");
    var btnStart = document.getElementById("CV_START");
    CV.liveview.addSessionStartedListener(function() {
        btnStop.style.display = "block";
        btnStart.style.display = "none";
    });
    CV.liveview.addSessionStoppedListener(function() {
      btnStop.style.display = "none";
      btnStart.style.display = "block";
    });
}

if (!window.CVLoaded) {
    window.CVLoaded = initFunction;
} else {
    initFunction();
}
</script>