Knowledge Base

Back to support overview

This usecase describes an example implementation of a LiveView/Co-Browsing Code with a simple start/stop button.

1. Configuration

In the plugin configuration of the backend, activate the LiveView plugin. We used the following configuration in our example.

Config Value Description

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. Script Implementation

The JavaScript has to be integrated in each webpage where we want to cobrowse.

Learn how to implement the LiveView on your page.

3. Sample code - Start/stop button for the LiveView / CoBrowsing session

The following code starts a LiveView session. We will start or stop the LiveView session with these functions CV.cobrowse.start() and CV.cobrowse.stop(). We added an addSessionStartedListener to check when the LiveView session is started and a addSessionStoppedListener to check when the session is stopped.

If Session recordings (activated per Cookie optin) are used, it is preferred to use the CoBrowsing functionality below.

CoBrowsing

The following code starts a CoBrowsing session. We will start or stop the CoBrowsing session with these functions CV.cobrowse.start() and CV.cobrowse.stop(). We added an addCobrowsingStartedListener to check when the CoBrowsing session is started and a addCobrowsingStoppedListener to check when the session is stopped.

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