When a reporter captures a screenshot via our widget, our servers will read the content of your page and render it back to the reporter. This is the most user-friendly solution - nothing to install or set up. In most cases, the result will be perfect.
There may be instances when screenshots are not correctly rendered or lack CSS/style information. This may be because your site is behind a firewall or requires basic authentication. It can also be that your static resources are protected.
Our rendering engine needs access to your site's static resources (images + stylesheets) to render your screens accurately. We list some helpful tips below. 👇
Enable basic auth
If your website requires basic authentication (e.g. using
.htaccess), our servers may be unable to access your site URL, including static resources such as images and stylesheets.
By providing credentials to our servers, we can access protected assets without requiring additional work for your reporters. If that matches your setup, read the following guide:
Install browser extension
While requires an extra step, this is probably the best workaround for your team.
Reporters will only need to install our browser extension once, then they can forget about it.
Once installed, our widget will always use the browser extension capture engine to generate pixel-perfect screenshots. Since screenshots will be generated locally, this will give the best results compared to server-side rendering.
If you can get your clients and team to install the extension, this will give you the best results.
Check out our Browser Extensions guide for more details.
Native browser API
Like the browser extension, the screenshot will be captured locally using the Native browser API. This means that it won't go through our servers, and the results will almost always be perfect.
This could be useful to capture on-page elements like Videos & <canvas> containing cross-domain content that cannot be rendered.
Here are the downsides to using this method:
Not supported on mobile: we fall back to the regular server-side rendering in that case.
It requires an extra step for the reporter to choose what screen/window they want to capture.
Screenshots are not retina-ready on Chrome & Edge Chromium: screenshots aren't pixel perfect on retina screens, but on Safari & Firefox, they're perfect.
For more info, read the following guide.
Emulate mobile mode on BrowserStack or Google Chrome.
The options above are only suitable for desktop devices. If you wish to report feedback on mobile devices and are having issues with the screenshot, you could consider emulating your devices by using our BrowserStack integration or by simulating mobile devices with Device Mode on Google Chrome.
Upload a local screenshot
Thanks to our new feature of allowing attachments in both our feedback form and our feedback page, you can now take your own local screenshot and upload it directly.
The below image highlights where you can attach any type of file to your feedback form including video files.
You can also attach files directly to any feedback page
This works really well for mobile phones as your screenshots will be saved locally in your photo library and you can upload them directly from there.
Check out our helpdesk article on uploading files to Marker.io.
None of these options work for you.
We're always trying to improve our service-side renderer within the technical constraints. Feel free to use the chat to send us the URL of the page you're trying to capture, and our team will investigate if we can improve it.
To get to this page, people search:
My screenshot does not work
The Screenshot is taken from a different part of the page
When we try to take screenshots, it automatically jumps to the top of the page