Acquire
  • Home link-arrow
  • Cobrowse link-arrow
  • How to Mask Data Fields in Cobrowse

How to Mask Data Fields in Cobrowse


During a cobrowse session, your visitor may need to enter sensitive information such as their social security number, credit card details, or answers to security questions. Block these inputs from appearing in Acquire using data masking. No web development experience? No problem! We’ll walk you through the basics.

In this article:

  • Choosing the Right Masking Tool
  • Using Inspect to Select Elements
  • Masking Data Fields

What you’ll need:

  • The latest Chrome browser

Choosing the Right Masking Tool 

Acquire offers two masking options: Input Field Selector and Disabled View

Use Input Field Selector when you want to mask the data, but not the input field itself. 


compare-agent-view-to-user-view-disable-input-fields-1-2397bbaedc8bc5626426c91a.png

Use Disabled View when you want to mask an entire section, such as a payment form.


user-view-vs-agent-view-Disabled-View-is-blurred-317f89e3d3d77949e9438524.png

  

Step 1: How to Select Elements with Inspect

While accessing the relevant webpage from a Google Chrome browser, right-click and choose ‘Inspect’ from the drop-down menu. 


right-click-dropdown-showing-Inspect-highlighted-0ef8bfcacf702e98c55c5b1e.png

The developer tab will then appear. Select the arrow button at the far left of the Navigation bar.

developer-panel-navigation-bar-406e144e8e3f09ce9596e5c2.png

Click on the element on the page you want to mask. 

selecting-the-password-input-field-element-b0865f846b927d66a86610ae.png

The code for that element will highlight in the HTML panel. 

browser-view-of-selecting-an-element-bfa10dcafa8fd1c949663174.png

Copy the content you want masked using either the ID or Class attribute. In the example below, the content in the ID attribute is “pwd”. 


hightlighted-html-code-showing-pwd-b20ff5bbfb32f4aa0a7d531d.png

Step 2: Masking Data Fields

Configure data masking rules by heading to Settings > Installation and Setup > Cobrowse Settings > Advanced Configuration. Then paste content into ‘Disabled Input Field Selector’ or 'Disabled view'.

To hide fields, enter the CSS selector followed by the content found in your website HTML code.
Supported CSS selectors include:

  • # for IDs
  • . for a classes
Disabled-View-with-one-class-element-9258dc04b7fdee28b2414511.png

If you need to mask multiple fields, separate content with a comma. 

Disabled-Input-Field-selector-showing-pwd-fa3e6c213674a6c8e780c8be.png

Press ‘Save Settings’ when you’ve finished entering the fields you want to mask. 

When to Use Hashtags (‘#’) vs. Dots (‘.’)

Use ID attributes (‘#’) when you want to mask a single element, such as an input field.

Use Class attributes (‘.’) when you want to mask a group of elements, such as a form.


selecting-the-entire-class-d3e059b1135d3bcbc28fabd5.png


You may need to select multiple elements until you find a class tag.

class-code-block-highlighted-5ea30f5a363487fb11569b58.png

Now you’re ready to protect your customer’s information! If you’re unsure of which elements to mask, reach out to your web developer or contact us at support@acquire.io.



Related Articles