Skip to main content

Native Screenshot

Written by Jon
Updated over 2 weeks ago

Native Screenshot uses the browser's built-in Screen Capture API to capture a tab, window, or entire screen, giving you an accurate capture of exactly what your users see. It's particularly useful when your site uses complex rendering technologies like 3D canvas or Google Maps, or when third-party access to your pages is restricted.

In some cases it activates automatically. In others, you'll need to enable it manually.


When to Use Native Screenshot

Use native screenshot when Userback’s standard screenshot engine struggles to render your page accurately. Common situations include:

  • Complex rendering technologies: Pages that use WebGL, 3D canvas, Google Maps, or similar rendering approaches are often poorly captured by the standard engine. Native screenshot captures the screen directly from the browser, so what the user sees is what gets captured.

  • Sites behind a firewall or not publicly accessible: The standard screenshot engine relies on server-side rendering, which requires your site to be publicly reachable. If your site is behind a firewall or restricted, screenshots will automatically fall back to native screenshot.

  • Localhost environments: When the widget is running on localhost, it automatically falls back to native screenshot. No configuration needed.


How to Enable Native Screenshot

To activate this feature, include one of the following code snippets either in your existing widget code or as a separate snippet on the pages where you'd like this feature to be active.

Userback.native_screenshot = true;

Or

Userback.init('widget_access_token', {
native_screenshot: true
});

📘 Note: On localhost and on sites that are not publicly accessible, native screenshot activates automatically. You do not need to add the code snippet in these cases.


How It Works for Your Users

When a user submits feedback with native screenshot enabled, the browser will prompt them to choose what to capture. The process takes two steps:

  1. Choose what to share: The browser will ask the user to select a tab, a window, or their entire screen.

  2. Allow access: The user clicks Allow to confirm. The screenshot is then captured and attached to the feedback submission automatically.

💡 Note: This browser permission prompt is a built-in security feature and cannot be bypassed or customized by Userback. Users will see it every time they submit a screenshot via native screenshot.


Caveats to Native Screenshot

  • Not available on mobile browsers: Native screenshot is not supported on mobile browsers. The standard screenshot engine will be used instead.

  • Browser permission prompt: Users will be shown a browser-level permission prompt when capturing a screenshot. This is a browser security feature and is outside Userback’s control.

  • Reduced customization: Because this method uses browser technology rather than the Userback screenshot engine, some screenshot customization options available in the standard engine may not apply.


Frequently Asked Questions

Q: My site uses Google Maps or a 3D canvas. Should I use native screenshot?

A: Yes. The standard Userback screenshot engine cannot accurately capture WebGL, 3D canvas, or map-based content. Native screenshot captures the screen directly from the browser, so the output reflects exactly what the user sees. Enable it manually using the code snippet above.

Q: Can I use Auto Screenshot and Native Screenshot together? A: Yes. Auto Screenshot, which captures a screenshot automatically when the widget opens, is fully supported when Native Screenshot is enabled. With both active, users will see the browser permission prompt as soon as the widget opens, before they begin filling in their feedback.

Q: Is native screenshot compatible with other Userback features?

A: Yes, with one thing to keep in mind: some screenshot customization options available in the standard engine may not apply when native screenshot is enabled. Auto Screenshot is fully supported.

Did this answer your question?