Customization

Smartlook gives you the ability for you to customize what data is recorded and when. Masking elements, ignoring number values, and even disabling recording for specific pages are all options put in the hands of your developers.  


Sensitive data protection

Although Smartlook is GDPR compliant out of the box, when you activate the API and the recording of other values, it's important that you do not record sensitive data. Be sure to mask all forms and inputs which are classified as Sensitive data under the applicable laws of your visitors countries.


We take privacy and security seriously. This API will help you to implement same standards across your website.

Passwords and credit card numbers are NOT recorded by default.

Payment gates

Recordings of credit cards are safe because most payment gates are 3rd party apps where customer gets redirected to another site. These payment gates are usually in an iframe which we block from being recorded as well. If you have a custom built payment gateway, use the following tools to mask or ignore sensitive data:

Masking

There can be situations where you want to disable recordings or maybe ignore certain elements from being recorded.

NAMEDESCRIPTIONdisable Disable recordings. ignore Ignore recordings of given element. 

disable

Following code will disable recording of an entire page.

<script>
  smartlook('disable', true);
</script>

Attribute data-recording-disable disables element containing sensitive information which will not be recorded at all. Element will not be displayed in recordings.

<div data-recording-disable>
  Sensitive information will not be recorded.
  </div>
    Sensitive information will not be recorded.
  </div>
</div>

sensitive

Attribute data-recording-sensitive replaces all characters in element and its’ descendants with a *.

<div data-recording-sensitive>
  This text will be replaced by *.
  </div>
    This text will be replaced by *.
  </div>
</div>

This is how the example html will look like in the recordings.

<div data-recording-sensitive>
  **** **** **** ** ******** ** **
  </div>
    **** **** **** ** ******** ** **
  </div>
</div>

All input elements affected by data-recording-sensitive will have their values and events ignored.

ignore

Attribute data-recording-ignore ignores elements. Element will be displayed in recordings but values will not.

This attribute can have 2 values:

  1. mask - inserted characters will be replaced by asterisk '*'
  2. events - inserted values will not be displayed at all
<input type="text" placeholder="Person age" data-recording-ignore="mask">
<input type="text" placeholder="Card number" data-recording-ignore="events">

You probably noticed the Card number example. We block credit cards in recordings by default but it may happen that your site is using some custom coded payment solution that is not either secure or is coded in such a way that our script does not recognize it. For such rare cases you can make sure by using this attribute and value that your customer card numbers are safe and will not be recorded.

Masking forms

Forms are everywhere these days on websites and most often you will want to mask some of them. To exclude visitor’s sensitive data from recordings, use masking forms and inputs.

Mask all fields

Use this if you need to mask entire form.

<!-- Mask all fields in a form -->
<form data-recording-ignore="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>

Mask selected fields

Maybe you want to mask only some selected fields.

<form>
  <!-- Mask this field -->
  <div data-recording-ignore="mask">
    <label>Card number</label>
    <input type="text" placeholder="Card number">
  </div>
 
  <!-- This field is not masked -->
  <div>
    <label>Expiration Date</label>
    <input type="text" placeholder="MM-YY">
  </div>
</form>
Did this answer your question?