<main>
<article class="userContent">
<p>Navigation path: <code class="code codeInline" spellcheck="false" tabindex="0">Live View > Tab: Co-Browsing</code></p><h2 data-id="purpose">Purpose</h2><p>Co-Browsing allows you to see what your customer sees, therefore provides you with visual context. Co-Browsing can be started with just a click (no downloads or installations) and is available for websites, web apps, and mobile apps.</p><h2 data-id="feature-description">Feature description</h2><div class="embedExternal embedImage display-large float-none">
<div class="embedExternal-content">
<a class="embedImage-link" href="https://docs.chatvisor.com/img/newdocsimg/css-configuration_live-view_features.jpg" rel="nofollow noreferrer noopener ugc" target="_blank">
<img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_live-view_features.jpg" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a>
</div>
</div>
<p><br></p><h2 data-id="overview-of-live-sessions">Overview of live sessions</h2><p>In <em>Live View</em> you find yourself an overview of all currently active sessions on your website. With every session, some additional information is displayed:</p><ul><li>Status</li><li>The status (the most left column) is orange, when the visitor is currently active on your website and blue, when the visitor has your website opened as a tab or in another browser window, but is currently doing something else than actively browsing your site.</li><li>Session Id</li><li>The <code class="code codeInline" spellcheck="false" tabindex="0">Session Id</code> is the unique number to identify a user among all your current website visitors.</li><li>Current Path</li><li>Shows where the user is currently on your page.</li><li>Browser/Device</li><li>Shows browser the user is using.</li><li>OS</li><li>Shows operating system the user is using.</li><li>Location</li><li>Shows location of user.</li><li>Labels</li><li>Through Labels additional information is displayed, for example the user's user name within your web application.</li></ul><h2 data-id="start-co-browsing-with-a-customer">Start Co-Browsing with a customer</h2><p>To start Co-Browsing with a customer, the customer first needs to optin to the interaction. This can be initiated two ways:</p><ul><li>Button on website</li><li>Co-Browsing request via Live Chat</li></ul><p>The optin process can vary depending on how your organization decided to model it. The most common though is that the customer clicks a button on your website to initiate Co-Browsing.</p><p>Customer shares <code class="code codeInline" spellcheck="false" tabindex="0">Session Id</code>, you connect through <code class="code codeInline" spellcheck="false" tabindex="0">Connect by code</code></p><ol><li>Through for example clicking a button, customers receive their unique <code class="code codeInline" spellcheck="false" tabindex="0">Session Id</code> and acknowledge that an agent can connect</li><li>Customer shares <code class="code codeInline" spellcheck="false" tabindex="0">Session Id</code> with agent</li><li>Agents connect through entering <code class="code codeInline" spellcheck="false" tabindex="0">Session Id</code> into <code class="code codeInline" spellcheck="false" tabindex="0">Connect by code</code></li><li>Co-Browsing starts</li></ol><div class="embedExternal embedImage display-large float-none">
<div class="embedExternal-content">
<a class="embedImage-link" href="https://docs.chatvisor.com/img/newdocsimg/css-configuration_live-view_connect-by-code.jpg" rel="nofollow noreferrer noopener ugc" target="_blank">
<img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_live-view_connect-by-code.jpg" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a>
</div>
</div>
<p><br></p><h2 data-id="within-a-co-browsing-session">Within a Co-Browsing session</h2><p>After connecting to a customer, you enter the Co-Browsing session:</p><div class="embedExternal embedImage display-large float-none">
<div class="embedExternal-content">
<a class="embedImage-link" href="https://docs.chatvisor.com/img/newdocsimg/css-configuration_live-view-agent-view.png" rel="nofollow noreferrer noopener ugc" target="_blank">
<img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_live-view-agent-view.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a>
</div>
</div>
<p><br></p><h3 data-id="top-bar">Top bar</h3><div class="embedExternal embedImage display-medium float-none">
<div class="embedExternal-content">
<a class="embedImage-link" href="https://us.v-cdn.net/6032394/uploads/N7IH09YLIBAK/image.png" rel="nofollow noreferrer noopener ugc" target="_blank">
<img class="embedImage-img" src="https://us.v-cdn.net/6032394/uploads/N7IH09YLIBAK/image.png" alt="image.png" height="353" width="724" loading="lazy" data-display-size="medium" data-float="none"></img></a>
</div>
</div>
<p><br></p><h3 data-id="side-bar">Side bar</h3><div class="embedExternal embedImage display-large float-none">
<div class="embedExternal-content">
<a class="embedImage-link" href="https://us.v-cdn.net/6032394/uploads/HQG54JBABVVC/image.png" rel="nofollow noreferrer noopener ugc" target="_blank">
<img class="embedImage-img" src="https://us.v-cdn.net/6032394/uploads/HQG54JBABVVC/image.png" alt="image.png" height="178" width="887" loading="lazy" data-display-size="large" data-float="none"></img></a>
</div>
</div>
<p><br></p>
</article>
</main>