A Content Security Policy (CSP) is a security feature that helps prevent cross-site scripting (XSS) and other code injection attacks. It works by restricting which scripts and styles a browser is allowed to load and execute on your page.
If your website uses a CSP, the GetFeedback Digital embed script and its dynamically injected styles must be explicitly allowed in your policy headers — otherwise the button/campaign will be blocked and won't render for your visitors.
Place the following JavaScript snippet at the bottom of your page, just before the </body> tag:
<!-- begin usabilla live embed code -->
<script type="text/javascript">window.lightningjs||function(n){...};</script>
<!-- end usabilla live embed code -->
The full embed code is available from your button's Install Button page inside the GetFeedback Digital app.
There are two approaches to allow the GetFeedback Digital embed script under a CSP. Choose the one that best fits your setup.
Use this approach if you cannot add a nonce attribute to the embed script tag (for example, if the snippet is managed by a third-party tag manager or a platform that doesn't support custom attributes).
Add the following values to your CSP response headers:
script-src
'sha256-ZZ7ywkxnzrp6SOmBensQIb7WyryRkzuYNAtl32XSpoc='
style-src
'nonce-0c3dc8325154'
Note: The static nonce value (0c3dc8325154) is a fixed string provided by GetFeedback Digital. This is a legacy mechanism and Option 2 below is preferred for new setups.
Use this approach if you control your HTML and can add attributes to the embed script tag. Dynamic nonces are more flexible and work well with per-request nonce generation (a common security best practice).
Step 1 — Add a nonce attribute to the embed script tag
Choose any nonce value (a random string per request is recommended) and add it as a nonce attribute:
<!-- begin usabilla live embed code --><scripttype="text/javascript"nonce="YOUR_NONCE_HERE">window.lightningjs||function(n){...};</script><!-- end usabilla live embed code -->
Step 2 — Add the nonce to both script-src and style-src
Use the same nonce value in both directives of your CSP header:
script-src
'nonce-YOUR_NONCE_HERE'
style-src
'nonce-YOUR_NONCE_HERE'
Why both directives? The embed script dynamically injects CSS styles at runtime. The browser applies the nonce from the <script> tag to these injected styles, so style-src must also allow the same nonce.
Example CSP header (with dynamic nonce)
Content-Security-Policy: script-src 'nonce-abc123xyz' ...; style-src 'nonce-abc123xyz' ...;
Content-Security-Policy header in the Response Headers section.Alternatively, check your web server or CDN configuration for CSP header settings.
| Symptom | Likely cause | Fix |
| Button does not appear; console shows a CSP script blocked error | The embed script hash or nonce is missing from script-src | Add the correct hash (Option 1) or nonce (Option 2) to script-src |
| Button appears but styles are broken or missing | The nonce or static nonce is missing from style-src | Add the matching value to style-src |
| Dynamic nonce approach not working | The nonce attribute on the <script> tag does not match what is in the CSP header | Ensure the exact same nonce string is used in both places |
| CSP errors after migrating from static to dynamic nonce | Old static hash/nonce still in headers alongside new nonce | Remove the old static values from your headers once the dynamic nonce is working |
| Option 1 (Static) | Option 2 (Dynamic nonce) | |
Requires modifying the <script> tag | No | Yes |
| Works with tag managers | Yes | Depends on tag manager support |
| Supports per-request nonce rotation | No | Yes |
| Recommended for new setups | No | Yes |