Element Masking

Co-Browsing API 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>
  )
}

SwiftUI

Apply the .upscopeRedacted() modifier to any view containing sensitive data:

import UpscopeIO

struct SensitiveForm: View {
    @State private var ssn = ""
    @State private var password = ""

    var body: some View {
        VStack {
            TextField("SSN", text: $ssn)
                .upscopeRedacted()

            SecureField("Password", text: $password)
                .upscopeRedacted()
        }
    }
}

UIKit

Call .markAsRedacted() on any UIView to hide it during screen sharing:

import UpscopeIO

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

    override func viewDidLoad() {
        super.viewDidLoad()

        ssnField.markAsRedacted()
        creditCardField.markAsRedacted()
    }
}

To remove redaction:

ssnField.unmarkAsRedacted()

To check if a view is redacted:

if ssnField.isRedacted {
    // View is currently marked for redaction
}

Jetpack Compose

Apply the upscopeRedacted() modifier to any composable containing sensitive data:

import io.upscope.sdk.upscopeRedacted

@Composable
fun SensitiveForm() {
    var ssn by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column {
        TextField(
            value = ssn,
            onValueChange = { ssn = it },
            label = { Text("SSN") },
            modifier = Modifier.upscopeRedacted()
        )

        TextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier.upscopeRedacted()
        )
    }
}

View-Based (XML Layouts)

Call markAsRedacted() on any View to hide it during screen sharing:

import io.upscope.sdk.markAsRedacted

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)

        ssnField.markAsRedacted()
        creditCardField.markAsRedacted()
    }
}

Global Redaction Toggle

You can enable or disable redaction globally:

// Enable redaction (default)
UpscopeManager.shared?.redactionEnabled = true

// Disable redaction
UpscopeManager.shared?.redactionEnabled = false

Default Masking (Web Only)

On web, Co-Browsing API 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), redacted views are replaced with black rectangles that hide the content completely.

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