CSS/Style Issues with Usersnap Screens

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 Screen

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.

Misplaced annotations / Giant screenshots

If you have misplaced annotations and/or screenshots that display the entire page, instead of only the viewport, check if you have a valid doctype declaration.

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 frontend framework Material UI

The Modal component of Material UI is by default set to prevent the focus from leaving the modal. Unfortunately, this also blocks the user from typing in our widget if a Modal is currently open.

To disable Modal’s automatically restoring focus, set the ‘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 uploading a normal screenshot of the webpage to your Usersnap dashboard or using our browser extensions to create a screen which 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.

Updated about a month ago

CSS/Style Issues with Usersnap Screens

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.