To resolve the issue of your webpage appearing unstyled after adding Microsoft Clarity, there are several potential causes and solutions to consider:
- Public Access to CSS: Ensure that your CSS files are publicly accessible. If they are hosted in a non-public environment (like localhost or intranet), Clarity won't be able to access them.
- Cross-Origin Access: Check if your site is blocking access to Clarity. You may need to allow public and cross-origin access to your site, including requests that contain the header
"User-Agent" : "Clarity-Bot". - Permanent Stylesheets: If you are using temporary stylesheets, consider making them permanent or increasing their duration to ensure they are available when Clarity tries to access them.
- Correct Content Headers: Verify that your stylesheet and font files are served with the appropriate content headers. This ensures that Clarity can correctly interpret and use these resources.
If you have tried these solutions and the issue persists, consider reaching out for support by sending an email to clarityMS@microsoft.com with details about the problem, including links to the affected recordings.
References: