The most common reasons for broken screenshots are:
Firewalls
Using a local host or development environment
CSP or CORS-related issues
Bad HTML or CSS on your site
Whitelist Userback's IP
Allow Userback access to your site's resources by whitelisting the following IP addresses:
52.22.55.10552.7.16.8552.54.137.16254.163.98.234107.20.147.6635.171.36.188
If you don't have access to whitelisting IP addresses, this information can be passed onto your developer or domain administrator.
Include HTTP Headers
Additional HTTP headers can be added in your Userback project settings.
You may need to consult your server documentation or IT team if you're unsure which headers to use.
Read more: Project Settings
Validate CORS Settings for Images and Fonts
If images or fonts aren't displaying correctly, the issue could be related to CORS (Cross-Origin Resource Sharing) settings or even restrictions from our servers.
You may need to add specific CORS headers such as:
Access-Control-Allow-Headers: *Access-Control-Allow-Headers: screenshot.userback.io
Enable Native Screenshot
Native screenshot is recommended for internal environments where Userback is unable to accurately take screenshots. This uses the browser's built-in screenshot functionality and will request permission each time it takes a screenshot.
Read more: Native Screenshot
Install the Userback Browser Extension
The Userback Browser Extension is a fast, no-code way to collect accurate screenshots using the browser's built-in screenshot tools.
Note: Session Replays, Developer Tools, and the JavaScript SDK aren't available with feedback from the Browser Extension.
Read more: Install the Userback Browser Extension
Need More Help?
If you've tried the above steps and still face issues, or if you have more questions, feel free to reach out. We're here to help!