Here's how to configure the Marker.io widget snippet to match your needs. Set options on window.markerConfig before loading the snippet script.

<script>
  window.markerConfig = {
    project: 'YOUR_PROJECT_ID',
    // Add your configuration options here
  };
</script><script>
  !function(e,r,t){if(e.__Marker)return;e.__Marker={};var n=r.createElement("script");n.async=1,n.src="https://edge.marker.io/latest/shim.js";var s=r.getElementsByTagName("script")[0];s.parentNode.insertBefore(n,s)}(window,document);
</script>

Core Settings

Parameter	Type	Default	Description
`project`	string	-	Required. Your Marker.io project ID.
`silent`	boolean	`false`	Suppress all Marker.io console logs.
`demo`	boolean	`false`	Enable demo mode for testing.
`keyboardShortcuts`	boolean	`true`	Enable keyboard shortcuts. Set to `false` if they conflict with your app.

Reporter Information

Pre-fill reporter details so your users don't have to enter them manually. This is useful when your app already knows who the user is.

window.markerConfig = {
  project: 'YOUR_PROJECT_ID',
  reporter: {
    email: 'user@example.com',
    fullName: 'Jane Smith',
    createdAt: '2024-01-15'
  }
};

email - User's email address (validated before submission).
fullName - User's display name.
createdAt - Account creation date. Accepts a string or Date object.

You can also update reporter info at runtime. See the Widget JavaScript SDK for details.

For a full walkthrough, check out How to Automatically Identify Reporters.

Custom Data

Attach metadata to every feedback report. Pass any key-value pairs that help your team debug issues.

window.markerConfig = {
  project: 'YOUR_PROJECT_ID',
  customData: {
    plan: 'premium',
    userId: '12345',
    environment: 'production'
  }
};

The value must be a plain object. You can update it at runtime with Marker.setCustomData().

Screenshot Settings

Authenticated Media

If your site is behind SSO or a login wall, images and fonts can break in screenshots. Enable inlineProtectedAssets to capture them with the user's credentials.

window.markerConfig = {
  project: 'YOUR_PROJECT_ID',
  inlineProtectedAssets: true
};

For the full guide, see Capture behind-login-SSO content.

Native Browser Rendering

Use the browser's built-in screenshot API instead of server-side rendering. Not supported on mobile.

window.markerConfig = {
  project: 'YOUR_PROJECT_ID',
  useNativeScreenshot: true
};

For setup details, see Native browser screenshot rendering.

Server-Side Rendering Delay

If your page has CSS animations or dynamic content, add a delay before the server-side renderer takes the screenshot.

window.markerConfig = {
  project: 'YOUR_PROJECT_ID',
  ssr: {
    renderDelay: 750 // milliseconds, 0-15000
  }
};

Performance Optimizations

These options are all enabled by default. They reduce snapshot size and improve capture speed. Only disable them if you experience rendering issues.

Parameter	Default	Description
`enableFontFiltering`	`true`	Filters out unused `@font-face` rules from stylesheets.
`enableImageOptimization`	`true`	Optimizes images based on viewport visibility.
`enableViewportPlaceholders`	`true`	Replaces off-viewport images with lightweight placeholders.

Network Recording

Capture network requests alongside feedback reports. This gives your team full debugging context.

window.markerConfig = {
  project: 'YOUR_PROJECT_ID',
  networkRecording: {
    enable: true,
    excludedKeys: ['password', 'token', 'apiKey'],
    excludedDomains: ['payments.stripe.com']
  }
};

enable - Activate network recording early in the page lifecycle.
excludedKeys - Redact sensitive fields from captured request/response data.
excludedDomains - Skip requests to specific domains entirely.

Console recording is always enabled and cannot be turned off separately.

UI Customization

Feedback Button

Control the behavior of the floating feedback button.

window.markerConfig = {
  project: 'YOUR_PROJECT_ID',
  feedbackButton: {
    disableSlideAnimation: true,
    showEditWidget: false,
    showViewFeedback: false
  }
};

disableSlideAnimation - Disable the slide-in animation when the button appears.
showEditWidget - Show or hide the "Edit Widget" option.
showViewFeedback - Show or hide the "View Feedback" option.

Browser Extension

Control how the widget interacts with the Marker.io browser extension.

window.markerConfig = {
  project: 'YOUR_PROJECT_ID',
  extension: false // Completely disable extension detection
};

You can also pass an object for more control:

extension: {
  enable: false
}

CSS Classes for Screenshot Masking

Control what appears in captured screenshots by adding these classes or attributes to your HTML elements.

.mk-mask or .mkr-mask - Blur the element in screenshots.
.mk-exclude, .mkr-exclude, or .mkr-block - Remove the element from screenshots.
.mkr-ignore - Ignore the element completely.
data-marker-nocapture - Attribute to exclude an element from capture.

Use these to hide sensitive information like personal data, financial details, or internal tools from screenshots.

Complete Example

<script>
  window.markerConfig = {
    project: 'YOUR_PROJECT_ID',    // Reporter
    reporter: {
      email: 'user@company.com',
      fullName: 'Jane Smith'
    },    // Custom metadata
    customData: {
      plan: 'enterprise',
      version: '2.1.0',
      environment: 'production'
    },    // Screenshot settings
    inlineProtectedAssets: true,
    ssr: {
      renderDelay: 500
    },    // Network recording
    networkRecording: {
      enable: true,
      excludedKeys: ['password', 'apiKey', 'token'],
      excludedDomains: ['payments.stripe.com']
    },    // UI
    keyboardShortcuts: true,
    feedbackButton: {
      disableSlideAnimation: false
    }
  };
</script><script>
  !function(e,r,t){if(e.__Marker)return;e.__Marker={};var n=r.createElement("script");n.async=1,n.src="https://edge.marker.io/latest/shim.js";var s=r.getElementsByTagName("script")[0];s.parentNode.insertBefore(n,s)}(window,document);
</script>

For runtime control after the widget loads (showing/hiding, triggering captures, listening to events), see the Widget JavaScript SDK.