In this article, we will walk through all the steps you need to take to be able to hide certain personal information from our servers and user screenshots, such as identities or bank details.
In this guide we will cover the following topics:
- Getting to the settings panel for privacy
- General Privacy Settings
- Advanced Privacy Settings
1. Getting to the settings panel for privacy
You will have to define your privacy settings under the settings of your button. To get there click on Websites, then Setup. If you are already logged in you can go directly to the page by clicking here.
You will now get a list of all your feedback buttons. Find the button you want to make changes to. Select Options, then Edit button:
You will now be taken to the button’s setup page. Go to the bottom of the page and then click Advanced Privacy Settings. Some more settings will then fade in; General Privacy Settings and Advanced Privacy Settings.
2. General Privacy Settings
The first setting you might want to consider for privacy-sensitive information will be Save form values. If you don’t want to store information that’s usually entered in forms, like names, addresses, emails, phone numbers etc. then make sure this one remains deselected.
If you don’t want to store a user’s IP address, then also let this field remain deselected.
Tip: “Store user’s location stores the city the user is from”
3. Advanced Privacy Settings
Here you can obscure data from the screenshot that is taken for each of your feedback items. E.g. some content inside an HTML element like a picture or other privacy-sensitive information.
3.1 Different masking features
I will explain the difference between Elements, Text, and Attributes quickly before we go any further:
Elements: The entire element you define will be masked with a black box. See example below.
Text: Shows the element but makes all text in this element unreadable. See example below.
Attributes: Any element matching the selector and its children will have certain attributes removed. The attributes removed are: 'title', 'href', 'src', 'rel' and any attributes with 'data' or 'on'. This will not affect the looks of the screenshots.
3.2 How to use Advanced Privacy Settings
There are several ways you can use the masking features; elements, text, and attributes. Some basic HTML and CSS knowledge is needed. If you don’t know how to find a CSS class or ID you can read our support article:
3.2.1 Define masking for each individual element by using ID or Selector
If you only have 1 element or want to define several individual elements we can define them by the usage of element ID or by the usage of element selector.
If you define them by the usage of element ID then a hashtag is needed in front of the ID name to indicate that the element is an ID, as shown in the picture:
If the specific element you want to mask doesn’t have a specified ID, we can still mask it by inserting the selector for the element instead. To copy the selector of an element, follow these steps:
- Right-click on the element you want to mask on your webpage and click Inspect:
- Right click again over the element in the inspect tab of your browser. Go to Copy, then Copy selector
Now we can insert the selector into the Advanced Privacy Settings in your Usabilla account by simply pasting the selector into the desired field:
Tip: “Don’t add any hashtag or other symbols to the copied selector after it’s inserted into any of the fields”
3.2.2 Define masking for several elements by using a class
If you have several elements that are under the same class name, we can define them all by using the class name of the elements.
To indicate that we are working with a class, we need to put a full stop in front of the class name:
Once you have defined the elements you want to mask on your website, click the green Save button at the bottom of the page.
Last but not least: Don't forget to test your new privacy settings to be sure they work properly.
If you still need some help setting up masking in your Usabilla account, you can contact our support team who will be able to help you.