Troubleshooting: Screenshots Don't Look Right

Encountering issues with your Userback screenshots? This guide is designed to help you identify the root cause and implement effective solutions.

Userback employs various mechanisms for capturing screenshots, session replays, and videos. When elements like CSS, images, or annotations appear out of place.

It's often due to barriers like firewalls, authentication protocols, or certain resources being off-limits to Userback's Screenshot Engine.

Step 1: Whitelist Userback's IP

To facilitate seamless communication between your website and Userback's Screenshot Engine, it's advisable to whitelist specific IP addresses on your server or firewall.

By doing so, you grant permission for these IPs to access your site's resources, ensuring that screenshots are captured accurately and without interruption.

Here are the IP addresses you'll need to whitelist:

52.22.55.105

52.7.16.85

52.54.137.162

54.163.98.234

107.20.147.66

35.171.36.188

You can usually add these IP addresses to your whitelist through your hosting provider's control panel or directly within your server settings, consult your hosting provider's documentation, or reach out to their support team for guidance.

Step 2: Include Supplementary HTTP Headers

If whitelisting IPs isn't feasible, you can add extra HTTP headers in your Userback project settings. These headers allow Userback's Screenshot Engine to interact with your site, bypassing any restrictions.

Consult your server documentation or IT team if you're unsure which headers to use.

Read more: Project Settings

Step 3: Validate CORS Settings for Images and Fonts

If images or fonts aren't displaying as expected, the issue could be related to CORS (Cross-Origin Resource Sharing) settings or even restrictions from our servers.

CORS settings dictate how resources on your site can be accessed by external domains, and changes in your Content Security Policy (CSP) could limit the loading of fonts or images from external sources, including Userback's Screenshot Engine.

You may need to add specific CORS headers such as:

Access-Control-Allow-Headers: *
Access-Control-Allow-Headers: screenshot.userback.io


Read more: Troubleshoot: CORS Errors When Sending Feedback to Userback

Step 4: Enable Native Screenshot

For capturing more accurate and reliable screenshots, especially in complex or secure settings, you can activate the Native Screenshot feature which uses the browser's internal API to take screenshots.

Note: Activation of this feature will prompt users for an additional confirmation step.

Read more: Native Screenshot

Step 5: Install the Userback Browser Extension

The Userback Browser Extension offers a convenient solution for providing feedback on screenshots that aren't rendering correctly. Instead of dealing with coding or technical complexities, you can simply download and install the extension from our website.

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!