Masking Sensitive Data in Zipy: A Quick Guide

Overview

When you're recording sessions, protecting user privacy is super important.

Zipy helps with that by automatically hiding private information, such as credit card numbers and passwords, in fields where you type. You don't have to think about it all the time.

And if you’ve got other stuff you want to hide (like specific UI elements), you can add your own custom masking too. That way, no one ends up seeing things they shouldn’t.

Easy to set up, and it keeps your users safe.

Prerequisites

• Make sure that your web and mobile app has Zipy built in.
• Keep your Zipy SDK up to date because newer versions may have better masking features.

Step-by-step Instructions 

Web Application

Zipy takes privacy seriously - so by default, it doesn’t record sensitive stuff like:

• Email addresses
• Passwords
• Usernames
• Credit card numbers
• Anything that counts as personal info

If there’s extra stuff you want to block, you can just use the zipy-block class on those elements. Zipy will skip them in the session replay.

So you stay in control, and your users’ private data stays private. 

<div class="zipy-block">Sample div</div>

• Example Usage:

<div class="zipy-block">
    <label>Card details</label>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Card number">
</div>

Flutter Application

• Worried about showing sensitive input in session recordings? Totally fair.
• Zipy’s Input Masking takes care of it automatically - any text a user types into a form field gets masked in the replay. So you won’t accidentally log passwords, card numbers, or anything private.
• Want to hide something extra?
• Simply wrap the widget with ZipyBlock. For example:

import 'package:zipy_flutter/zipy_flutter.dart';

ZipyBlock(
 child: ElevatedButton(
  onPressed: dioPostFailCall,
  child: Text('Dio POST Fail'),
 ),
),

• Boom! masked. It's super easy, and it keeps you on the good side of privacy and compliance rules.

iOS Application

When Zipy records a session, it automatically masks input fields - so things like passwords, emails, or credit card numbers don’t show up in the recording. Super helpful for keeping user data private and secure.

Want to hide more than just input fields?

You can add a ZipyBlock to any UIView (or subclass). When Zipy takes a screenshot:

• That view shows up as a black box in the replay
• But stays fully visible to the user during real app usage

Nice and clean, no sensitive info leaking into your debugging tools. For reference, see examples below

Basic Usage

import ZipyiOS

// Create a ZipyBlock on any UIView
let sensitiveView = UIView()
_ = ZipyBlock(on: sensitiveView)

Masking UI Elements in Code

// Masking a button
private let maskedButton: UIButton = {
    let button = UIButton(type: .system)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Masked Button", for: .normal)
    _ = ZipyBlock(on: button) // This will mask the button in screenshots
    return button
}()

// Masking a text field
private let sensitiveTextField: UITextField = {
    let textField = UITextField()
    textField.placeholder = "Sensitive Information"
    textField.translatesAutoresizingMaskIntoConstraints = false
    _ = ZipyBlock(on: textField) // This will mask the text field in screenshots
    return textField
}()

Masking Elements in Interface Builder

class CustomView: UIView {
    @IBOutlet weak var sensitiveLabel: UILabel! {
        didSet {
            _ = ZipyBlock(on: sensitiveLabel)
        }
    }
}

Dynamic Masking

class PaymentViewController: UIViewController {
    private let cardNumberField: UITextField = {
        let field = UITextField()
        field.placeholder = "Card Number"
        return field
    }()
    
    private var maskBlock: ZipyBlock?
    
    func toggleMasking(isEnabled: Bool) {
        if isEnabled {
            // Add masking
            maskBlock = ZipyBlock(on: cardNumberField)
        } else {
            // Remove masking
            maskBlock?.removeFromSuperview()
            maskBlock = nil
        }
    }
}

Android Application

• By default, Zipy’s Input Masking hides everything typed into input fields - like passwords, emails, credit card info, etc. That means you get all the debugging goodness, without seeing any sensitive stuff in your session replays.
• Want to hide something else? You can!
• Add this tag to do custom masking in xml files -> android:tag="zipy_block"

<Button
    android:id="@+id/btnGetSessionUrl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Get Session URL"
    android:tag="zipy_block"
    android:layout_marginBottom="8dp" />