Finding the CSS class or ID. Classes or IDs are HTML-elements that define a specific element on the website.
1. Navigate to the page on which you would like hide certain elements. In this case I went to my Usabilla account page in Chrome. You can also use another browser, but I find Chrome the easiest browser to use in this case.
2. Now right-click the element you want to mask (my email address in this case) and select “Inspect” or “Inspect Element”.
3. Now the Chrome development tools element will pop up at the bottom or right side of the screen, with the selected element highlighted. As you can see the email address class is 'email-pre-edit’, which is the class I will need to insert in Usabilla.
Often elements are nested inside other elements. In this case the 'email-pre-edit’ class is nested in a <div> with class ‘m’. I could also use this class if I would like to hide this entire block:
4. 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”.
5. 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: replaces the entire element by 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 my class in the middle box. Before the class I enter a full stop to indicate that the element is a class. If you are using an ID instead you can use ‘#’ instead of the full stop.
6. Save the button and take a test screenshot. The element will now appear masked:
If you need any help with hiding privacy sensitive information from Usabilla, contact our support team.