Real screenshots make a product tour look real. They can also show the names, emails and invoices of your real customers. This guide shows three ways to hide them, from the safest to the quickest.
Why it matters
Everything in a screenshot on your site is public. A customer who sees their own name in your demo loses trust in you. Search engines can also read text in images.
1. Start with made-up data
This is the safest way. Make a demo account in your app and fill it with made-up clients, such as Harbor & Pine or Kestrel Labs. Then take your screenshots. Nothing private is in the file, so there is nothing to hide.
2. Blur on the setup page
If you must use real screens, blur the details. On the Autodemo setup page:
- Select the step with the private detail.
- Choose Blur.
- Drag a box over the name, email or number. Drag more boxes for more details.
- To remove a box, select it and press Delete.
The blur belongs to the screenshot. Every step that shows the same screenshot hides the same details.
3. Blur by hand in Framer
Each step in Framer has a Blur field. Type four numbers, in percent of the screenshot: the distance from the left, the distance from the top, the width and the height. Put a semicolon between areas.
For example, 62, 18, 20, 6; 62, 30, 20, 6 blurs two areas on the right side of the screen.
What blur does not hide
Questions
Does the setup page upload my screenshots?+
No. The setup page runs in your browser and never uploads your screenshots.
Can I blur on only one step?+
The blur belongs to the screenshot, so every step that shows it is blurred. To blur on one step only, use a second copy of the screenshot for that step.
Autodemo
Screenshots of your app become a product demo that plays by itself. Paid once, yours to keep.
