Screenshots

UserHero can capture screenshots of the user's current view, making it easier to understand visual issues and provide context.

How It Works

When a user clicks the screenshot button:

1. The visible viewport is captured using HTML Canvas
2. Sensitive elements are automatically masked
3. The image is compressed
4. User can optionally annotate before submitting
5. Screenshot is uploaded and attached to feedback

Enabling Screenshots

Screenshots are configured per-widget in the dashboard:

Privacy Protections

Screenshots include automatic privacy protections:

Auto-Masking

These elements are automatically hidden in screenshots:

• <input type="password"> - Password fields
• <input type="email"> - Email inputs (optional)
• <iframe> - Embedded content
• Elements with data-userhero-mask attribute

Custom Masking

Add the data-userhero-mask attribute to hide specific elements:

<!-- This element will be hidden in screenshots -->
<div data-userhero-mask>
  Sensitive information here
</div>

<!-- Mask specific form fields -->
<input type="text" data-userhero-mask placeholder="SSN" />

Exclude from Capture

Use data-userhero-exclude to completely exclude elements:

<!-- This element won't appear in screenshots at all -->
<div data-userhero-exclude>
  <video src="private-content.mp4" />
</div>

Screenshot Quality

Programmatic Capture

Trigger screenshot capture via the SDK:

// Widget must be open first
UserHero.open();

// Then capture
await UserHero.captureScreenshot();

Troubleshooting

Screenshot Appears Blank

• Cross-origin images may not render (CORS restrictions)
• Some CSS effects may not capture correctly
• WebGL content may not be captured

Screenshot Capture Fails

Check for:

• Browser permissions
• Content Security Policy blocking canvas operations
• Ad blockers interfering

Elements Not Masking

Ensure:

• Attribute is spelled correctly: data-userhero-mask
• Element is in the DOM when capture occurs
• Element is visible (not display: none)

Browser Compatibility

Screenshot capture works in all modern browsers:

Storage & Retention

• Screenshots are stored securely in cloud storage
• Retention period: 90 days
• After 90 days, screenshots are automatically deleted
• Feedback text and metadata are retained according to your plan

Next Steps