Prevent recording of sensitive data, hide elements, mask forms and inputs

We at UXtweak have great respect for user data privacy and security. UXtweak's data protection API places into your hands the power to determine exactly which data can (and cannot) get recorded. By using the API, Website Testing's and Session Recording's data collection can meet even the strictest criteria for data collection that protects user privacy and ensures the safety of all sensitive data.

Passwords and credit card details are never recorded.

Payment gates

You don't have to worry about credit cards being recorded during payments in 3rd party payment gates. Payment gates - which usually appear in iframes - are always blocked from recording.

Content suppression

While you can restrict the recording of certain pages and UI elements in you study setup, you can also do it directly on your website by using our API.

disable

Add this code to a page of your website that you wish not to be recorded at all (e.g. if the page deals with sensitive information).

JavaScript

<script>
	uxtr('shutdown', true);
</script><script>
	uxtr('shutdown', true);
</script>

Add data-uxtr="disable" as an attribute to an element that you wish not to be recorded (e.g. a form that asks the user for personal data). This element will appear as a grey box within the recording.

HTML

<div data-uxtr="disable">
	This element will not be recorded.
	It will appear in recordings as a grey box.
</div><div data-uxtr="disable">
	This element will not be recorded.
	It will appear in recordings as a grey box.
</div>

sensitive

There are two other alternatives for using the data-uxtr attribute on elements to mask the values inside them. These options are as follows:

mask - swap all text inside the element and its children for asterisks ('*')
ignore - completely ignore all events inside input fields (so unlike the mask option, you don't even see whether a field is being filled or not)

HTML

<div data-uxtr="mask">
	This text won't be readable in the recording, being replaced by *.
	<div>
		Child element's text is also replaced with *.
	</div>
</div><div data-uxtr="mask">
	This text won't be readable in the recording, being replaced by *.
	<div>
		Child element's text is also replaced with *.
	</div>
</div>

In the recording, the HTML element above will look like this:

HTML

<div data-uxtr="mask">
	**** **** ***** ** ******* ** *** ********** ***** ******* ** **
	<div>
		***** ********* **** ** **** ******** **** **
	</div>
</div><div data-uxtr="mask">
	**** **** ***** ** ******* ** *** ********** ***** ******* ** **
	<div>
		***** ********* **** ** **** ******** **** **
	</div>
</div>

Most websites contain forms and yours is likely no exception. Consider which of them might warrant masking to hide sensitive contents.

Use masking on input fields and forms to prevent recording of sensitive data inside them.

HTML

<input type="text" placeholder="Gender" data-uxtr="mask"><input type="text" placeholder="Gender" data-uxtr="mask">

HTML

<input type="text" placeholder="Internet banking ID" data-uxtr="ignore"><input type="text" placeholder="Internet banking ID" data-uxtr="ignore">

In most cases, Website Testing's and Session Recording's data collector leaves credit cards out of recordings automatically. However, if your website payments involves some kind of non-standard custom-made payment component, it's possible that our collector won't recognize it. If this is true, please use the data-uxtr-sensitive attribute to ensure credit card information isn't recorded.

You can also mask an entire form by using the data-uxtr="mask" on the form parent like this:

HTML

<form data-uxtr="mask">
	<div>
		<label>Card number</label>
		<input type="text" placeholder="Card number">
	</div>
	<div>
		<label>Expiration date</label>
		<input type="text" placeholder="MM-YY">
	</div>
</form><form data-uxtr="mask">
	<div>
		<label>Card number</label>
		<input type="text" placeholder="Card number">
	</div>
	<div>
		<label>Expiration date</label>
		<input type="text" placeholder="MM-YY">
	</div>
</form>