Element Masking

UserView allows you to mask certain elements from the Agent. When you do this, not only will the content of the masked elements be hidden from the Agent, but it will also not go through our servers.

The easiest way to mask an element is to add its CSS selector to the dashboard Settings » Co-browsing.

For example, if you want to hide an element with the id secret-code, you'd add #secret-code to the settings.

You can also mask elements by adding the no-upscope CSS class to them.

You can use the Masked and NoRemoteControl components from our React SDK to mask parts of the page.

import { Masked } from "@upscopeio/react";

function YourComponent() {
  return (
    <div>
      <label>Your SSN</label>
      <Masked>
        <input type="text" />
      </Masked>
    </div>
  )
}

UIKit

Call addMaskedView(_:) on the Upscope singleton to hide a view during screen sharing:

import UpscopeIO

class SensitiveViewController: UIViewController {
    @IBOutlet weak var ssnField: UITextField!
    @IBOutlet weak var creditCardField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        Upscope.shared.addMaskedView(ssnField)
        Upscope.shared.addMaskedView(creditCardField)
    }
}

To remove masking:

Upscope.shared.removeMaskedView(ssnField)

Automatic Secure Field Masking

The SDK automatically masks secure text fields (like password fields) by default. To disable this:

Upscope.shared.maskSecureTextFields = false

View-Based (XML Layouts)

Call addMaskedView() on the Upscope object to hide a view during screen sharing:

import io.upscope.sdk.Upscope

class SensitiveActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_sensitive)

        val ssnField = findViewById<EditText>(R.id.ssn_field)
        val creditCardField = findViewById<EditText>(R.id.credit_card_field)

        Upscope.addMaskedView(ssnField)
        Upscope.addMaskedView(creditCardField)
    }
}

To remove masking:

Upscope.removeMaskedView(ssnField)

Automatic Secure Input Masking

The SDK automatically masks secure input fields (like password fields) by default. To disable this:

Upscope.maskSecureInputs = false

Default Masking (Web Only)

On web, UserView will automatically mask password fields and fields that contain what looks like credit card numbers. On iOS and Android, you need to explicitly mark sensitive fields for redaction.

Masking Inputs or Elements

On web, you can mask either form inputs or whole HTML elements. When you mask an input, the Agent will see the value of it transformed into asterisks. This way, they can see if the Visitor is typing, but not what they are typing.

When you mask any other element, nothing contained in it will show up on the Agent side. The element will be turned into a gray box.

On mobile (iOS/Android), masked views are replaced with black rectangles that hide the content completely. Secure text fields (password fields) are masked automatically by default.

Inline Elements (Web)

On web, you can only mask elements that have the display CSS property set to block. This is because inline elements don't have a fixed size and could span multiple lines.

Agent Control

The Agent will be unable to control anything that is masked. This means they can't type for a Visitor on a masked field or click on a masked button.

You can further restrict which fields are not masked but the Agent should not be able to control in your Settings » Teams » Co-browsing.

Documentation