Articles on: Troubleshooting & FAQ

The screenshots are not generated correctly

One big thing about Feedbucket is that we automatically generate a screenshot on the new piece of feedback. Sometimes these screenshots are not generated correctly and below are a few things to know why.



How does Feedbucket generate screenshots?


We use a method that we call server-side screenshots. This allows us to generate screenshots on all environments like a mobile phone for example. However, this also means that Feedbucket's server's need to access your CSS and images in order to generate the screenshots correctly.


If we for some reason can not access these resources when the screenshot is generated, the screenshots will not look correct. There are ways for us to embed all resources like CSS and Images when the person submits the feedback which we'll talk about below. Now you at least know how it works.



Common issues when screenshots are not correctly generated.


You are submitting feedback on localhost


Feedbucket will load like normal even on localhost but we will have issues generating the screenshots. That's because we can not access the CSS and images on your local computer. Therefore you should aim to use Feedbucket on websites that are accessible through the web.



Your website is using Basic Auth (password protection).


A common practice for agencies is to put a staging website behind what is called Basic Authentication. This is when a username and password (native from the browser, so not your own login screen) appears to even access the website.


If your website is using Basic Authentication you need to give us access as well. You do this by:


  1. Logging into Feedbucket and going to your project.
  2. Clicking on the Settings tab.
  3. Clicking on Widget > Screenshot to your left.
  4. Toggling Basic Auth on.
  5. Entering the Username and Password.
  6. Hitting Save.


This is only used by Feedbucket to generate screenshots. If you absolutely do not want to give us access, see the section below on embedding all resources when submitting feedback.



You have some sort of IP-blocking on the website


Some websites in staging environment's have IP restrictions. If you have that on your website you need to allow Feedbucket servers so we can generate the screenshots.


Feedbucket IP's that should be whitelisted (please whitelist both IPv4 and IPv6):


  • 46.101.210.233
  • 157.230.101.106
  • 2a03:b0c0:3:d0::12cd:d001
  • 2a03:b0c0:3:d0::1014:8001


If you absolutely do not want to give our servers access you can read on how to embed all resources when submitting feedback below.



Your website is using iFrame's


Currently Feedbucket can not generate screenshots of iFrames. This is for security purposes and also how browsers work.



If the screenshot looks like it's scrolled to the wrong place


If the screenshot looks correct with CSS, images etc but it's scrolled to the wrong place below could be the reason why:



The website is using a system font


Different systems (Mac, Windows, Linux, etc) implement their system fonts a lot different and they can have different sizes. Therefore, if you client for example submit feedback on a Mac the website might look different (commonly that text wraps in a different way) from how we generate them on our servers. It's therefore recommended not to use system-ui fonts because we can not guarantee that the screenshot is generated on the exact same Browser+System combination as the client had when they submitted the feedback.



Embed CSS and images when submitting the screenshot


If you for some reason do not want to give Feedbucket access to your resources, you can embed the CSS and images at the time when someone submits the feedback. The reason why we don't do this by default is that it takes a bit longer to submit each screenshot; because more resources need to be uploaded to Feedbucket servers.


In order to do this, follow these steps (see the image below for reference):


  1. Log into Feedbucket and go to your project.
  2. Click on the Settings tab.
  3. Click on Widget > Screenshot to your left.
  4. Toggle Embed CSS and/or Embed Images on.
  5. Hit Save.



As you can see, there are two different options:


  • Embed CSS - When this is turned on, the website styling is captured upon feedback submission. The screenshot will look good even if Feedbucket is not able to reach the CSS from the outside, and this setting has no impact on how long the submission takes.
  • Embed Images - When this is turned on, Feedbucket will download the visible images on the page and include them in the feedback submission. Since some images can be large, the client may experience a delay with the submission (namely the time between clicking the Submit button and the feedback being sent). Use this feature only if you have missing or broken screenshots, and if you cannot allow access to Feedbucket in any other way.


These two settings are independent, and can be turned both on and off at the same time.



If you use the embed option for PDFs or other resources that have scrollable content, we will not be able to scroll to the exact position when screenshot feedback is submitted. This is due to a browser limitation. For these cases, we recommend submitting video feedback and scrolling to the desired feedback position.


Updated on: 11/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!