In this article, we'll be explaining how you can find the CSS class or ID of an element, which you can use for masking/hiding sensitive data in the screenshots that you collect with your Usabilla Feedback Button. Classes or IDs are HTML-elements that define a specific element on the website.
Inspecting HTML elements
Navigate to the page on which you would like to hide certain elements. In this case, we went to the Usabilla Support Center homepage using Google Chrome. You can also use another browser, but I find Chrome the easiest browser to use in this case.
Often elements are nested inside other elements. In this case, the DIV with id "home-block_howto" contains multiple nested elements. Everything nested within the element that you're going to mask will be masked as well.
Adding your Class/ID
Now, to mask the element you can navigate to the button setup page in Usabilla. Find the button installed on the page on which you want to mask elements and click ‘options’ > ‘edit button’. Scroll all the way to the bottom and click “Advanced settings”.
Enter the Class or ID you found into one of these boxes. Depending on how you want to mask the element you enter your Class or ID into one of the three boxes. They each do the following:
- Elements: replace the entire element with one black box.
- Text: shows the element, but makes all text in this element unreadable.
- Attributes: removes identifiable attributes from the HTML of the screenshot. This will not affect the looks of the screenshots.
I want to render the text in an unreadable font, so enter our ID in the top box. Before the ID, I enter a hashtag, '#', stop to indicate that the element is an ID. If you are using a class instead you can use a full stop, ‘.’, instead of the hashtag.
