Skip to main content
A Content Security Policy (CSP) controls which scripts, styles, fonts, images, and other resources your website can load. If your website’s CSP blocks a resource used by Watermelon, the chat widget may not appear or may not display correctly.
CSP settings are managed by your website. Your website developer or hosting provider will need to update them; Watermelon cannot change your website’s CSP from within the chat widget.

​
Step 1: Find the blocked resource

  1. Open the page where the Watermelon chat widget is not working.
  2. Open your browser’s developer tools (usually F12 or right-click and select Inspect) and go to the Console tab.
  3. Look for a Content Security Policy error, often beginning with Refused to load or Refused to connect.
  4. Note the blocked URL and the CSP directive mentioned in the error, such as script-src, frame-src, or style-src.
The error tells your website developer which resource needs to be allowed.

​
Step 2: Allow the necessary Watermelon resources

Ask your website developer to add the relevant resources to your existing CSP rules, rather than replacing your current policy. Only allow resources that are actually being blocked.
Do not replace your full CSP or broadly allow all sources just to make the widget work. Keep your existing security restrictions and add only the required permissions.

​
Step 3: Configure a nonce if your website uses one

If your CSP uses nonces to allow trusted scripts and inline styles, add the same nonce generated for that page response to your Watermelon embed script:
Replace the placeholders with your actual widget ID, settings ID, and a fresh, unpredictable nonce generated for each page response. The nonce in the script tag must match the nonce allowed by your CSP. The widget passes the script’s nonce to the <style> elements it creates on your page. If you use style-src-elem, make sure that directive also permits the nonce. Keep in mind:
  • A nonce does not automatically permit iframes, external stylesheets, fonts, images, or network requests. Those still need the appropriate CSP permissions.
  • If your CSP uses strict-dynamic, your widget script needs a valid nonce even if https://chatwidget-prod.web.app is already listed in script-src.
  • Never use YOUR_PAGE_NONCE literally or reuse the same nonce across page responses.

​
Step 4: Test your changes

Once your developer has updated the CSP:
  1. Clear any relevant website or CDN cache and reload the page.
  2. Confirm that the chat widget appears and opens correctly.
  3. Check the browser console for any remaining CSP errors.
If the issue continues, contact Watermelon support and include:
  • The URL of the affected page.
  • A screenshot of the console error showing the blocked URL and CSP directive.
  • A short description of what is missing or not working (for example, the entire widget, the chat button, a font, or an image).
If a blocked resource belongs to the chat iframe itself rather than your website page, let Watermelon support know. The iframe’s own CSP cannot be changed through your website’s CSP settings.