How to mask HTML elements from co-browsing

This article shows "How to mask HTML elements from co-browsing". An example repository is available on Bitbucket.

As a developer, if you don't want the consumer side to display an area of page to the Agent, due to some privacy reason or legal compliancy, during a co-browse session or you want to limit the areas of the page offered on screen share, add a CSS class assist-no-show to those HTML elements.

Here is an example HTML element with assist-no-show applied, just for reference:

<p class="assist-no-show">This element contains sensitive information. During co-browsing agent is not able to see the text.</p>

The masked element will render as black box, that consumes the same space in the DOM as the original element. Even the colour of box rendered at agent end can be changed by defining the CSS rule in stylesheet.
The colour attribute only affects the rendering of the boxes on the agent console, doesn't affect at consumer's page.

.assist-no-show-agent-console{
    color: orange;
}

Elements which have an assist-no-show class, will render in orange box on the agent console only.
If you want to hide the HTML element with class assist-no-show on agent side, use the following CSS code:-

.assist-no-show-agent-console{
    color: transparent;
}
Note: when you are defining the assist-no-show-agent-console with colour: transparent in stylesheet, the marked html element will be hidden on agent side but consume the same space as the original element.