How to resolve Content Security Policy (CSP) issues blocking widgets and images
When your widget is not loading properly, displaying missing images, or failing to appear on your website, it is possible that your Content Security Policy (CSP) is the culprit.
CSP is a form of cyber security created to help combat common attacks resulting in data theft, distribution of malware, unauthorized admin access, and many more unsavory online practices.
Part of the way Content Security Policy protects your website from attacks is by allowing you to restrict permissions to load content on your website. This can sometimes interfere with external software in unwanted ways, such as blocking the chat widget.
If you see the widget briefly when the page loads and then it quickly disappears, your widget is likely being blocked due to your Content Security Policy. If your widget is missing graphic elements or loading incorrectly, you may need to update your website’s Content Security Policy (CSP).
There can be several reasons behind a widget not showing up on your website. If you need further help, schedule a call with our support team.
Adding a Domain Whitelist for Content Security Policy
To allow another domain to load scripts on your site, add a Content-Security-Policy header to your server’s configuration file. To enable the tawk.to widget on your site, add the following CSP headers on your server configuration.
Content-Security-Policy: style-src *.tawk.to fonts.googleapis.com cdn.jsdelivr.net
Content-Security-Policy: script-src *.tawk.to cdn.jsdelivr.net
Content-Security-Policy: frame-src *.tawk.to
Content-Security-Policy: font-src *.tawk.to fonts.gstatic.com
Content-Security-Policy: img-src *.tawk.to cdn.jsdelivr.net tawk.link
Content-Security-Policy: connect-src *.tawk.to wss://*.tawk.to
Content-Security-Policy: form-action *.tawk.to
If you need more information, this article shows how to add a header to commonly used web servers: How to Add a Header.