You can now enable native browser screenshot rendering with a simple switch in your project settings. This feature helps you capture accurate screenshots of your website, especially when security settings or network restrictions might interfere.
This guide covers the new, easy app setting first. You can still use the traditional code-based methods below, which will take precedence over the app setting.
Enabling in your project settings
The easiest way to turn this on is directly in your Marker.io project settings.
Navigate to Project settings > Widget > Screen capture.
Go to the Native Screenshot API section.
Switch on Use Native Screenshot API.
This will use the browser's native screenshot API when available instead of server-side rendering.
Known limitations
Before you start, keep these limitations in mind:
Not supported on mobile devices: Mobile browsers will default to our standard server-side rendering.
Screen selection required: You'll need to manually choose the screen or browser tab you want to capture each time.
Enabling with code (Advanced)
This method is for users who prefer to control settings via code.
Note: The useNativeScreenshot field in your code will always take precedence over the setting in your project settings.
Option 1: Using the website snippet
Add the useNativeScreenshot: true line to your snippet code.
<script>
window.markerConfig = {
project: 'PROJECT_ID',
source: 'snippet',
// Enables native browser screenshot rendering
useNativeScreenshot: true,
};
</script>
<script async src="https://edge.marker.io/latest/shim.js"></script>
Replace 'PROJECT_ID' with your actual project ID.
Option 2: Using the Browser SDK
If you're using our Browser SDK, add the useNativeScreenshot: true option when you load the widget.
const widget = await markerSDK.loadWidget({
project: 'PROJECT_ID',
// Enables native browser screenshot rendering
useNativeScreenshot: true,
});Remember to replace 'PROJECT_ID' with your actual project ID.