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.
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:
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: