A premium feature of our recorder is the ability to hide automatically any sensitive data in your app pages during recording.
To achieve this, we blur only the pieces of text that need to be masked, keeping the whole UI of your app. That way you and your customers can make screen recordings safely without losing context.
<aside> 💡 To setup this feature you might need the help of a developer, or have some very basic knowledge of DOM selectors, and ability to insert a snippet into your web app source.
</aside>
From your Birdie settings page > security, activate the Blur sensitive data option. You will see more details appearing, let's review it in the two next steps.
Copy and paste your Birdie blur Javascript code snippet into your webapp at the end of your pages, just before closing the body tag </body>
Your snippet can be found in your Birdie settings page > security > Blur sensitive data once the option is enabled, and it will looks like this example:
<script>(function(){window.addEventListener("load",function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="<https://app.birdie.so/widget/blur/xxxxxxxx>",document.body.appendChild(t)});})();</script>
👉 Tip if your app runs as a SPA (single page app) make sure this snippet will load only once in a main template, and won't be reloaded upon each page change for a seamless experience during the recordings.
Last important step, you must indicate what data should be blurred in your web app. Hold tight, this is easier than it looks 🤓
If you're already familiar with the DOM querySelector() API you will be at home; the main idea is simply to indicate the tag name, class, or id to target the parts of your app that will contain the text to blur. You can even target multiple elements provided that you separate them with a comma.
In most cases you probably don't have to change anything into your app if the sensitive data portions are already identifiable with one or more specific classes into your app: just take a look at it by right-clicking on the element > Inspect and report the corresponding class name or id in your setting target field.
Conventionally, all class names must be prefixed with a dot: .like-this-class , and the ids with a hash: #like-this-id... You can even use tag names that don't need to be prefixed, like this: button
NB: You must write at least one selector to enable the feature.