Are you unable to capture accurate screenshots of your website due to security settings or network restrictions? This guide will walk you through enabling native browser screenshot rendering with Marker.io, ensuring your screenshots are always accurate and reliable. This option is especially useful for users who cannot or prefer not to use the Marker.io browser extension, which also solves this issue.
What is Native Browser Screenshot Rendering?
Native browser screenshot rendering uses the browser's built-in media-record API to capture screenshots directly. This method is effective for various web content and resolves issues caused by restrictive network settings that can distort or block screenshots.
Why Choose This Method?
Easy Setup: It requires adding just one line of code to your snippet.
Low Effort: Ideal for users who can’t or won’t use the Marker.io browser extension.
Known Limitations
Before enabling native browser screenshot rendering, keep these limitations in mind:
Not Supported on Mobile Devices: Mobile browsers will default to server-side rendering.
Screen Selection Required: Users need to manually choose the screen or window they want to capture.
How to Enable Native Browser Screenshot Rendering
You can enable this feature through one of the following methods: adding a snippet to your website, using the Marker.io Browser SDK, or configuring it via the WordPress plugin.
Method 1: Using Snippet Code
Insert the following snippet into your website’s HTML:
<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.
Method 2: Using Browser SDK
If you're using Marker.io’s Browser SDK, use the following code:
const widget = await markerSDK.loadWidget({
project: 'PROJECT_ID',
// Enables native browser screenshot rendering
useNativeScreenshot: true,
});Replace 'PROJECT_ID' with your actual project ID.
Method 3: Using The WordPress Plugin
Ensure Marker.io WordPress Plugin is installed: If you haven't installed the Marker.io WordPress plugin, follow the installation instructions to get set up.
Add the Custom JavaScript to Enable Native Screenshot Rendering: Insert the following code into your website to modify the default plugin behavior:
<script>
window.markerConfig = {
...window.markerConfig,
useNativeScreenshot: true
};
</script>This code extends the existing
markerConfigand activates native screenshot rendering without the need to modify the project ID manually.Where to Add the Code:
Option 1 : Use a "Insert Headers and Footers" Plugin:
Install and activate the Insert Headers and Footers plugin.
Go to Settings > Insert Headers and Footers.
Paste the code into the Scripts in Footer section.
Save the changes.
Option 2: Manual Theme Insertion:
Navigate to Appearance > Theme File Editor.
Select footer.php.
Paste the code before the closing
</body>tag.Save the file.
Need Help?
If you have any questions, comments, or corrections, chat with us at the bottom right of our web pages.