Skip to main content
HumanBehavior SDK provides comprehensive data redaction with two flexible modes to protect sensitive information while maintaining analytics value.

Redaction Modes

Privacy-First Mode (Default)

Everything is masked by default. Selectively unredact fields you want to track.
// All inputs masked by default, unredact specific fields
const tracker = HumanBehaviorTracker.init(API_KEY, {
  redactionStrategy: { 
    mode: 'privacy-first' as const as const, 
    unredactFields: ['#public-comment', '#feedback-input'] 
  }
});

Visibility-First Mode

Everything is visible by default. Selectively redact sensitive fields using data-hb-redact="true".
// All inputs visible by default, redact fields marked with data-hb-redact="true"
const tracker = HumanBehaviorTracker.init(API_KEY, {
  redactionStrategy: { 
    mode: 'visibility-first' as const
  }
});

Field Selection Methods

1. Markup-Driven Selection (Primary Method)

Add data-hb-redact="true" to any input element you want to redact:
<!-- These fields will be redacted in visibility-first mode -->
<input id="username" data-hb-redact="true">
<input id="ssn" data-hb-redact="true">
<textarea class="sensitive-input" data-hb-redact="true"></textarea>

2. Programmatic Selection (Privacy-First Only)

For privacy-first mode, configure unredacted fields at initialization:
// Privacy-first: unredact specific fields
redactionStrategy: { 
  mode: 'privacy-first' as const, 
  unredactFields: ['#public-comment', '.feedback-input', 'input[name="topic"]'] 
}

3. Runtime Control

Change redaction settings after initialization:
// Add more fields to unredact (privacy-first)
tracker.setUnredactedFields(['#new-public-field']);

// Clear all unredacted fields (everything becomes redacted)
tracker.clearUnredactedFields();

Framework Integration

React/Next.js

import { HumanBehaviorProvider } from 'humanbehavior-js/react';

function App() {
  return (
    <HumanBehaviorProvider
      apiKey={process.env.NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY}
      options={{
        redactionStrategy: { 
          mode: 'visibility-first' as const
        }
      }}
    >
      <YourApp />
    </HumanBehaviorProvider>
  );
}

Vue

import { HumanBehaviorTracker } from 'humanbehavior-js';

const tracker = HumanBehaviorTracker.init(API_KEY, {
  redactionStrategy: { 
    mode: 'privacy-first' as const, 
    unredactFields: ['#public-comment'] 
  }
});

Angular

import { HumanBehaviorService } from '@humanbehavior/angular';

constructor(private humanBehavior: HumanBehaviorService) {
  this.humanBehavior.init(API_KEY, {
    redactionStrategy: { 
      mode: 'visibility-first' as const
    }
  });
}

Vanilla JavaScript

const tracker = HumanBehaviorTracker.init(API_KEY, {
  redactionStrategy: { 
    mode: 'visibility-first' as const
  }
});

Advanced Features

1:1 Character Masking

Input values are masked with asterisks matching the character count:
  • Typing “hello” shows ”*****” in recordings
  • Typing “test” shows ”****” in recordings

All Input Types Supported

Redaction works with all common input types:
  • text, email, password, number, tel, url, search
  • textarea, date, time, datetime-local, month, week

Always Protected

  • Password fields: Always masked regardless of mode
  • Security: Passwords cannot be unredacted

Common Use Cases

E-commerce Checkout

<!-- Mark sensitive payment fields for redaction -->
<input id="credit-card" data-hb-redact="true">
<input id="cvv" data-hb-redact="true">
<input id="ssn" data-hb-redact="true">
// Use visibility-first mode
redactionStrategy: { mode: 'visibility-first' as const }

User Feedback Forms

// Show public feedback, hide personal info
redactionStrategy: { 
  mode: 'privacy-first' as const, 
  unredactFields: ['#feedback-text', '#rating'] 
}

Simple Markup-Driven Approach

<!-- Just add data-hb-redact="true" to sensitive fields -->
<input id="username" data-hb-redact="true">
<input id="ssn" data-hb-redact="true">
<input id="credit-card" data-hb-redact="true">

API Reference

MethodDescription
setUnredactedFields(fields)Add fields to unredact (privacy-first)
clearUnredactedFields()Redact all fields
hasUnredactedFields()Check if any fields are unredacted
getUnredactedFields()Get currently unredacted fields

Privacy & Compliance

  • Flexible Control: Choose between privacy-first or visibility-first based on your needs
  • Automatic Protection: Password fields are always protected
  • Real-time Masking: Data is masked as users type
  • Compliance Ready: Supports GDPR, HIPAA, and other privacy regulations
  • Framework Agnostic: Works consistently across all supported frameworks
Choose the mode that best fits your use case. Privacy-first is recommended for applications handling sensitive data, while visibility-first with data-hb-redact="true" is better for public-facing applications where you want to track most interactions and only redact specific sensitive fields.