While Marker.io handles most cases well, some situations may need extra steps to ensure the best results. Here’s a straightforward guide to help you get the most out of Marker.io screenshots.
Tips for better screenshots Quality
Enable Basic Authentication (if applicable!)
If your site is password-protected (e.g., via
.htaccess), make sure to provide credentials in the widget settings.Why? This allows Marker.io to access images and styles required for accurate rendering.
Learn more here
Install the Browser Extension
Why use the browser extension?
High Quality: Generates precise, pixel-perfect screenshots directly on your device.
Local Generation: Screenshots are created on your machine, avoiding server-side rendering issues.
Recommended for desktop use.
See further details here.
Use the Native browser API
If the browser extension isn’t an option, enable native browser rendering.
How to use it:
Add simple code snippets to your site or use the Browser SDK.
Check out the detailed guide: Native Browser Screenshot Rendering
Emulate mobile mode on BrowserStack or Google Chrome.
The options above are only suitable for desktop devices. If you wish to report issues 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 form and our issue 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 form, including video files.
You can also attach files directly to any issue 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.
Add support for WebGL / Canvas / Graphs?
Marker.io now supports WebGL and Canvas. To enable this, when creating your canvas context, enable the preserveDrawingBuffer option as shown below:
gl = canvas.getContext("experimental-webgl", { preserveDrawingBuffer: true });
Screenshot Limitations
We currently have limitations capturing screenshots from websites that include the following:
Iframes from external websites without the iframe snippet
Shadow DOM elements
Canvas
Videos (e.g., YouTube).
Content Security Policy - See our CSP guide here
Mapbox & maps in general
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.
Localhost environment
Having trouble with screenshots and session replays on localhost?
Quick Tips:
Screenshots: Use the Marker.io Browser Extension or Native Browser API.
Session Replays: User events will be captured, but local images may not render.
For detailed steps and solutions, check out our localhost guide.
Additional help
We continually strive to improve our server-side renderer. If you encounter issues, contact our support team via chat with the URL of the page you're trying to capture, and we'll investigate further.