How to resolve Content Security Policy (CSP) issues blocking widgets and images

The instructions below are for desktops and laptops only.

If your tawk.to chat widget isn’t appearing or displaying images correctly, it could be due to your website's Content Security Policy (CSP) settings.


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.

How to identify CSP-related issues

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.


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

Understanding Content Security Policy (CSP)

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.

Whitelist the tawk.to chat widget

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.

Additional considerations
  • 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 need further help, schedule a call with us and we’ll assist you.

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

Was this article helpful?

73 out of 166 liked this article

Still need help? Message Us