FAQ

1. At which point does the session start and when does it end?

Q: When does a session start and what conditions cause it to end? Is there an inactivity period or does the session end when the website is closed?

A: The session starts as soon as the page loads and the WebSDK begins recording. There is no inactivity period per se; however, if there is no incoming data* from the client for 3 minutes, the session is considered finished, and the recording is uploaded.

*Incoming data = No internet connection, the OS being suspended or the browser/tab being closed.

2. Can events be sent directly from the script?

Q: How can I send events directly from the script? I understand that events can be triggered based on actions like button clicks or form submissions, but how can this be done directly within the script?

A: While clicks are captured as gestures by default, you can send custom events directly from the script by adding event listeners. For example:

<button id="mybtn">Click me</button>

<script>
const button = document.querySelector('#mybtn');
button.addEventListener('click', () => uxc.event('my_btn_clicked'));
</script>

In this example, when the button with the ID mybtn is clicked, a custom event named my_btn_clicked is sent to UXCam.

3. Why is my email input not being occluded?

Q: My email input is not being occluded. What could be the reason for this?

A: The email input will only be occluded if the input type is explicitly set to email. If the input field has its type set to text instead of email, it will not be occluded by default. Make sure that the input type is correctly defined as email to ensure occlusion, as described in the documentation.

4. Why are my styles in the app not showing properly during replay?

Q: My app's styles are not displaying correctly in the session replay. What could be causing this?

A: UXCam relies on the CSS files that were available at the time the session was recorded. If these assets become unavailable or restricted, the replay may not display styles correctly.

Common reasons why styles may not load:

• The resource no longer exists: It was part of a previous deployment and is no longer hosted on your server.
• The resource is inaccessible: It may require authentication or be restricted to an internal network.
• The resource is blocked by the browser due to CORS: Browsers enforce cross-origin security checks, preventing UXCam from loading your assets if CORS is not properly configured.

Fixing CORS Issues for UXCam

If your styles are being blocked due to CORS (Cross-Origin Resource Sharing), your server needs to explicitly allow UXCam to access these resources.

How to Allow UXCam to Access Your Assets via CORS

You must configure your server or cloud storage to include this CORS rule:

Access-Control-Allow-Origin: https://app.uxcam.com

If Your Assets Are Hosted on AWS S3

For Amazon S3 buckets, update the CORS configuration:

1. Go to AWS S3 Console.
2. Navigate to Permissions > CORS Configuration.
3. Add this JSON rule

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "HEAD"],
        "AllowedOrigins": ["https://app.uxcam.com"],
        "ExposeHeaders": []
    }
]

4. Save changes and test if styles now load in UXCam replays.

Reference: https://repost.aws/knowledge-center/s3-configure-cors

If Your Assets Are Hosted on a Custom Web Server

If you host assets on your own web server (Apache or Node.js), modify the server settings:

✔ For Apache (.htaccess file)

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://app.uxcam.com"
</IfModule>

✔ For Express.js (Node.js)

const cors = require('cors');  
app.use(cors({ origin: "<https://app.uxcam.com"> }));

Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS