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.
Alternative Solution: 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>

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 markerConfig and 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:
  1. Install and activate the Insert Headers and Footers plugin.
  2. Go to Settings > Insert Headers and Footers.
  3. Paste the code into the Scripts in Footer section.
  4. Save the changes.
- Option 2: Manual Theme Insertion:
  1. Navigate to Appearance > Theme File Editor.
  2. Select footer.php.
  3. Paste the code before the closing </body> tag.
  4. Save the file.

Need Help?

If you have any questions, comments, or corrections, chat with us at the bottom right of our web pages.

Widget JavaScript SDK

Widget Screenshot Tips & Limitations

Why Isn’t the Widget Showing?

How to Remove the Screenshot Booster Link