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