CoBrowsing - Example - TeamViewer Support
<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>
