My Skinny Isn’t Loading

If your embedded Skinny widget isn’t appearing and there are no obvious JavaScript errors, the most common cause is your site’s Content Security Policy (CSP) blocking the widget script or API calls.

What is CSP?

CSP is a browser security policy sent by your server that limits which scripts, network requests, images, etc., are allowed to load. If a domain isn’t allowlisted in the policy, the browser will refuse the request and you’ll see an error like “Refused to load the script … because it violates the following Content Security Policy directive…”.

How to Confirm It’s CSP

Open your browser DevTools → Console. Look for “Refused to load the script …” or “blocked by Content Security Policy”.
Open the Network tab, click your page (e.g., /faq/index.html), and inspect Response Headers for Content-Security-Policy.

What to Allowlist

You need to allow:

https://theskinnyai.com in script-src (to load the widget script)
https://theskinnyai.com in connect-src (to call the function-path endpoint)

Netlify Sites

Pick one approach (both work):

Option A: netlify.toml

[build]
publish = "public"

[[headers]]
for = "/*"
[headers.values]
Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://theskinnyai.com; connect-src 'self' https://theskinnyai.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; frame-ancestors 'self';"

Option B: public/_headers

/*
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://theskinnyai.com; connect-src 'self' https://theskinnyai.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; frame-ancestors 'self';

After updating, redeploy (or restart Netlify Dev) and verify the Response Headers include the new domains.

Local Development Tips

Restart netlify dev after changes.
If you proxy to a framework server, netlify.toml headers are more reliable than _headers in dev.
As a quick workaround, you can self‑host the widget: copy chatbot-widget.js into public/ and use src="/chatbot-widget.js".

Example Embed

WordPress Sites Using WP Rocket

If you're using WP Rocket for caching and optimization, its JavaScript minification and deferral features can interfere with TheSkinnyAI widget loading. You'll need to exclude our script from optimization.

How to Fix

In your WordPress admin, go to Settings → WP Rocket → File Optimization
Scroll down to the JavaScript Files section
In the Excluded JavaScript Files field (under "Minify JavaScript files"), add:
```
theskinnyai.com
```
If you have Load JavaScript deferred enabled, also add to its exclusion field:
```
https://theskinnyai.com
```
Click Save Changes and clear your WP Rocket cache

Note: For 3rd party scripts like TheSkinnyAI, you can use either the full URL path or just the domain name in the exclusion fields. Using theskinnyai.com will exclude all scripts from our domain.

<script src="https://theskinnyai.com/chatbot-widget.js"
  data-api-endpoint="https://theskinnyai.com/.netlify/functions/proxy-fns/chat-complete"
  data-api-key="YOUR_PUBLIC_API_KEY"
  data-tenant-id="YOUR_TENANT_ID"
  data-theme="dark"
  data-name="Ask Skinny"
  data-fill-color="#0d6efd"
  data-text-color="#ffffff"
  data-position="bottom-right"></script>

Once the CSP is updated, the Skinny button should appear and network requests should succeed.

← Back to FAQ