Installing Screendesk script
Embed the Screendesk widget on your site and configure CSP for the script.
Install the Widget
The Screendesk widget is a lightweight JavaScript snippet you add to your website. Once installed, it powers features like customer screen recordings, console log capture, and sensitive data blurring — all without any visible UI changes to your site.
You need to be a workspace admin to access your widget code snippet. The snippet is the same for all widget-powered features (console logs, blur, recordings).
Overview
The widget loads a small script from Screendesk's servers using your workspace's unique identifier. It runs asynchronously so it won't slow down your page, and all its code is isolated to avoid conflicts with your existing JavaScript.
Once installed, the widget enables whichever features you've turned on in your workspace settings — there's no need to add separate snippets for each feature.
Finding your widget snippet
Your widget snippet is available in your Screendesk dashboard wherever a widget-powered feature is configured.
Copy the snippet
In Step 1: Add code snippet, you'll see your personalized embed code. Click the copy button to copy it to your clipboard.
The snippet looks like this:
<!-- Screendesk Embed -->
<script>
(function(){
var d = document;
var s = d.createElement("script");
s.src = "https://app.screendesk.io/widget/abc123";
s.async = 1;
d.getElementsByTagName("head")[0].appendChild(s);
})();
</script>The abc123 portion is your workspace's unique widget ID. It's generated automatically when your workspace is created.
Adding the snippet to your website
Insert the script tag just before the closing </body> tag of your HTML. This ensures that the script loads after all elements on the page have been rendered.
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
</head>
<body>
<!-- Your page content -->
<!-- Screendesk Embed -->
<script>
(function(){
var d = document;
var s = d.createElement("script");
s.src = "https://app.screendesk.io/widget/abc123";
s.async = 1;
d.getElementsByTagName("head")[0].appendChild(s);
})();
</script>
</body>
</html>Replace abc123 with your actual widget ID from the dashboard. The snippet won't work with a generic ID.
Why place it before </body>?
</body>?Placing the script at the end of the body ensures two things. First, all DOM elements are fully loaded, which allows the widget to correctly bind event listeners and interact with page elements. Second, using async = 1 means the script loads without blocking the rest of your page from rendering, so your visitors won't notice any delay.
Verifying installation
After adding the snippet to your site, you can confirm it's working directly from the Screendesk dashboard.
If verification succeeds, your widget is installed correctly and ready to use.
Content Security Policy (CSP)
If your website uses Content Security Policy headers, you'll need to update your CSP directives so the Screendesk widget can load and communicate properly.
Required CSP directives
Add the following to your existing CSP header or meta tag:
What each directive does
script-src
'unsafe-inline'
The widget uses inline JavaScript to dynamically create and load its script
script-src
https://app.screendesk.io
Allows loading the main widget script from Screendesk's servers
connect-src
https://app.screendesk.io
Allows API requests to Screendesk for transmitting captured data
connect-src
wss://socket.screendesk.io
Allows WebSocket connections for real-time communication during live sessions
style-src
'unsafe-inline'
Required for the widget's blur overlay and UI styles
Stricter CSP with nonces
If your security policy requires you to avoid 'unsafe-inline', use a nonce-based approach instead. Generate a unique random nonce on each page load and reference it in both the CSP header and the script tag:
Replace YOUR_RANDOM_NONCE with a cryptographically random value generated by your server on each request. The nonce must match between the CSP header and the script tag.
Testing your CSP configuration
After updating your CSP, open your browser's developer console (F12 → Console) and reload the page. If you see any errors mentioning "Content Security Policy" or "refused to load", adjust your directives accordingly.
How the widget works
The widget script is designed to be safe, performant, and isolated from your application code. Here's what happens under the hood.
Loading behavior
The script is wrapped in an Immediately Invoked Function Expression (IIFE), which means all its variables and functions are scoped privately. Nothing leaks into your global namespace or conflicts with your existing code.
It loads asynchronously (async = 1), so it never blocks page rendering. The browser downloads and executes the widget in the background while your page continues loading normally.
What the widget enables
Depending on which features you've activated in your workspace settings, the widget can perform the following:
Console log capture — overrides default console methods (
log,warn,error) to capture and transmit logs to Screendesk, giving your support team visibility into client-side issues.Network request monitoring — overrides
fetchandXMLHttpRequestto log request and response details, helping diagnose API-related problems.Sensitive data blurring — applies a blur style to elements matching CSS selectors you've configured, obscuring sensitive information during recordings.
Event tracking — listens for focus, blur, click, script errors, and unhandled promise rejections to build a complete picture of the user's session.
Real-time communication — uses WebSocket connections for live features like cobrowsing and live video calls.
Browser fingerprinting — collects browser and device details to generate a unique session identifier (no personal data is collected).
Session and state management
The widget uses sessionStorage to maintain session-level state that doesn't persist after the user closes their tab. Some features, such as the blur overlay, use localStorage to synchronize state across tabs — for example, ensuring that blur remains active when a user opens a new tab on your site. No cookies are created by the widget.
Security and privacy
Screendesk takes several measures to protect your users' data:
Scoped execution — all code runs inside an IIFE, preventing any interaction with your application's global variables or functions.
Header redaction — sensitive headers like
Authorizationare automatically redacted before network request data is transmitted. For example, if a request includes anAuthorizationheader, the widget replaces its value with[REDACTED].Minimal storage footprint — the widget uses
sessionStoragefor session data andlocalStorageonly where cross-tab synchronization is required (e.g., blur state). No cookies are set.Asynchronous loading — the widget never blocks your page or degrades the user experience.
Troubleshooting
The verification check fails
Make sure the snippet is placed in the HTML source of the page (not injected by another script after page load). The verification tool fetches your page's raw HTML and searches for the widget URL. If the snippet is added dynamically by a tag manager, it may not appear in the initial HTML response.
Also confirm you're checking the correct URL — the page you enter must be the exact page where the snippet is installed.
Console logs or blur features aren't working
The widget only activates features that are enabled in your workspace settings. Check Settings → Console Logs or Settings → Blur and make sure the relevant toggle is turned on.
Also verify that your plan includes the feature you're trying to use — some features require a specific plan tier.
I see CSP errors in the browser console
Your Content Security Policy is blocking the widget. Add the required directives described in the CSP section above. The most common missing directives are 'unsafe-inline' in script-src and wss://socket.screendesk.io in connect-src.
The widget conflicts with my existing JavaScript
This is unlikely because the widget runs inside an IIFE with fully scoped variables. If you're experiencing issues, check whether another script on your page is also overriding console methods or fetch / XMLHttpRequest. In rare cases, the order of script loading can matter — try moving the Screendesk snippet to be the last script on the page.
I added the snippet but nothing visible changed on my site
That's expected. The widget doesn't add any visible UI elements to your page. It works silently in the background, enabling features like console log capture and data blurring. To confirm it's working, use the verification tool in your dashboard or check your browser's network tab for requests to app.screendesk.io.
Last updated
Was this helpful?