Sometimes Userback screenshots may not look quite right, and may be missing elements such as CSS styling and images, and cause annotations to appear in the wrong spot.
This is usually due to firewalls or basic authentication are in place, working from a local environment or if certain resources are protected from the Userback Screenshot Engine.
But don't worry, there are a few things you can try to fix it:
If you're still having trouble, let us know what you've tried and reach out to the Userback Support Team. We're happy to help!
Method 1: Whitelist Userback IP's
To ensure that Userback's rendering engine has access to your site's static resources, it may be necessary to whitelist the IPs used by the Userback screenshot engine. This can be done by adding the following IPs to your 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
It's also recommended to whitelist the Userback domain, such as *.userback.io .
Method 2: Add extra HTTP headers
If whitelisting IPs is not a viable option, it is possible to add extra HTTP headers to requests made from Userback's screenshot servers. By doing so, you can identify these requests and allow them to pass through.
Method 3: Checking the CORS Header for Images and Web Fonts
Even with the whitelisting of Userback's domains and IP addresses, images or web fonts may not load due to an improper CORS header. To test this, you can use a tool such as https://extendsclass.com/web-service-tester.html to validate the CORS header on your images.
If the response fails, you will need to add an appropriate CORS header.
Access-Control-Allow-Headers: *
or
Access-Control-Allow-Headers: screenshot.userback.io
Instructions for adding a CORS header on various hosting providers, such as AWS S3, Cloudflare, Microsoft Azure, Google Cloud, Apache and Nginx can be found online.
If your hosting provider is not listed, you may need to contact them for assistance.
Method 4: Native Screenshot
You can also activate the native screenshot feature that uses the browser's built-in Screen Capture API. Note that this feature is only available to users on the Company or Premium plan. Upgrade or contact us for more information.
When the option is enabled, your users will be prompted for choosing a screen, a browser window or a window tab. To enable Native Screenshots, simply add one of the following code snippets based on the JavaScript API.
Userback.native_screenshot = true;
or
// using .init()
Userback.init('[your widget token]', {
native_screenshot: true
});
Mobile devices are not supported for native screenshot, instead server-side rendering is used as a fall-back.
An additional step is required for the reporter to select the desired screen or window to capture.
Method 5: Using the Browser Extension
If you are still unable to render screens correctly, we suggest using our browser extension as an easy no-code way to quickly provide feedback on any website or web application.
Simply download and install the extension and you’re ready to start submitting feedback.
🔐 Who is this article for?
Plans | Solo | Startup ✔ | Company ✔ | Premium ✔ |
User type | Client | Collaborator | Admin ✔ | Owner ✔ |
📙 Helpful articles