Introduction to Marker.io's Screenshot Widget
Marker.io makes capturing website screenshots easy, reproducing webpage content for reporters without additional installations or setups. While results are typically accurate, some screenshots may miss CSS or style details due to firewalls, basic authentication, or protected static resources.
For precise rendering, our engine requires access to your site's static resources, including images and stylesheets. Here are some tips to ensure accurate screenshots.
Key Tips and Limitations
Summary Table
Feature | Solution | Benefits | Limitations |
Basic Authentication | Provide credentials | Accurate screenshots | Requires setup |
Browser Extension | Install extension | Pixel-perfect, local screenshots | Desktop only |
Native Browser API | Enable API | Reliable captures | Requires coding |
Mobile Emulation | Use BrowserStack/Chrome | Mobile issues | Desktop-only alternatives |
Local Screenshots | Upload manually | Direct uploads | Extra step required |
WebGL/Canvas Support | Enable preserveDrawingBuffer | Compatibility | Requires code change |
Session Replays | Browser Extension/API | Capture events | Local images may not render |
Tips for Best Screenshot Quality
Enable Basic Authentication
If your site uses basic authentication (e.g., .htaccess), provide the credentials to allow our servers access. This ensures the capture of all protected static resources like images and stylesheets. See our guide here: Implement basic auth for server-side rendering
Install browser extension
Encourage your team and clients to install our browser extension for the best screenshot experience. The browser extension's capture engine generates pixel-perfect screenshots directly on the user's device, offering superior quality compared to server-side rendering.
Key benefits:
Pixel-perfect screenshots: Achieve high-quality, precise captures every time.
Local generation: Screenshots are created locally on your device, ensuring the best possible results.
For more information, refer to our Browser Extensions guide.
Native browser API
If the browser extension isn’t suitable, enable native browser screenshot rendering. This method ensures reliable and accurate screenshots.
Implementation:
Use simple code snippets or our Browser SDK
Refer to our 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.
Does Marker.io support WebGL / Canvas / Graphs?
Yes, Marker.io does support WebGL or Canvas. However, to ensure compatibility with your WebGL/Canvas 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 });
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
Youtube videos or any other video sources
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.