<main>
<article class="userContent">
<p>This usecase describes an example implementation of a LiveView/Co-Browsing Code with a simple start/stop button.</p><h2 data-id="1.-configuration">1. Configuration</h2><p>In the plugin configuration of the backend, activate the LiveView plugin. We used the following configuration in our example.</p><div class="embedExternal embedImage display-large float-none">
<div class="embedExternal-content">
<a class="embedImage-link" href="https://us.v-cdn.net/6032394/uploads/FA6MB6MK8SYW/image.png" rel="nofollow noreferrer noopener ugc" target="_blank">
<img class="embedImage-img" src="https://us.v-cdn.net/6032394/uploads/FA6MB6MK8SYW/image.png" alt="image.png" height="141" width="707" loading="lazy" data-display-size="large" data-float="none"></img></a>
</div>
</div>
<h2 data-id="2.-script-implementation">2. Script Implementation</h2><p>The JavaScript has to be integrated in each webpage where we want to cobrowse.</p><p><a href="https://docs.chatvisor.com/docs/setup20_implementation-javascript" rel="nofollow noreferrer ugc">Learn how to implement the LiveView on your page.</a></p><h2 data-id="3.-sample-code-startstop-button-for-the-liveview-cobrowsing-session">3. Sample code - Start/stop button for the LiveView / CoBrowsing session</h2><p><em>The following code starts a LiveView session.</em> We will start or stop the LiveView session with these functions <code class="code codeInline" spellcheck="false" tabindex="0">CV.cobrowse.start()</code> and <code class="code codeInline" spellcheck="false" tabindex="0">CV.cobrowse.stop()</code>. We added an <code class="code codeInline" spellcheck="false" tabindex="0">addSessionStartedListener</code> to check when the LiveView session is started and a <code class="code codeInline" spellcheck="false" tabindex="0">addSessionStoppedListener</code> to check when the session is stopped.</p><p>If Session recordings (activated per Cookie optin) are used, it is preferred to use the CoBrowsing functionality below.</p><h3 data-id="cobrowsing">CoBrowsing</h3><p><em>The following code starts a CoBrowsing session.</em> We will start or stop the CoBrowsing session with these functions <code class="code codeInline" spellcheck="false" tabindex="0">CV.cobrowse.start()</code> and <code class="code codeInline" spellcheck="false" tabindex="0">CV.cobrowse.stop()</code>. We added an <code class="code codeInline" spellcheck="false" tabindex="0">addCobrowsingStartedListener</code> to check when the CoBrowsing session is started and a <code class="code codeInline" spellcheck="false" tabindex="0">addCobrowsingStoppedListener</code> to check when the session is stopped.</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><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>
</pre><h3 data-id="liveview">LiveView</h3><pre class="code codeBlock" spellcheck="false" tabindex="0"><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>
</pre><p><br></p>
</article>
</main>