Under 'Website Settings' you have the option of whitelisting input fields. This will mean that keystrokes entered in these fields would be recorded by Mouseflow and visible in playback. This can be useful for certain field types that doesn't contain personal data (PII).
An example of this could be a search field or similar, where the input could be valuable to understand the users' interaction on the website.
To have keystrokes in a field picked up by our recording script, you can use the 'Whitelist fields'-field:
In this field you can add the CSS selector for a page element (HTML) to ensure it will not be tracked. The selector can be the element's ID, class or even CSS path, as shown in the image above.
Examples of CSS selectors
If you're not sure what a CSS path is, we've created an example. Let's say you have a search field on your website, like the one we have in the top right corner.
To record this field, you will want to whitelist it. To find the CSS selectors needed for the "Whitelist fields"-field, you need to inspect the HTML of the field. You can do so by right-clicking the field and choosing 'Inspect''.
This will open your browser's developer console, which allows you to look under the hood of your website. In this case, you should see HTML looking something like this:
<input id="kb-search" class="example-class" name="search" placeholder="Enter a question...">
In this case, you can see a few useful selectors:
- The field has the ID "kb-search". So by entering "#kb-search" in the "Whitelist fields"-field, you'd effectively start recording all input in this field. The starting "#" is always used to signify an ID.
- Alternately, as the field has a class, you could also use that: "example-class". You can add the class to the field using ".example-class". The starting "." is always used to signify a class name.
- In case the field didn't have any IDs or classes, you could use a CSS path instead. You can get this selector by right-clicking the HTML of the field, choosing 'Copy' and then 'Copy Selector'. The CSS path could look something like "body > div > input". You can copy this directly to the "Whitelist fields"-field.
Once you hit save after entering a new selector, the field in question will automatically be recorded in all future recordings.
You should note that:
- Whitelisting a field will mean that Mouseflow will pick up all keystrokes in that field. You need to ensure that you're not whitelisting any fields that could be used to enter Personal Identifiable Information (PII)
- Whitelisting a field will only work for new data, made after you've saved your changes. You cannot whitelist input from existing recordings.
- You can also exclude and whitelist content using the Visual Privacy Tool. You can read more here!