Base de Conhecimento

Back to support overview

Este caso de uso descreve um exemplo de implementação de um código LiveView / Co-Navegação com um simples botão de iniciar/parar.

Configuração

Na configuração do plugin do backend, ative o plugin LiveView. Usamos a seguinte configuração em nosso exemplo.

Configuração
Valor
Descrição

Privacidade

Mask user inputs

Queremos mascarar todas as entradas do usuário que acontecem em nossa página.

Optar por

Visitor

Queremos que o usuário clique no botão que inicia o CoBrowsing.

Implementação de Script

O JavaScript precisa ser integrado em cada página da Web onde desejamos fazer a co-navegação.

Aprenda como implementar o LiveView em sua página.

Código de exemplo - botão Iniciar/parar para a sessão LiveView /Co-navegação

O código a seguir inicia uma sessão LiveView. Vamos iniciar ou parar a sessão LiveView com essas funções CV.cobrowse.start() e CV.cobrowse.stop(). Adicionamos um addSessionStartedListener para verificar quando a sessão LiveView é iniciada e um addSessionStoppedListener para verificar quando a sessão é interrompida.

Se forem usadas gravações de sessão (ativadas por opção de cookie), é preferível usar a funcionalidade co-navegação abaixo.

Co-navegação

O código a seguir inicia uma sessão de Co-navegação. Vamos iniciar ou parar a sessão de co-navegação com essas funções CV.cobrowse.start() e CV.cobrowse.stop(). Adicionamos um addCobrowsingStartedListener para verificar quando a sessão de co-navegação é iniciada e um addCobrowsingStoppedListener para verificar quando a sessão é interrompida.

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