Co-Browsing - TeamViewer Support
<main> <article class="userContent"> <p>Navigation path: <code class="code codeInline" spellcheck="false" tabindex="0">Plugins</code></p><p>When adding or editing your Co-Browsing module, the following can be configured:</p><p><br></p><h3></h3><h2 data-id="tab%3A-general">Tab: General</h2><h3 data-id="recordings">Recordings</h3><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://docs.chatvisor.com/img/newdocsimg/css_plugin-cobrowsing-recordings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css_plugin-cobrowsing-recordings.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Choose whether you want to save or not save recordings of your Co-Browsing sessions. Some countries require companies (esp. banks) to have every customer interaction documented for audit reasons.</p><h3 data-id="optin">Optin</h3><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_module-configuration_co-browsing_2_optin.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_2_optin.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="-1"></h3><h3 data-id="privacy">Privacy</h3><h4 data-id="web">Web</h4><h5 data-id="agent-side">Agent Side</h5><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_module-configuration_co-browsing_3_privacy.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_3_privacy.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h5 data-id="mask-user-inputs">Mask user inputs</h5><p>All inputs of users are masked. Password fields are masked in any case - regarding that no configuration needed. Masked for TeamViewer Engage means, that all characters are replaced with '*' and therefore unidentifiable for the agent.</p><p>Note: Agent-side masking with TeamViewer Engage actually means that data is excluded from data transmission. Excluded means, that the potential sensitive data will at no time be captured and transferred from the client side anywhere else. Further it needs to be emphasized on the fact, that the validation whether data is sensitive or not entirely happens on the client side, which again implicates that sensitive data will at no point be transferred.</p><h5 data-id="mask-digits">Mask digits</h5><p>Mask all digits.</p><h5 data-id="mask-content">Mask content</h5><p>All website content is masked. Every text field, input field - literally any type of content. Use "Mask Content" with Whitelisting to de-mask content where you are sure that it does not contian any PII (Personally Identifiable Information).</p><h5 data-id="store-and-show-the-ip-address-of-visitors">Store and show the IP address of visitors</h5><p>Store and show the IP address of visitors. By default, TeamViewer Engage does not store any IP addresses (recommended). Please note, that the IP is considered as PII.</p><h5 data-id="agent-side-blacklistingwhitelisting">Agent-side Blacklisting/Whitelisting</h5><p>These options are found hidden under the 'Advanced' button at the bottom of this section.</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_module-configuration_co-browsing_4_privacy-blacklist.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_4_privacy-blacklist.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Using HTML/CSS selectors you can select and mask content without needing to alter any your code.</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/U92DY1U03AQ4/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6032394/uploads/U92DY1U03AQ4/image.png" alt="image.png" height="113" width="562" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>To mask certain CSS classes, use '.' + "your-css-class", to mask HTML e.g. add a 'p' (without apostrophes) for <code class="code codeInline" spellcheck="false" tabindex="0"><p></code>.</p><h5 data-id="customer-side-blacklisting">Customer-side Blacklisting</h5><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_module-configuration_co-browsing_3_privacy_customerside.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_3_privacy_customerside.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Blacklisting options here function the same as those offered for agent-side blacklisting.</p><p>Elements blacklisted here are hidden from the customer but still transmitted and fully visible to the agent.</p><p><strong>📌Note</strong>: For technical reasons, customer-side masking cannot completely hide content from customers. While for example blacklisted text cannot be visually seen, it can still be found if the customer inspects the site's HTML code.</p><h3 data-id="advanced">Advanced</h3><h4 data-id="disable-iframes">Disable Iframes</h4><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_module-configuration_co-browsing_5_iframes.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_5_iframes.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Iframes are only visible during a Co-Browsing session, when the origin also includes the TeamViewer Engage JavaScript. Through this option, you can define, whether IFrames coming from an origin where the TeamViewer Engage JavaScript is included shall or shall not be displayed within a Co-Browsing session.</p><h4 data-id="transfer-only-with-xhr">Transfer only with XHR</h4><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_module-configuration_co-browsing_6_disable-websockets.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_6_disable-websockets.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>When your infrastrucure, your setup is protected by a firewall that disables all WebSocket connections, you need to enable this option to make sure there's a constant connection between TeamViewer Engage and your website/platform. Typically, WebSockets are our preferred way of connection because they provide a faster connection - using XHR works fine though, too.</p><h4 data-id="shadow-dom-prefix">Shadow Dom Prefix</h4><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_module-configuration_co-browsing_7_shadow-doms.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_7_shadow-doms.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h4 data-id="optimize-performance">Optimize performance</h4><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_module-configuration_co-browsing_8_performance.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_8_performance.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h4 data-id="keep-session-for-different-domains">Keep session for different domains</h4><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_module-configuration_co-browsing_9_continuous-session.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_9_continuous-session.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>In case you have a multi-domain page or use subdomains, we need you to specify those to ensure a continous Co-Browsing experience. If not configured, a Co-Browsing session will be disconnected through the page switch. In order for TeamViewer Engage to understand that a session continues on another domain or subdomain, we need you to specify.</p><h4 data-id="session-based-visitor-id">Session Based Visitor ID</h4><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_module-configuration_co-browsing_10_session-based-visitor-id.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_10_session-based-visitor-id.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>TeamViewer Engage gives any user who visits a page which has our JavaScript implemented their own ID. Usually, these IDs are stored and read from localstorage and can last long. If this toggle is enabled, IDs are stored in sessionstorage and expire once the user closes the browser tab.</p><h4 data-id="resource-loading">Resource loading</h4><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_module-configuration_co-browsing_11-resource-loading.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_11-resource-loading.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>TeamViewer Engage will load resources (images, stylesheets) primarily from the TeamViewer Engage - DEV cache. This is useful to prevent TeamViewer Engage - DEV from requesting resources from your site.</p><h4 data-id="webgl">WebGL</h4><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_module-configuration_co-browsing_12_webgl.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_12_webgl.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Activate this option to enable WebGL canvas support.</p><h4 data-id="max-transferred-bytes">Max transferred bytes</h4><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_module-configuration_co-browsing_13_max-bytes.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing_13_max-bytes.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Enter the maximum number of bytes which can be transmitted after the session is restarted.</p><p><br></p><h3 data-id="-2"></h3><h2 data-id="tab%3A-co-browsing">Tab: Co-Browsing</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_module-configuration_co-browsing-tab.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing-tab.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p><strong>📌Note</strong>: Some options are only visible when Co-Browsing is activated.</p><h3 data-id="general">General</h3><p>Here you can activate Co-Browsing</p><h4 data-id="user-interface">User Interface</h4><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_module-configuration_co-browsing-specific_2_opt-in-ui.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing-specific_2_opt-in-ui.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h5 data-id="default-optin-ui">Default Optin UI</h5><p>The red marked configuration will add a widget to your page, that allows users to start a optin and 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_module-configuration_co-browsing-specific_2_opt-in-bubble-widget.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing-specific_2_opt-in-bubble-widget.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h5 data-id="additional-optin-popup-when-co-browsing-is-started">Additional optin popup when Co-Browsing is started</h5><p>When the function CV.cobrowse.start() is called, an additional popup is shown on the client side to confirm the Co-Browsing start.</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_module-configuration_co-browsing-specific_3_additional_popup.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing-specific_3_additional_popup.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h5 data-id="show-joined-agents-in-co-browsing-view">Show joined agents in Co-Browsing view</h5><p>At the top of the customers (visitors) view the count of joined agents is shown.</p><h3 data-id="bidirectional">Bidirectional</h3><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_module-configuration_co-browsing-specific_1_bidirectional.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing-specific_1_bidirectional.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>In this section you can configure how active your agents can be during a Co-Browsing session (in the Agent View). There are three complementary, but from each other independent options:</p><ul><li>Allow bidirectional interactions</li><li>Allow agents to guide and navigate customers. By activating this toggle-slider, agents will be able to scroll and click on behalf of the customer.</li><li>Disable Drawing</li><li>By default, agents can give visual hints to customers with the drawing function. This can be disabled.</li><li>Disable mouse</li><li>By default, agents can share their mouse cursor position with customers to guide them, but not click or scroll for them. This can be disabled.</li></ul><h3 data-id="advanced-1">Advanced</h3><p>Link Sharing</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_module-configuration_co-browsing-specific_3_share-sessions-link.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/newdocsimg/css-configuration_module-configuration_co-browsing-specific_3_share-sessions-link.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Allow customers to share their session on your website with their peers. Provide customers with a Co-Browsing link they can share. For further configuration and implementation, take a look at our <a href="https://developers.chatvisor.com/#operation/getUrlOfSessionByShareIdUsingGET" rel="nofollow noreferrer ugc">REST API Docs</a>.</p><p><br></p><h3 data-id="-3"></h3><h2 data-id="continue-reading-here">Continue reading here</h2><ul><li><a href="https://community.teamviewer.com/English/kb/articles/108744-plugins-04-audio-video-screenshare" rel="nofollow noreferrer ugc">Plugins - 04 Audio / Video / Screenshare</a></li></ul><p><br></p> </article> </main>
