Screenshots

How screenshots work

Saber Feedback is a visual feedback tool that makes it easy for your customers to take screenshots. They can use screenshots to identify areas of the screen related to their feedback, making it easier for them to explain what they mean.

Every feedback form supports screenshots, so your customers can decide when they need to use screenshots – and when they don’t.

All your customers need to do is select the ‘Add screenshot’ button and then select the item on the page that relates to their feedback. This will then automatically be selected and they will get a success message saying ‘screenshot added’ with a tick.

You will then receive the screenshot as part of your customer’s feedback.

We get a lot of positive feedback about our screenshot functionality, but it is technically quite complex for us to provide. In a minority of cases, this can lead to screenshots not displaying correctly. If you are having problems, there are troubleshooting tips below.

Missing CSS and images

This is most common issue, and causes your screenshot to look like this:

This happens as sadly it’s simply not possible to take accurate screenshots directly in the browser, so Saber Feedback’s screenshots are generated by a farm of servers, running over 800 combinations of browser and operating system, to ensure your screenshots are 100% accurate.

The downside is that these screenshot servers need to be able to access your website’s asset files (Images, CSS, Fonts, etc) in order to create the screenshots.

There are three main common reasons for the screenshot servers not being able to access your assets - local sites, blanket authentication, and private networks.

Local Sites

If you wish to use Saber Feedback on a localhost website, or just try it locally before putting it on your live site, you’ll need to set a localhost tunneling service, such as ngrok to allow the screenshot server to access your local assets.

Blanket Authentication

Normally authentication isn’t an issue for Saber Feedback. Blanket authentication refers to setups where your entire site is behind authentication, including the assets. HTTP Basic Authentication is common example of this set up:

In the old days, this could easily be fixed by including a username and password in the asset URLs, and in fact Saber Feedback used to provide a feature to do this. Unfortunately this has now been deprecated as modern browsers have dropped support for credentials in URLs.

Luckily Saber Feedback still has a solution to this problem, albeit a slightly more complicated one. If you wish to use Saber Feedback on a site with blanket authentication, you need to use the cookies run-time option to provide the screenshot server with an authenticated cookie before the screenshot is taken.

Private Networks (Intranets)

Private networks and intranets cause a similar issue to localhost sites, as your assets are not globally accessible, so the screenshot server can’t use them to create screenshots.

Depending on your setup, you may be able to use a tunneling service such as ngrok to allow the screenshot server to access your local assets.

If your use case is not listed above, or the solutions specified do not work for you, please get in touch using the feedback button on the right

Missing fonts

Some browsers will not load webfonts from domains other than that of the host page. This means if your site uses self hosted webfonts, those fonts may not be displayed in screenshots. To fix this you need to allow Cross Origin Resource Sharing (CORS) on your webfonts:

Nginx

location ~* \.(eot|ttf|woff|woff2|otf)$ {
  add_header Access-Control-Allow-Origin '*';
}

Apache

<FilesMatch ".(eot|ttf|woff|woff2|otf)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

If you’re still having problems getting Saber Feedback working correctly please get in touch using the feedback button on the right.

Blank areas (iframes)

If your website uses iframes, these will appear as blank white rectangles in the screenshot. This is due to security restrictions in web browsers meaning that Saber Feedback can’t see the content of any iframes.

A solution to this is currently in development, which should fix this issue as long as you have control over the iframes, and can add the Saber Feedback script to them.

If your website relies on iframes, or if you’re having any issues that aren’t mentioned above, please get in touch using the feedback button on the right.