Feedback with a screenshot

Give your team the visual context behind every reported issue.

Usersnap lets people capture a screenshot directly from your product and annotate it before submitting their feedback. This gives your team more context around what happened and where the issue occurred.

You can choose whether screenshots are required, optional, or available through an annotation-first experience, depending on how you want people to submit feedback.

Screenshot modes and annotations

Choose how you want users to start capturing visual context when they open the Usersnap widget.

Start from screenshot mode

Open the screenshot and annotation tools immediately when a user clicks the feedback button. This gives users a direct way to capture and highlight what they want to report before filling out the form.

Use this when: visual context is an important part of most submissions.

Simple screenshot mode

Start with a minimal screenshot experience that provides only the highlight tool. The feedback form appears after the user highlights an area.

Use this when: you want users to quickly point out a specific area without showing the full set of annotation tools.

Optional screenshot mode

Let users decide whether to include a screenshot or screen recording with their submission. The feedback form contains the screenshot and recording buttons, but capturing visual context is optional.

Use this when: screenshots are useful for some submissions but aren't necessary for every one.

📘
Please note
The widget does not start in screenshot/annotation mode on mobile devices

Annotations:

Once a screenshot has been captured, users can add annotations to show exactly what they want to highlight.

Usersnap supports up to five annotation tools: Highlight, Comment, Pen, Arrow, and Hide. You can choose which tools are available in your project. The Hide options alows your end users to hide sensitive information from the screenshot.

📘
PII feature
If there are confidential parts on the site that should always be hidden when taking screenshots, please take a look at the "usprivacy".

📘
Why are our screenshots so accurate?
We have developed for you over the last years a unique technology that allows creating accurate screenshots. To make this work, our cloud-based feedback software has to reach out to the page you want to take a screenshot for.
Sometimes, if the page (or web application) you are taking the screenshot from is protected by firewalls, it's not possible to create the screenshot, because of the missing access to the CSS or images of these pages. Read more
In this case, we have developed an alternative that creates the screenshot directly in the browser of your users. Continue reading to learn more about this cool feature.

Taking screenshots without our rendering technology

👍
This is a gated feature
Please contact our support for more details.

As described beforehand, there are situations, when our rendering technology can not access your servers. But we have you covered in these cases too.

With our newest enhancement, you can activate a feature that the in-app browser screenshots are taken via the browser-in-built "media-record-API".

This will create accurate screenshots and your users can add annotations on the screenshots. How cool is that? ;)

How do you activate this feature?

<script>
  window.onUsersnapCXLoad = function(api) {
    api.init({
    	nativeScreenshot: true
    });
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/global/load/globalapikey?onload=onUsersnapCXLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Add "nativeScreenshot: true" to the init() call.

If you want to open the screenshot with annotations in a new browser tab, you can use this way of initiating:

api.init({ nativeScreenshot: { target: '_blank' }});

What your users will see?

Your users will have to allow pop-ups to be opened in their browsers and they have to choose the screen or browser tab from which they want to take the screenshot. This is a browser-built-in request that is obligatory.

The rest goes smoothly like you know from our standard screenshotting technology.

Limitations of this technology

📘
Attention:

The native screenshot feature is not supported on mobile web browsers

The native screenshot is only available in a secure context.

When the widget is put inside the iframe, this feature will require user permission in order to access the screen. If users click on the button they will be asked to give permission to access their screen. After permission is granted, the Usersnap widget should be able to read this permission. In order to make it work, please use the attribute allow="display-capture" on the top iframe in which you put our widget.

This technology only works with the "optional screenshot mode" in Safari browsers (desktop) and one can share the window or screen, but not the tab alone.

More limitations shared with the screen recording feature are shown HERE.

Prerender technology

As an alternative way to render a screenshot correctly, it is possible to have this feature enabled.
Please contact our support service for its activation first.
Once enabled, you can toggle on the "Advanced screenshot mode" of the specific project.

The screenshot feature might take a bit to be activated after the button is clicked.

Then the users can proceed as usual.