CoBrowsing - Example

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 inputs	We want to mask all user inputs which happen on our page.
Optin	Visitor	We want that the user clicks on a button which starts the CoBrowsing session.

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>