How to Test ScreenMeet CoBrowse

Overview

This article explains how to test ScreenMeet CoBrowse after the CoBrowse script has been deployed to your website. It covers starting a test session from your homepage, joining from the customer side, confirming that pages render correctly in the agent view, and validating the session across a broad sample of pages, sections, and subdomains. It also explains how to use the Tampermonkey browser extension to test CoBrowse locally on pages where the script is not yet deployed.

This article is intended for web administrators, developers, and support administrators who are validating a CoBrowse deployment.

Prerequisites

• The ScreenMeet CoBrowse script is deployed on every page you intend to test. See CoBrowse Script Installation.

• A CoBrowse deployment key is configured for your domain in the ScreenMeet console under Organization > Settings and Policies > CoBrowse Deployments.

• An agent account that can start CoBrowse sessions from the ScreenMeet Agent Portal or from your CRM integration (Salesforce, ServiceNow, Zendesk, or Dynamics 365).

• Two browser contexts: one for the agent and one for the customer. Use two separate browsers, or one normal window and one incognito or private window, so the sessions do not share storage.

• Network access to https://*.screenmeet.com and wss://*.screenmeet.com on port 443 (TCP and UDP) from both the agent and customer browsers.

Why test more than one page

Testing a single page confirms that the CoBrowse script loads and that a session can start. It does not confirm that CoBrowse works across your site. Each page type on a site tends to use a different template and a different mix of page elements, and CoBrowse handles each element differently.

Test a broad sample of pages so that you cover:

• Different page templates. A homepage, a product or article page, a search results page, a form page, and a checkout or account page each use different layouts, stylesheets, and components. A rendering problem in one template does not appear in the others.

• Iframes. Embedded content such as payment widgets, chat widgets, maps, and video players is loaded in an iframe. Iframes on your own domain render only if the CoBrowse script is also included inside them. Iframes from third-party domains are not rendered in the agent view.

• Dynamic and interactive elements. Dropdown menus, carousels, accordions, date pickers, and single-page application views modify the DOM after the page loads. The agent view must update as the customer interacts with them.

• Canvas and media elements. Charts, signature pads, and other <canvas> content require the Canvas Streaming setting and the appropriate element markup before the agent can see them.

• Subdomains and site sections. A storefront, a support portal, and a login or account area often run on separate subdomains, each with its own template. The session persists across them only if Multidomain is enabled and each domain is listed under your deployment key.

• Masked and sensitive fields. Login, payment, and profile pages contain fields that should be masked from the agent. Those pages need to be tested to confirm the masking is applied.

A session that works on the homepage but fails after three clicks on the checkout page is a common outcome of single-page testing. Navigating the site as a customer would and comparing the agent view with the customer's browser on every page is the only way to confirm the experience is consistent before launch.

Step 1: Start a CoBrowse session as the agent

1. In the agent browser, sign in to the ScreenMeet Agent Portal or open the ScreenMeet component in your CRM.

2. Create a new CoBrowse session.

3. Note the session PIN. This is the code the customer enters to join.

4. Leave the agent window open. The agent view updates once the customer joins.

Step 2: Join the session as the customer

1. In the customer browser, open your homepage. Starting from the homepage confirms the entry point most customers use and gives you a known starting place for navigation.

2. Open the CoBrowse PIN modal using the method your site supports:    

   • Click the CoBrowse button or link your site provides.

   • Append #startcb to the page URL to automatically open the PIN modal.

   • Append #cobrowse_pin=<PIN> to the page URL to join the session without entering a manual PIN.

   • If hotkeys are enabled on your site, press Shift + Space.

3. Enter the session PIN and accept the prompt.

4. In the agent browser, accept the prompt to enter the session.

The customer's page now appears in the agent view.

Step 3: Verify that the page renders correctly

Place the agent and customer windows side by side and compare them. The agent view rebuilds the page from the customer's DOM and your site's public assets, so rendering differences indicate assets the CoBrowse server cannot access or page elements that require special handling. Repeat this comparison on every page you visit during the session, not just the first.

Check each of the following in the agent view:

• Page layout matches the customer's browser, including column widths and spacing.

• Stylesheets are applied. Unstyled text or missing colours indicate a CSS file the CoBrowse server cannot fetch.

• Images, icons, and fonts load. Broken images or fallback fonts indicate assets that are not publicly accessible.

• Dynamic content such as dropdown menus, modals, accordions, and tabs update in the agent view when the customer interacts with them.

• Elements marked for PII masking (for example, data-cb-mask="true" or the cb-mask class) are hidden from the agent and, if the Confidential Overlay setting is enabled, show a tinted overlay to the customer.

• Content inside iframes on the same domain renders. Every iframe must include the CoBrowse script.

Step 4: Navigate across page types, sections, and subdomains

A CoBrowse session must persist as the customer moves through your site. Test navigation the way a real customer would, and aim for a broad sample of pages rather than a fixed path. Pick at least one page from each template your site uses.

1. From the homepage, click links in the main navigation, in page content, and in the footer.

2. Visit each major page type: landing pages, product or article pages, search results, forms, login or account pages, and checkout or transactional pages.

3. Visit each section of the site, for example, the storefront, support portal, blog, and account area.

4. After each page load, confirm that the session is still active and that the new page appears in the agent view.

5. Use the browser's back and forward buttons, and confirm that the agent view follows.

6. Navigate to every subdomain your site uses. If the session drops when the domain changes, enable Multidomain in the console and confirm each domain is listed under your deployment key.

7. On each page, compare the agent view with the customer browser as described in Step 3. Note any page where the two differ.

8. Open a link in a new tab. By default, the session follows the focused tab. If Single Tab CoBrowse is enabled for your organisation, the new tab does not join the session; this is expected.

9. Submit a form that reloads the page and confirm the session continues.

If the session drops on a specific page, the page either lacks the CoBrowse script or is on a domain not associated with your deployment key. If the session continues but a page renders differently for the agent, record the page URL and the elements that differ.

Step 5: Verify headers and footers

Headers and footers are often rendered by shared templates, loaded from a separate domain, or positioned with fixed or sticky CSS. Confirm each of the following on several pages:

• The header renders in the agent view with its logo, navigation links, and any account or cart indicators.

• Sticky or fixed headers stay in place in the agent view as the customer scrolls.

• The footer renders with its links, legal text, and icons.

• Header and footer links open the correct page and keep the session active.

• Any header or footer component loaded from a different domain or subdomain renders. If it does not, that domain must be added to your deployment key and Multidomain must be enabled.

Testing with Tampermonkey

The Tampermonkey browser extension injects the CoBrowse script locally into pages in your own browser. You can use it to test CoBrowse on nearly any website before the script is deployed, or to test pages that are not yet in your deployment. Tampermonkey does not change the live website; only your browser sees the injected script.

Install Tampermonkey

1. Open tampermonkey.net and install the extension for your browser.

2. If your browser prompts that user scripts require developer mode, open the browser's extensions page (chrome://extensions in Chrome) and turn on Developer mode.

3. Confirm the Tampermonkey icon appears in the browser toolbar.

Add the CoBrowse user script

1. Click the Tampermonkey icon and select Dashboard.

2. Click the + tab to create a new script.

3. Delete the template contents in the editor.

4. Paste the production script below.

5. Press Ctrl + S to save.

Production script:

// ==UserScript==
// @name         ScreenmeetCobrowse-Prod
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Enables ScreenMeet Cobrowse in specified websites
// @author       Aaron Elligsen (aaron@screenmeet.com)
// @match        https://www.sitename.com/*
// @grant        none
// ==/UserScript==

(function(injectSrc){
  var preloadLink = document.createElement("link");
  preloadLink.href = injectSrc;
  preloadLink.rel = "preload";
  preloadLink.as = "script";
  document.head.appendChild(preloadLink);
})("https://cobrowse.screenmeet.com/CobrowseCore.js");

(function(injectSrc){
  var scriptelement = document.createElement('script');
  scriptelement.type = 'text/javascript';
  scriptelement.async = true;
  scriptelement.src = injectSrc;
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(scriptelement);
})("https://cobrowse.screenmeet.com/CobrowseBootstrap.js");

window.Cobrowse = window.Cobrowse || {};
window.Cobrowse.modal = window.Cobrowse.modal || { commandQueue: [], useHotkeys: true };

Edit the script for your website

The @match line controls which pages Tampermonkey injects the script into. The placeholder https://www.sitename.com/* must be replaced with your own domain.

1. In the Tampermonkey dashboard, open the ScreenmeetCobrowse-Prod script.

2. Replace the @match value with the protocol and domain of the site to test, ending with /* so every path on that domain matches. For example, to test https://www.example.com, use:

// @match        https://www.example.com/*

3. To test additional sites, add one @match line per domain in the header block. Each line follows the same format.

4. Press Ctrl + S to save.

5. Reload the target website. The Tampermonkey icon shows a count of active scripts on the page when the match succeeds.

Example with multiple domains:

// @match        https://www.example.com/*
// @match        https://shop.example.com/*
// @match        https://support.example.org/*

Open the CoBrowse modal with hotkeys

The script sets useHotkeys: true, so the CoBrowse PIN modal opens with Shift + Space and the session ends with Shift + Escape. Use these hotkeys to join the session on a page without a CoBrowse button.

After the script is injected, follow Step 1 through Step 5 above to run the session and validate rendering and navigation.

Verification

The CoBrowse deployment passes testing when all of the following are true:

• The customer can open the PIN modal and join the session from the homepage and from every page in the deployment.

• You have visited a representative sample of page types, site sections, and subdomains, and the agent view matched the customer browser on each.

• The agent view matches the customer's browser for layout, styles, images, and fonts.

• The session persists across page navigation, browser back and forward, and form submissions.

• Headers and footers render correctly on every page and their links keep the session active.

• Masked elements are hidden from the agent.

• The session ends cleanly when either party ends it, and the agent console shows the session as complete.

If any check fails, note the page URL, the browser and version on both sides, and whether the failure reproduces with Tampermonkey injection, then contact your ScreenMeet representative with those details.