Are you having trouble capturing accurate screenshots of your website due to security settings or network restrictions? This guide will help you enable native browser screenshot rendering with Marker.io, ensuring your screenshots are always accurate and reliable.

What is Native Browser Screenshot Rendering?

Native browser screenshot rendering allows your browser to use its built-in media-record API to capture screenshots directly. This method works well with different types of web content and overcomes issues related to network settings that may otherwise block or distort screenshots.

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.
Retina Display Issues in Chrome & Edge: On Retina displays, screenshots in Chrome and Edge may not appear pixel-perfect. However, Safari and Firefox provide optimal results.

How to Enable Native Browser Screenshot Rendering

You can enable native screenshot rendering in Marker.io using one of two methods: inserting a code snippet into your website or configuring it through Marker.io’s Browser SDK. Follow the steps below based on your setup.

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.

Test Native Browser Screenshot Rendering

Once you’ve configured native screenshot rendering, you can test how it works by capturing screenshots in different scenarios. Here is an example:

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

How to Remove the Screenshot Booster Link from Marker.io

Marker.io in a Localhost Environment