All Collections
Widget
Screenshot
Widget Screenshot Tips & Limitations
Widget Screenshot Tips & Limitations

Some tips on how to get the best screenshot quality

Joe Scanlon avatar
Written by Joe Scanlon
Updated over a week ago

Introduction to Marker.io's Screenshot Widget

Marker.io's widget is designed to offer users an effortless experience in capturing website feedback through screenshots. Our advanced system interprets the content of your webpage and reproduces it for the reporter, eliminating the need for additional installations or setups. While the results are impeccable in most cases, there can be instances where the screenshots might not render perfectly or might omit certain CSS/style details.

Once a screenshot is taken, our servers interpret the content of your page and reproduce it for the reporter. In the majority of cases, the outcomes are flawless. However, there may be scenarios where screenshots are not accurately rendered or missing out on certain CSS/style information. For example, your website may be behind a firewall, it may require basic authentication, or your static resources could be protected.

For precise rendering of your screens, our rendering engine requires access to your site's static resources, including images and stylesheets. For your convenience, we've provided a list of useful tips below.


Take great screenshots with these helpful tips

Enable basic auth

If your website is protected with basic authentication (like .htaccess), our servers might not access your site's resources. By providing the necessary credentials, our servers can access these protected assets, ensuring accurate screenshots.


Install browser extension

Encourage your team and clients to install our browser extension. Once installed, the widget will utilize the browser extension's capture engine, producing pixel-perfect screenshots. This local generation of screenshots often yields superior results compared to server-side rendering.

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.

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 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:

  1. Not supported on mobile: we fall back to the regular server-side rendering.

  2. It requires an extra step for the reporter to choose what screen/window they want to capture.

  3. 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 have 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.


Does Marker.io support WebGL?

Yes, Marker.io does support WebGL. However, to ensure compatibility with your WebGL application, we require a slight modification on your end. When creating your canvas context, please enable the preserveDrawingBuffer option as shown below:

gl = canvas.getContext("experimental-webgl", { preserveDrawingBuffer: true });


Limitations of our screenshot renderer

We currently have limitations capturing screenshots from websites that include the following:

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.

Did this answer your question?