Hiding sensitive information from following-participants

By using Surfly's masking features, you can ensure that confidential information remains private during collaborative sessions. Surfly provides two masking features, Field Masking and Element Masking:

Field Masking allows you to conceal specific form fields from following-participants, preventing them from viewing the tab-owner's input. Credit card and password fields are automatically masked by default. You can add the surfly_private attribute to other fields containing sensitive information, but this will require making simple code changes to your website/application.

<span>Email address</span>
<input type="text" size="20" surfly_private>

Element Masking allows you to hide entire HTML elements from followers by including their CSS selectors in the hide_element_by_selector option. It does not require any alterations to the web-application's code, and as such, it can be employed on third-party websites as well. You can set it up through the Surfly dashboard or the Javascript API.

How to find CSS selector in Chrome browser

You can follow below steps to find CSS selector of an element you want to configure Element masking:

  1. Hover the cursor over the image and right click mouse.

  2. Select Inspect.

  3. See the highlighted image code.

  4. Right click on the highlighted code.

  5. Select Copy > Copy selector.

An example showing how to find the CSS selector for an element on google.com

The surfly-masked CSS class can be used to customize masking, but this will require making simple code changes to your website/application.

For an example implementation of both the default and customized Element Masking, visit our demo page.