> ## Documentation Index
> Fetch the complete documentation index at: https://watermelon.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Fix Content Security Policy (CSP) issues with the chat widget

> Learn how to update your website's Content Security Policy if it blocks the Watermelon chat widget or its resources.

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.

> [!NOTE]
>
> 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.

| What is not working? | CSP directive to check | Resource to allow |
| - | - | - |
| The chat widget does not load | `script-src` or `script-src-elem` | `https://chatwidget-prod.web.app` |
| The chat window is blocked | `frame-src` (or `child-src` where applicable) | `https://chatwidget-prod.web.app` |
| The chat button or other styling is missing | `style-src` or `style-src-elem` | `https://chatwidget-css.web.app` |
| Inline widget styles are blocked | `style-src` or `style-src-elem` | Use a CSP nonce if your website uses nonce-based policies (see below) |
| A Google Fonts stylesheet is blocked | `style-src` or `style-src-elem` | `https://fonts.googleapis.com` |
| A Google Fonts font file is blocked | `font-src` | `https://fonts.gstatic.com` |
| A network request is blocked | `connect-src` | The exact blocked origin shown in the console (for example, the widget loader currently requests `https://api.ipify.org`) |
| An image is blocked | `img-src` | The exact image origin shown in the console, if the error comes from your website's CSP |

> [!WARNING]
>
> 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:

```html theme={null}
<script
  type="module"
  nonce="YOUR_PAGE_NONCE"
  src="https://chatwidget-prod.web.app/embed/init.iife.js"
  data-watermelon-widget-id="YOUR_WIDGET_ID"
  data-watermelon-settings-id="YOUR_SETTINGS_ID"></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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.