Introduction
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. π
Finally, there may be occasions where we will be limited in what we can capture with the widget. In most cases, installing our browser extension will help. We will list the limitations of our renderer below to help you debug any issues you may have.
Take great screenshots with these helpful tips
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 it 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.
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.
If you would like more info, please 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, consider emulating your devices using our BrowserStack integration or simulating mobile devices with Device Mode on Google Chrome.
Upload a local screenshot
Thanks to our new feature of allowing attachments in 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 file to your feedback form, including video files.
You can also attach files directly to any feedback page.
This works well for mobile phones as your screenshots will be saved locally in your photo library, and you can upload them directly.
Check out our helpdesk article on uploading files to Marker.io.
Limitations of our screenshot renderer
We currently have limitations capturing screenshots from websites that include the following:
Iframes from external websites without the iframe snippet
Shadow-dom elements
Canvas
Youtube videos or any other video sources
Content Security Policy - See our CSP guide here
Mapbox & maps in general
WebGL
Is your website or integration behind a VPN or Firewall? Then check out this guide for advice.
Generally, you will require our Browser Extension or Native Browser API to capture screenshots that include the above elements.
Additional help
We're always trying to improve our service-side renderer within 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
We are using Javascript Canvas. When we create a screenshot, the map is a black space.