Issues with CSS & Styles

This section shows you how to configure your settings if you encounter CSS or Style issues when creating screens with Usersnap.

CSS/Style issues in rendered screenshots

There may be instances when your Usersnap screens are not correctly rendered or lack CSS/style information. This is usually if your site is behind a firewall or requires basic authentication. It can also be that your static resources are protected.

Usersnap's rendering engine needs access to your site's static resources (images + stylesheets) to be able to render your screens accurately. You can find instructions here on how to fix this.

Font rendering issues

If the text in a screenshot has a different font than on your website it can be that our renderer failed to load the font.

You can make sure that the font can be loaded by setting the Access-Control-Allow-Origin header on the resource to *.

Known issue with modal

The modal component of multiple libraries is by default set to prevent the focus from leaving the modal as such behavior follows the accessibility guidelines.

Unfortunately, such behavior also blocks the user from typing in our widget if a modal is currently open. In order to resolve this issue, you need to ensure that modal is not preventing focus from leaving the modal.

For example, using MaterialUI library can be achieved by setting ‘disableEnforceFocus’ prop to true.
See here for more information.

Cross-origin Content

Cross-origin content is not captured and rendered in the Usersnap screen. This is because the browser does not allow the Usersnap widget to capture cross-origin content.

In this case, we suggest using our browser extensions to create a screenshot that shows the cross-origin content.

Custom HTML elements

Unfortunately, Usersnap does not support the usage of custom HTML elements. Although there aren't concrete plans for the future to support its usage, there is always the possibility of using the browser extension instead.