Resolving Content Security Policy (CSP) issues blocking the widget, images, and Knowledge Base articles

If images aren’t showing in your tawk.to widget or your Knowledge Base articles appear broken, don’t load fully, or only display after a page refresh, the issue may be related to your site’s Content Security Policy (CSP).

CSP is a browser-based security feature that controls which resources (like images, scripts, and styles) can be loaded. While it enhances security, it can sometimes prevent legitimate resources, such as those from tawk.to, from displaying correctly.

You may be experiencing CSP-related issues if:

• The widget appears briefly and then disappears.

• Images within the widget do not load.

• The widget behaves unpredictably or malfunctions.

• Knowledge Base articles appear broken, load incompletely, or only display after a page refresh.

If you're experiencing any of these issues, it's a good idea to check your website's CSP settings.

CSP settings allow you to specify which sources are trusted to load content on your website. If your CSP is too restrictive, it can block images, scripts, and styles necessary for the tawk.to widget to function correctly.

To resolve this, you need to whitelist tawk.to resources in your CSP settings.

Add these directives to your server's response headers to whitelist the necessary tawk.to resources:

style-src

Content-Security-Policy: style-src *.tawk.to fonts.googleapis.com cdn.jsdelivr.net

script-src

Content-Security-Policy: script-src *.tawk.to cdn.jsdelivr.net

frame-src

Content-Security-Policy: frame-src *.tawk.to

font-src

Content-Security-Policy: font-src *.tawk.to fonts.gstatic.com

img-src

Content-Security-Policy: img-src *.tawk.to cdn.jsdelivr.net tawk.link s3.amazonaws.com

connect-src

Content-Security-Policy: connect-src *.tawk.to wss://*.tawk.to

form-action

Content-Security-Policy: form-action *.tawk.to

If you're unsure about how to modify your server configuration, consult your website administrator or hosting provider. To learn more, refer to this guide on adding headers to common web servers.

If your Knowledge Base articles aren’t loading properly, your site’s CSP may be blocking requests to https://tawk.help. When this domain is blocked, your articles may not display correctly on the first visit.

To resolve this issue, add the following to the connect-src directive in your CSP settings:

connect-src 'self' wss://*.tawk.to https://*.tawk.to https://*.tawk.help;

This ensures that your Knowledge Base article content is retrieved and displayed properly the first time a visitor loads the page.

Example: Updating your CSP in Cloudflare

If you’re using Cloudflare, you can update your policy by going to:

Cloudflare > Rules > Custom Rules > Content Security Policy

Apply the full directive set shown above to any pages that display the widget or Knowledge Base articles. This ensures that all necessary resources are loaded without requiring a page refresh.

• Clear your browser cache and refresh the page
  Cached data may prevent recent changes from applying. Clear your browser's cache, then refresh the page to see if the widget displays correctly.
  
  

• Test on different browsers
  Some browsers may handle CSP differently. Test the widget on Chrome, Firefox, Safari, and Edge to identify any browser-specific issues.

If you have feedback about this article, or if you need more help:

• Click the green live chat icon

• Schedule a call with us

• Visit our community